Skip to content

Commit d496e94

Browse files
chrisbobbegnprice
chrisbobbe
authored and
gnprice
committed
PerAccountNotificationSettingsGroup [nfc]: Extract out to this new file
1 parent 4b1099e commit d496e94

File tree

2 files changed

+119
-80
lines changed

2 files changed

+119
-80
lines changed

‎src/settings/NotificationsScreen.js

Lines changed: 3 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -8,26 +8,22 @@ import invariant from 'invariant';
88
import type { RouteProp } from '../react-navigation';
99
import type { AppNavigationProp } from '../nav/AppNavigator';
1010
import { useGlobalSelector, useSelector } from '../react-redux';
11-
import { getAuth, getSettings } from '../selectors';
12-
import SwitchRow from '../common/SwitchRow';
1311
import Screen from '../common/Screen';
14-
import * as api from '../api';
1512
import ServerPushSetupBanner from '../common/ServerPushSetupBanner';
1613
import NavRow from '../common/NavRow';
1714
import { IconAlertTriangle } from '../common/Icons';
1815
import type { LocalizableText } from '../types';
1916
import { TranslationContext } from '../boot/TranslationProvider';
2017
import { kWarningColor } from '../styles/constants';
2118
import { getIdentities, getIdentity, getIsActiveAccount } from '../account/accountsSelectors';
22-
import { getRealm, getRealmName } from '../directSelectors';
23-
import ZulipText from '../common/ZulipText';
24-
import SettingsGroup from './SettingsGroup';
19+
import { getRealm } from '../directSelectors';
2520
import { openSystemNotificationSettings } from '../utils/openLink';
2621
import {
2722
useNotificationReportsByIdentityKey,
2823
NotificationProblem,
2924
} from './NotifTroubleshootingScreen';
3025
import { keyOfIdentity } from '../account/accountMisc';
26+
import PerAccountNotificationSettingsGroup from './PerAccountNotificationSettingsGroup';
3127

