Skip to content

Commit c910f9d

Browse files
Bhupesh-mfsiBhupesh-mfsi
committed
added context and feature flag for settings
1 parent 5871b75 commit c910f9d

File tree

9 files changed

+245
-146
lines changed

9 files changed

+245
-146
lines changed

‎packages/messenger-widget/README.md‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -475,14 +475,17 @@ Example :
475475
push: false,
476476
},
477477
profile: {
478-
dm3: boolean | {
478+
dm3: {
479479
cloud: false,
480480
optimism: true,
481481
},
482-
self: boolean | {
482+
self: {
483483
gnosis: true,
484484
ens: false,
485485
}
486+
},
487+
settings: {
488+
messageView: true,
486489
}
487490
}
488491
disableDialogOptions: {

‎packages/messenger-widget/src/components/Preferences/Preferences.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
cursor: pointer;
3636
padding: 0.5rem 1.3rem 0.5rem 1.3rem;
3737
font-size: 1rem;
38+
align-items: center;
3839
}
3940

4041
.preferences-aside-content {

‎packages/messenger-widget/src/components/Preferences/Settings/Settings.tsx‎

Lines changed: 48 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,8 @@
1-
import { useEffect, useState } from 'react';
2-
import { Heading } from '../Heading/Heading';
31
import './Settings.css';
4-
5-
// message view option type ex : OLD/NEW
6-
export type MsgViewOptionType = {
7-
name: string;
8-
viewType: string;
9-
isEnabled: boolean;
10-
};
11-
12-
// settings data type to be used to store in local storage
13-
export type SettingsDataType = {
14-
messageView: string;
15-
};
2+
import { useContext } from 'react';
3+
import { Heading } from '../Heading/Heading';
4+
import { ModalContext } from '../../../context/ModalContext';
5+
import { SettingsContext } from '../../../context/SettingsContext';
166

177
export function Settings() {
188
// heading of the page
@@ -21,129 +11,57 @@ export function Settings() {
2111
// description of the page
2212
const description = 'Define how you want to enable/disable components';
2313

24-
// available message view options
25-
const msgViewOptions = [
26-
{
27-
name: 'Old message view',
28-
viewType: 'OLD',
29-
isEnabled: true,
30-
},
31-
{
32-
name: 'New message view',
33-
viewType: 'NEW',
34-
isEnabled: true,
35-
},
36-
];
37-
38-
// state to handle current message view type selected to show in chat screen
39-
const [msgViewSelected, setMsgViewSelected] = useState<MsgViewOptionType>(
40-
msgViewOptions[0],
41-
);
42-
43-
const getSettingsFromLocalStorage = () => {
44-
// fetch settings data from local storage
45-
const settingsData = localStorage.getItem('settings');
46-
// return data if found else return null
47-
return settingsData ? JSON.parse(settingsData) : null;
48-
};
49-
50-
const configureMsgView = () => {
51-
// fetch message view type from local storage
52-
const settingsData: SettingsDataType | null =
53-
getSettingsFromLocalStorage();
54-
// if message view found in local storage
55-
if (settingsData && settingsData.messageView) {
56-
// filter out the message type selected from available options
57-
const msgViewType = msgViewOptions.filter(
58-
(m) => m.viewType === settingsData.messageView,
59-
);
60-
// set the selected view type
61-
setMsgViewSelected(
62-
msgViewType.length ? msgViewType[0] : msgViewOptions[0],
63-
);
64-
}
65-
};
66-
67-
const updateSettingsInLocalStorage = (data: SettingsDataType) => {
68-
// convert JSON data of settings into string
69-
const settingsData = JSON.stringify(data);
70-
// save the data into local storage
71-
localStorage.setItem('settings', settingsData);
72-
};
73-
74-
const updateMsgView = (msgView: MsgViewOptionType) => {
75-
// get the view type from selected message view type object
76-
const { viewType } = msgView;
77-
78-
// update local state of message view type selected
79-
setMsgViewSelected(msgView);
80-
81-
// fetch local storage data for settings
82-
const settingsData: SettingsDataType | null =
83-
getSettingsFromLocalStorage();
84-
85-
// update the property of message view
86-
if (settingsData) {
87-
settingsData.messageView = viewType;
88-
}
89-
90-
// create a updated object based on the data
91-
const updatedSettings = settingsData
92-
? settingsData
93-
: {
94-
messageView: viewType,
95-
};
96-
97-
// update the local storage with the new message view type
98-
updateSettingsInLocalStorage(updatedSettings);
99-
};
100-
101-
// on screen load, get the settings data from local storage ad update the states
102-
useEffect(() => {
103-
configureMsgView();
104-
}, []);
14+
const { disabledOptions } = useContext(ModalContext);
15+
const { msgViewOptions, msgViewSelected, updateMsgView } =
16+
useContext(SettingsContext);
10517

10618
return (
10719
<div>
10820
{/* heading of the page */}
10921
<Heading heading={heading} description={description} />
11022

111-
{/* title and description of the property */}
112-
<div className="settings-msg-view">
113-
<div className="mt-2 font-weight-800 msg-view-heading">
114-
Message View
115-
</div>
116-
<div className="font-size-14 msg-view-desc">
117-
Select a view how the message should look like
118-
</div>
119-
</div>
120-
121-
{/* radio button options to select the message view type */}
122-
<div>
123-
<div className="settings-option-container">
124-
{msgViewOptions.map((option, index) => (
125-
<div
126-
key={index}
127-
className="radio d-flex mb-3 width-fit"
128-
onClick={() => {
129-
updateMsgView(option);
130-
}}
131-
>
132-
<input
133-
type="radio"
134-
value={option.viewType}
135-
checked={
136-
option.viewType === msgViewSelected.viewType
137-
}
138-
readOnly
139-
/>
140-
<label className="settings-option radio-label">
141-
{option.name}
142-
</label>
23+
{/* Show message option selection when option is not disabled */}
24+
{!disabledOptions.settings.messageView && (
25+
<>
26+
{/* title and description of the property */}
27+
<div className="settings-msg-view">
28+
<div className="mt-2 font-weight-800 msg-view-heading">
29+
Message View
30+
</div>
31+
<div className="font-size-14 msg-view-desc">
32+
Select a view how the message should look like
33+
</div>
34+
</div>
35+
36+
{/* radio button options to select the message view type */}
37+
<div>
38+
<div className="settings-option-container">
39+
{msgViewOptions.map((option, index) => (
40+
<div
41+
key={index}
42+
className="radio d-flex mb-3 width-fit"
43+
onClick={() => {
44+
updateMsgView(option);
45+
}}
46+
>
47+
<input
48+
type="radio"
49+
value={option.viewType}
50+
checked={
51+
option.viewType ===
52+
msgViewSelected.viewType
53+
}
54+
readOnly
55+
/>
56+
<label className="settings-option radio-label">
57+
{option.name}
58+
</label>
59+
</div>
60+
))}
14361
</div>
144-
))}
145-
</div>
146-
</div>
62+
</div>
63+
</>
64+
)}
14765
</div>
14866
);
14967
}

‎packages/messenger-widget/src/context/ModalContext.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,9 @@ export const ModalContext = React.createContext<ModalContextType>({
9494
{ key: 'gnosis', value: false },
9595
],
9696
},
97+
settings: {
98+
messageView: false,
99+
},
97100
},
98101
isProfileDialogDisabled: () => false,
99102
});

