forked from RocketChat/Rocket.Chat
/
NotificationPreferencesWithData.tsx
97 lines (81 loc) · 3.27 KB
/
NotificationPreferencesWithData.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
import { useCustomSound, useUserSubscription, useTranslation } from '@rocket.chat/ui-contexts';
import type { ReactElement } from 'react';
import React, { memo } from 'react';
import { useEndpointAction } from '../../../../hooks/useEndpointAction';
import { useForm } from '../../../../hooks/useForm';
import { useTabBarClose } from '../../contexts/ToolboxContext';
import NotificationPreferences from './NotificationPreferences';
export type NotificationFormValues = {
turnOn: boolean;
muteGroupMentions: boolean;
showCounter: boolean;
showMentions: boolean;
desktopAlert: string;
desktopSound: string;
mobileAlert: string;
emailAlert: string;
};
const NotificationPreferencesWithData = ({ rid }: { rid: string }): ReactElement => {
const t = useTranslation();
const subscription = useUserSubscription(rid);
const customSound = useCustomSound();
const handleClose = useTabBarClose();
const saveSettings = useEndpointAction('POST', '/v1/rooms.saveNotification', {
successMessage: t('Room_updated_successfully'),
});
const { values, handlers, hasUnsavedChanges, commit } = useForm({
turnOn: !subscription?.disableNotifications,
muteGroupMentions: !!subscription?.muteGroupMentions,
showCounter: !subscription?.hideUnreadStatus,
showMentions: !subscription?.hideMentionStatus,
desktopAlert: (subscription?.desktopPrefOrigin === 'subscription' && subscription.desktopNotifications) || 'default',
desktopSound: subscription?.audioNotificationValue || 'default',
mobileAlert: (subscription?.mobilePrefOrigin === 'subscription' && subscription.mobilePushNotifications) || 'default',
emailAlert: (subscription?.emailPrefOrigin === 'subscription' && subscription.emailNotifications) || 'default',
});
const { turnOn, muteGroupMentions, showCounter, showMentions, desktopAlert, desktopSound, mobileAlert, emailAlert } =
values as NotificationFormValues;
const defaultOption: [string, string][] = [
['default', t('Default')],
['all', t('All_messages')],
['mentions', t('Mentions')],
['nothing', t('Nothing')],
];
const customSoundAsset = customSound?.getList()?.map((value) => [value._id, value.name]) || [];
const handleOptions = {
alerts: defaultOption,
audio: defaultOption,
sound: [['none None', t('None')], ['default', t('Default')], ...customSoundAsset] as [string, string][],
};
const handlePlaySound = (): void => customSound.play(desktopSound);
const handleSaveButton = useMutableCallback(() => {
const notifications = {
disableNotifications: turnOn ? '0' : '1',
muteGroupMentions: muteGroupMentions ? '1' : '0',
hideUnreadStatus: showCounter ? '0' : '1',
hideMentionStatus: showMentions ? '0' : '1',
desktopNotifications: desktopAlert,
audioNotificationValue: desktopSound,
mobilePushNotifications: mobileAlert,
emailNotifications: emailAlert,
};
saveSettings({
roomId: rid,
notifications,
});
commit();
});
return (
<NotificationPreferences
handleClose={handleClose}
formValues={values as NotificationFormValues}
formHandlers={handlers}
formHasUnsavedChanges={hasUnsavedChanges}
handlePlaySound={handlePlaySound}
handleOptions={handleOptions}
handleSaveButton={handleSaveButton}
/>
);
};
export default memo(NotificationPreferencesWithData);