3228
type Props = $ReadOnly<{|
3329
navigation: AppNavigationProp<'notifications'>,
@@ -56,7 +52,6 @@ export default function NotificationsScreen(props: Props): Node {
5652

5753
const _ = useContext(TranslationContext);
5854

59-
const auth = useSelector(getAuth);
6055
const identity = useSelector(getIdentity);
6156
const notificationReportsByIdentityKey = useNotificationReportsByIdentityKey();
6257
const notificationReport = notificationReportsByIdentityKey.get(keyOfIdentity(identity));
@@ -67,11 +62,7 @@ export default function NotificationsScreen(props: Props): Node {
6762
const otherAccounts = useGlobalSelector(state =>
6863
getIdentities(state).filter(identity_ => !getIsActiveAccount(state, identity_)),
6964
);
70-
const realmName = useSelector(getRealmName);
7165
const pushNotificationsEnabled = useSelector(state => getRealm(state).pushNotificationsEnabled);
72-
const offlineNotification = useSelector(state => getSettings(state).offlineNotification);
73-
const onlineNotification = useSelector(state => getSettings(state).onlineNotification);
74-
const streamNotification = useSelector(state => getSettings(state).streamNotification);
7566

7667
const systemSettingsWarnings = notificationReport.problems
7768
.map(systemSettingsWarning)
@@ -101,37 +92,6 @@ export default function NotificationsScreen(props: Props): Node {
10192
openSystemNotificationSettings();
10293
}, [systemSettingsWarnings, _]);
10394

104-
const handleTroubleshootingPress = useCallback(() => {
105-
navigation.push('notif-troubleshooting');
106-
}, [navigation]);
107-
108-
// TODO(#3999): It'd be good to show "working on it" UI feedback while a
109-
// request is pending, after the user touches a switch.
110-
111-
const handleOfflineNotificationChange = useCallback(() => {
112-
api.toggleMobilePushSettings({
113-
auth,
114-
opp: 'offline_notification_change',
115-
value: !offlineNotification,
116-
});
117-
}, [offlineNotification, auth]);
118-
119-
const handleOnlineNotificationChange = useCallback(() => {
120-
api.toggleMobilePushSettings({
121-
auth,
122-
opp: 'online_notification_change',
123-
value: !onlineNotification,
124-
});
125-
}, [onlineNotification, auth]);
126-
127-
const handleStreamNotificationChange = useCallback(() => {
128-
api.toggleMobilePushSettings({
129-
auth,
130-
opp: 'stream_notification_change',
131-
value: !streamNotification,
132-
});
133-
}, [streamNotification, auth]);
134-
13595
const handleOtherAccountsPress = useCallback(() => {
13696
navigation.push('account-pick');
13797
}, [navigation]);
@@ -166,44 +126,7 @@ export default function NotificationsScreen(props: Props): Node {
166126
{!notificationReport.problems.includes(NotificationProblem.SystemSettingsDisabled) && (
167127
<>
168128
{pushNotificationsEnabled && (
169-
<SettingsGroup
170-
title={{
171-
text: 'Notification settings for this account ({email} in {realmName}):',
172-
values: {
173-
email: <ZulipText style={{ fontWeight: 'bold' }} text={identity.email} />,
174-
realmName: <ZulipText style={{ fontWeight: 'bold' }} text={realmName} />,
175-
},
176-
}}
177-
>
178-
<SwitchRow
179-
label="Notifications when offline"
180-
value={offlineNotification}
181-
onValueChange={handleOfflineNotificationChange}
182-
/>
183-
<SwitchRow
184-
label="Notifications when online"
185-
value={onlineNotification}
186-
onValueChange={handleOnlineNotificationChange}
187-
/>
188-
<SwitchRow
189-
label="Stream notifications"
190-
value={streamNotification}
191-
onValueChange={handleStreamNotificationChange}
192-
/>
193-
<NavRow
194-
{...(() =>
195-
notificationReport.problems.length > 0 && {
196-
leftElement: {
197-
type: 'icon',
198-
Component: IconAlertTriangle,
199-
color: kWarningColor,
200-
},
201-
subtitle: 'Notifications for this account may not arrive.',
202-
})()}
203-
title="Troubleshooting"
204-
onPress={handleTroubleshootingPress}
205-
/>
206-
</SettingsGroup>
129+
<PerAccountNotificationSettingsGroup navigation={navigation} />
207130
)}
208131
{otherAccounts.length > 0 && (
209132
<NavRow

‎src/settings/PerAccountNotificationSettingsGroup.js

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
/* @flow strict-local */
2+
3+
import React, { useCallback } from 'react';
4+
import type { Node } from 'react';
5+
import invariant from 'invariant';
6+
7+
import type { AppNavigationMethods } from '../nav/AppNavigator';
8+
import { useSelector } from '../react-redux';
9+
import { getAuth, getSettings } from '../selectors';
10+
import SwitchRow from '../common/SwitchRow';
11+
import * as api from '../api';
12+
import NavRow from '../common/NavRow';
13+
import { IconAlertTriangle } from '../common/Icons';
14+
import { kWarningColor } from '../styles/constants';
15+
import { getIdentity } from '../account/accountsSelectors';
16+
import { getRealmName } from '../directSelectors';
17+
import ZulipText from '../common/ZulipText';
18+
import SettingsGroup from './SettingsGroup';
19+
import { useNotificationReportsByIdentityKey } from './NotifTroubleshootingScreen';
20+
import { keyOfIdentity } from '../account/accountMisc';
21+
22+
type Props = $ReadOnly<{|
23+
navigation: AppNavigationMethods,
24+
|}>;
25+
26+
/**
27+
* A SettingsGroup with per-account settings for NotificationsScreen.
28+
*/
29+
export default function PerAccountNotificationSettingsGroup(props: Props): Node {
30+
const { navigation } = props;
31+
32+
const auth = useSelector(getAuth);
33+
const identity = useSelector(getIdentity);
34+
const notificationReportsByIdentityKey = useNotificationReportsByIdentityKey();
35+
const notificationReport = notificationReportsByIdentityKey.get(keyOfIdentity(identity));
36+
invariant(
37+
notificationReport,
38+
'NotificationsScreen: expected notificationReport for current account',
39+
);
40+
const realmName = useSelector(getRealmName);
41+
const offlineNotification = useSelector(state => getSettings(state).offlineNotification);
42+
const onlineNotification = useSelector(state => getSettings(state).onlineNotification);
43+
const streamNotification = useSelector(state => getSettings(state).streamNotification);
44+
45+
const handleTroubleshootingPress = useCallback(() => {
46+
navigation.push('notif-troubleshooting');
47+
}, [navigation]);
48+
49+
// TODO(#3999): It'd be good to show "working on it" UI feedback while a
50+
// request is pending, after the user touches a switch.
51+
52+
const handleOfflineNotificationChange = useCallback(() => {
53+
api.toggleMobilePushSettings({
54+
auth,
55+
opp: 'offline_notification_change',
56+
value: !offlineNotification,
57+
});
58+
}, [offlineNotification, auth]);
59+
60+
const handleOnlineNotificationChange = useCallback(() => {
61+
api.toggleMobilePushSettings({
62+
auth,
63+
opp: 'online_notification_change',
64+
value: !onlineNotification,
65+
});
66+
}, [onlineNotification, auth]);
67+
68+
const handleStreamNotificationChange = useCallback(() => {
69+
api.toggleMobilePushSettings({
70+
auth,
71+
opp: 'stream_notification_change',
72+
value: !streamNotification,
73+
});
74+
}, [streamNotification, auth]);
75+
76+
return (
77+
<SettingsGroup
78+
title={{
79+
text: 'Notification settings for this account ({email} in {realmName}):',
80+
values: {
81+
email: <ZulipText style={{ fontWeight: 'bold' }} text={identity.email} />,
82+
realmName: <ZulipText style={{ fontWeight: 'bold' }} text={realmName} />,
83+
},
84+
}}
85+
>
86+
<SwitchRow
87+
label="Notifications when offline"
88+
value={offlineNotification}
89+
onValueChange={handleOfflineNotificationChange}
90+
/>
91+
<SwitchRow
92+
label="Notifications when online"
93+
value={onlineNotification}
94+
onValueChange={handleOnlineNotificationChange}
95+
/>
96+
<SwitchRow
97+
label="Stream notifications"
98+
value={streamNotification}
99+
onValueChange={handleStreamNotificationChange}
100+
/>
101+
<NavRow
102+
{...(() =>
103+
notificationReport.problems.length > 0 && {
104+
leftElement: {
105+
type: 'icon',
106+
Component: IconAlertTriangle,
107+
color: kWarningColor,
108+
},
109+
subtitle: 'Notifications for this account may not arrive.',
110+
})()}
111+
title="Troubleshooting"
112+
onPress={handleTroubleshootingPress}
113+
/>
114+
</SettingsGroup>
115+
);
116+
}

0 commit comments

Comments
 (0)