‎packages/messenger-widget/src/context/SettingsContext.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react';
2+
import {
3+
MSG_VIEW_OPTIONS,
4+
MsgViewOptionType,
5+
useSettings,
6+
} from '../hooks/settings/useSettings';
7+
8+
export type SettingsContextType = {
9+
msgViewOptions: MsgViewOptionType[];
10+
updateMsgView: (msgView: MsgViewOptionType) => void;
11+
msgViewSelected: MsgViewOptionType;
12+
};
13+
14+
export const SettingsContext = React.createContext<SettingsContextType>({
15+
msgViewOptions: MSG_VIEW_OPTIONS,
16+
updateMsgView: (msgView: MsgViewOptionType) => {},
17+
msgViewSelected: MSG_VIEW_OPTIONS[0],
18+
});
19+
20+
export const SettingsContextProvider = ({ children }: { children?: any }) => {
21+
const { msgViewOptions, updateMsgView, msgViewSelected } = useSettings();
22+
23+
return (
24+
<SettingsContext.Provider
25+
value={{
26+
msgViewOptions,
27+
updateMsgView,
28+
msgViewSelected,
29+
}}
30+
>
31+
{children}
32+
</SettingsContext.Provider>
33+
);
34+
};

‎packages/messenger-widget/src/hooks/modals/useModal.ts‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,9 @@ export type DisabledOptionsType = {
3939
dm3: { key: string; value: boolean }[];
4040
own: { key: string; value: boolean }[];
4141
};
42+
settings: {
43+
messageView: boolean;
44+
};
4245
};
4346

4447
export const useModal = () => {
@@ -102,6 +105,9 @@ export const useModal = () => {
102105
{ key: 'gnosis', value: false },
103106
],
104107
},
108+
settings: {
109+
messageView: false,
110+
},
105111
},
106112
);
107113

@@ -247,9 +253,30 @@ export const useModal = () => {
247253
}
248254
}
249255

256+
// update settings dialog
257+
const updatedSettingsOptions =
258+
dialogDisabled.settings === true
259+
? updatedProfileOptions.map((pref) => {
260+
return {
261+
...pref,
262+
isEnabled:
263+
pref.ticker === PREFERENCES_ITEMS.SETTINGS
264+
? false
265+
: pref.isEnabled,
266+
};
267+
})
268+
: updatedProfileOptions;
269+
270+
// disable specific settings option
271+
if (typeof dialogDisabled.settings === 'object') {
272+
optionsToDisable.settings.messageView =
273+
dialogDisabled.settings.messageView ?? false;
274+
}
275+
276+
// update the states for disabled options
250277
setDisabledOptions(optionsToDisable);
251278
setPreferencesOptions(
252-
updatedProfileOptions as PreferencesOptionType[],
279+
updatedSettingsOptions as PreferencesOptionType[],
253280
);
254281

255282
return;

0 commit comments

Comments
 (0)