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 @@ -46,6 +46,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 notificationIconStyle = React.useMemo(() => ({ width: 'auto' }), []); const isFocusedSelected = notificationSettings === 'focused'; @@ -68,10 +81,10 @@ title="Focused (enabled)" description={description} icon={icon} - onSelect={() => setNotificationSettings('focused')} + onSelect={onFocusedSelected} /> ); - }, [isFocusedSelected, notificationIconStyle]); + }, [isFocusedSelected, notificationIconStyle, onFocusedSelected]); const isFocusedBadgeOnlySelected = notificationSettings === 'badge-only'; const focusedBadgeOnlyItem = React.useMemo(() => { @@ -93,10 +106,10 @@ title="Focused (badge only)" description={description} icon={icon} - onSelect={() => setNotificationSettings('badge-only')} + onSelect={onBadgeOnlySelected} /> ); - }, [isFocusedBadgeOnlySelected, notificationIconStyle]); + }, [isFocusedBadgeOnlySelected, notificationIconStyle, onBadgeOnlySelected]); const isBackgroundSelected = notificationSettings === 'background'; const backgroundItem = React.useMemo(() => { @@ -118,10 +131,10 @@ title="Background" description={description} icon={icon} - onSelect={() => setNotificationSettings('background')} + onSelect={onBackgroundSelected} /> ); - }, [isBackgroundSelected, notificationIconStyle]); + }, [isBackgroundSelected, notificationIconStyle, onBackgroundSelected]); const dispatchActionPromise = useDispatchActionPromise();