Skip to content

Commit d403eed

Browse files
committed
Simplify state logic for the switch component
1 parent 4399cd6 commit d403eed

File tree

1 file changed

+23
-43
lines changed

1 file changed

+23
-43
lines changed

site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.tsx

Lines changed: 23 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -33,38 +33,6 @@ import {
3333
import { pageTitle } from "utils/page";
3434
import { Section } from "../Section";
3535

36-
type PreferenceSwitchProps = {
37-
id: string;
38-
disabled: boolean;
39-
onToggle: (checked: boolean) => Record<string, boolean>;
40-
};
41-
42-
const PreferenceSwitch: FC<PreferenceSwitchProps> = ({
43-
id,
44-
disabled,
45-
onToggle,
46-
}) => {
47-
const { user } = useAuthenticated();
48-
const queryClient = useQueryClient();
49-
const updatePreferences = useMutation(
50-
updateUserNotificationPreferences(user.id, queryClient),
51-
);
52-
53-
return (
54-
<Switch
55-
id={id}
56-
size="small"
57-
checked={!disabled}
58-
onChange={async (_, checked) => {
59-
await updatePreferences.mutateAsync({
60-
template_disabled_map: onToggle(checked),
61-
});
62-
displaySuccess("Notification preferences updated");
63-
}}
64-
/>
65-
);
66-
};
67-
6836
export const NotificationsPage: FC = () => {
6937
const { user, permissions } = useAuthenticated();
7038
const [disabledPreferences, templatesByGroup, dispatchMethods] = useQueries({
@@ -88,6 +56,10 @@ export const NotificationsPage: FC = () => {
8856
notificationDispatchMethods(),
8957
],
9058
});
59+
const queryClient = useQueryClient();
60+
const updatePreferences = useMutation(
61+
updateUserNotificationPreferences(user.id, queryClient),
62+
);
9163
const ready =
9264
disabledPreferences.data && templatesByGroup.data && dispatchMethods.data;
9365

@@ -117,15 +89,18 @@ export const NotificationsPage: FC = () => {
11789
<List>
11890
<ListItem css={styles.listHeader}>
11991
<ListItemIcon>
120-
<PreferenceSwitch
92+
<Switch
12193
id={group}
122-
disabled={allDisabled}
123-
onToggle={(checked) => {
94+
checked={!allDisabled}
95+
onChange={async (_, checked) => {
12496
const updated = { ...disabledPreferences.data };
12597
for (const tpl of templates) {
12698
updated[tpl.id] = !checked;
12799
}
128-
return updated;
100+
await updatePreferences.mutateAsync({
101+
template_disabled_map: updated,
102+
});
103+
displaySuccess("Notification preferences updated");
129104
}}
130105
/>
131106
</ListItemIcon>
@@ -150,14 +125,19 @@ export const NotificationsPage: FC = () => {
150125
<Fragment key={tmpl.id}>
151126
<ListItem>
152127
<ListItemIcon>
153-
<PreferenceSwitch
128+
<Switch
154129
id={tmpl.id}
155-
disabled={disabledPreferences.data[tmpl.id]}
156-
onToggle={(checked) => {
157-
return {
158-
...disabledPreferences.data,
159-
[tmpl.id]: !checked,
160-
};
130+
checked={!disabledPreferences.data[tmpl.id]}
131+
onChange={async (_, checked) => {
132+
await updatePreferences.mutateAsync({
133+
template_disabled_map: {
134+
...disabledPreferences.data,
135+
[tmpl.id]: !checked,
136+
},
137+
});
138+
displaySuccess(
139+
"Notification preferences updated",
140+
);
161141
}}
162142
/>
163143
</ListItemIcon>

0 commit comments

Comments
 (0)