diff --git a/web/modals/threads/notifications/notifications-modal.react.js b/web/modals/threads/notifications/notifications-modal.react.js index 94c21841d..b0f488b6c 100644 --- a/web/modals/threads/notifications/notifications-modal.react.js +++ b/web/modals/threads/notifications/notifications-modal.react.js @@ -1,186 +1,193 @@ // @flow import * as React from 'react'; import { updateSubscription, updateSubscriptionActionTypes, } from 'lib/actions/user-actions'; import { threadInfoSelector } from 'lib/selectors/thread-selectors'; import { useServerCall, useDispatchActionPromise, } from 'lib/utils/action-utils'; import { assetCacheURLPrefix, focusedNotificationsIllustrationAsset, badgeOnlyNotificationsIllustrationAsset, backgroundNotificationsIllustrationAsset, } from '../../../assets.js'; import Button from '../../../components/button.react'; import EnumSettingsOption from '../../../components/enum-settings-option.react'; import { useSelector } from '../../../redux/redux-utils'; import Modal from '../../modal.react'; import css from './notifications-modal.css'; type NotificationSettings = 'focused' | 'badge-only' | 'background'; +const BANNER_NOTIFS = 'Banner notifs'; +const BADGE_COUNT = 'Badge count'; +const IN_FOCUSED_TAB = 'Lives in Focused tab'; +const IN_BACKGROUND_TAB = 'Lives in Background tab'; + +const focusedStatements = [ + { statement: BANNER_NOTIFS, isStatementValid: true }, + { statement: BADGE_COUNT, isStatementValid: true }, + { statement: IN_FOCUSED_TAB, isStatementValid: true }, +]; + +const badgeOnlyStatements = [ + { statement: BANNER_NOTIFS, isStatementValid: false }, + { statement: BADGE_COUNT, isStatementValid: true }, + { statement: IN_FOCUSED_TAB, isStatementValid: true }, +]; + +const backgroundStatements = [ + { statement: BANNER_NOTIFS, isStatementValid: false }, + { statement: BADGE_COUNT, isStatementValid: false }, + { statement: IN_BACKGROUND_TAB, isStatementValid: true }, +]; + type Props = { +threadID: string, +onClose: () => void, }; - function NotificationsModal(props: Props): React.Node { const { onClose, threadID } = props; const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]); const { subscription } = threadInfo.currentUser; const initialThreadSetting = React.useMemo(() => { if (!subscription.home) { return 'background'; } if (!subscription.pushNotifs) { return 'badge-only'; } return 'focused'; }, [subscription.home, subscription.pushNotifs]); const [ notificationSettings, setNotificationSettings, ] = React.useState(initialThreadSetting); const onFocusedSelected = React.useCallback( () => setNotificationSettings('focused'), [], ); const onBadgeOnlySelected = React.useCallback( () => setNotificationSettings('badge-only'), [], ); const onBackgroundSelected = React.useCallback( () => setNotificationSettings('background'), [], ); const isFocusedSelected = notificationSettings === 'focused'; const focusedItem = React.useMemo(() => { - const statements = [ - { statement: 'Banner notifs', isStatementValid: true }, - { statement: 'Badge count', isStatementValid: true }, - { statement: 'Lives in Focused tab', isStatementValid: true }, - ]; const icon = ( ); return ( ); }, [isFocusedSelected, onFocusedSelected]); const isFocusedBadgeOnlySelected = notificationSettings === 'badge-only'; const focusedBadgeOnlyItem = React.useMemo(() => { - const statements = [ - { statement: 'Banner notifs', isStatementValid: false }, - { statement: 'Badge count', isStatementValid: true }, - { statement: 'Lives in Focused tab', isStatementValid: true }, - ]; const icon = ( ); return ( ); }, [isFocusedBadgeOnlySelected, onBadgeOnlySelected]); const isBackgroundSelected = notificationSettings === 'background'; const backgroundItem = React.useMemo(() => { - const statements = [ - { statement: 'Banner notifs', isStatementValid: false }, - { statement: 'Badge count', isStatementValid: false }, - { statement: 'Lives in Background tab', isStatementValid: true }, - ]; const icon = ( ); return ( ); }, [isBackgroundSelected, onBackgroundSelected]); const dispatchActionPromise = useDispatchActionPromise(); const callUpdateSubscription = useServerCall(updateSubscription); const onClickSave = React.useCallback(() => { dispatchActionPromise( updateSubscriptionActionTypes, callUpdateSubscription({ threadID: threadID, updatedFields: { home: notificationSettings !== 'background', pushNotifs: notificationSettings === 'focused', }, }), ); onClose(); }, [ callUpdateSubscription, dispatchActionPromise, notificationSettings, onClose, threadID, ]); return (
{focusedItem} {focusedBadgeOnlyItem} {backgroundItem}
); } export default NotificationsModal;