diff --git a/web/modals/threads/notifications/notifications-modal.react.js b/web/modals/threads/notifications/notifications-modal.react.js --- a/web/modals/threads/notifications/notifications-modal.react.js +++ b/web/modals/threads/notifications/notifications-modal.react.js @@ -57,6 +57,19 @@ 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 description = [ @@ -77,10 +90,10 @@ title="Focused (enabled)" description={description} icon={icon} - onSelect={() => setNotificationSettings('focused')} + onSelect={onFocusedSelected} /> ); - }, [isFocusedSelected]); + }, [isFocusedSelected, onFocusedSelected]); const isFocusedBadgeOnlySelected = notificationSettings === 'badge-only'; const focusedBadgeOnlyItem = React.useMemo(() => { @@ -102,10 +115,10 @@ title="Focused (badge only)" description={description} icon={icon} - onSelect={() => setNotificationSettings('badge-only')} + onSelect={onBadgeOnlySelected} /> ); - }, [isFocusedBadgeOnlySelected]); + }, [isFocusedBadgeOnlySelected, onBadgeOnlySelected]); const isBackgroundSelected = notificationSettings === 'background'; const backgroundItem = React.useMemo(() => { @@ -127,10 +140,10 @@ title="Background" description={description} icon={icon} - onSelect={() => setNotificationSettings('background')} + onSelect={onBackgroundSelected} /> ); - }, [isBackgroundSelected]); + }, [isBackgroundSelected, onBackgroundSelected]); const dispatchActionPromise = useDispatchActionPromise();