fixup! Implement NotificationCenterScene

src/actions/LocalSettingsActions.ts

@@ -22,6 +22,22 @@ export function useAccountSettings() {
   return localAccountSettings
 }
 
+/**
+ * Returns a notification indicator number for the badge:
+ * - undefined: no badge (all notifications completed)
+ * - 0: show dot (has priority notifications)
+ * - number: show count (has non-priority notifications)
+ */
+export function useNotifNumber(): number | undefined {
+  const { notifState } = useAccountSettings()
+  return React.useMemo(() => {
+    const priorityCount = Object.values(notifState).filter(notifInfo => notifInfo.isPriority && !notifInfo.isCompleted).length
+    const incompleteCount = Object.values(notifState).filter(notifInfo => !notifInfo.isCompleted).length
+
+    return priorityCount === 0 && incompleteCount === 0 ? undefined : priorityCount > 0 ? 0 : incompleteCount
+  }, [notifState])
+}
+
 export function toggleAccountBalanceVisibility(): ThunkAction<void> {
   return (dispatch, getState) => {
     const state = getState()

src/components/navigation/SideMenuButton.tsx

@@ -2,6 +2,7 @@ import { DrawerActions, useNavigation } from '@react-navigation/native'
 import * as React from 'react'
 import { Keyboard } from 'react-native'
 
+import { useNotifNumber } from '../../actions/LocalSettingsActions'
 import { Fontello } from '../../assets/vector/index'
 import { useHandler } from '../../hooks/useHandler'
 import { triggerHaptic } from '../../util/haptic'
@@ -12,6 +13,7 @@ import { NavigationButton } from './NavigationButton'
 export const SideMenuButton = () => {
   const navigation = useNavigation()
   const theme = useTheme()
+  const number = useNotifNumber()
 
   const handlePress = useHandler(() => {
     Keyboard.dismiss()
@@ -21,7 +23,7 @@ export const SideMenuButton = () => {
 
   return (
     <NavigationButton paddingRem={[0, 1]} onPress={handlePress}>
-      <IconBadge sizeRem={1}>
+      <IconBadge number={number} sizeRem={1}>
         <Fontello name="hamburgerButton" size={theme.rem(1)} testID="sideMenuButton" color={theme.icon} />
       </IconBadge>
     </NavigationButton>

src/components/scenes/NotificationCenterScene.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { sprintf } from 'sprintf-js'
 
 import { showBackupModal } from '../../actions/BackupModalActions.tsx'
-import { getLocalAccountSettings, useAccountSettings, writeAccountNotifDismissInfo } from '../../actions/LocalSettingsActions.tsx'
+import { useAccountSettings, writeLocalAccountSettings } from '../../actions/LocalSettingsActions'
 import { useHandler } from '../../hooks/useHandler'
 import { useWatch } from '../../hooks/useWatch'
 import { lstrings } from '../../locales/strings'
@@ -29,7 +29,8 @@ export const NotificationCenterScene = (props: Props) => {
   const theme = useTheme()
   const styles = getStyles(theme)
   const dispatch = useDispatch()
-  const { notifState } = useAccountSettings()
+  const accountSettings = useAccountSettings()
+  const { notifState, accountNotifDismissInfo } = useAccountSettings()
 
   const detectedTokensRedux = useSelector(state => state.core.enabledDetectedTokens)
   const account = useSelector(state => state.core.account)
@@ -48,10 +49,7 @@ export const NotificationCenterScene = (props: Props) => {
 
   const handle2FaEnabledPress = useHandler(async () => {
     await openBrowserUri(config.ip2faSite)
-    await writeAccountNotifDismissInfo(account, {
-      ...getLocalAccountSettings(),
-      ip2FaNotifShown: true
-    })
+    await writeLocalAccountSettings(account, { ...accountSettings, accountNotifDismissInfo: { ...accountNotifDismissInfo, ip2FaNotifShown: true } })
   })
 
   const handleBackupPress = useHandler(async () => {
@@ -61,11 +59,11 @@ export const NotificationCenterScene = (props: Props) => {
 
   const pinnedNotifInfoKeys = Object.keys(notifState)
     .filter(key => notifState[key].isPriority && !notifState[key].isCompleted)
-    .sort((a, b) => notifState[b].dateReceived - notifState[a].dateReceived)
+    .sort((a, b) => notifState[b].dateReceived.getMilliseconds() - notifState[a].dateReceived.getMilliseconds())
 
   const recentNotifKeys = Object.keys(notifState)
     .filter(key => !notifState[key].isPriority && !notifState[key].isCompleted)
-    .sort((a, b) => notifState[b].dateReceived - notifState[a].dateReceived)
+    .sort((a, b) => notifState[b].dateReceived.getMilliseconds() - notifState[a].dateReceived.getMilliseconds())
 
   // TODO: Change state handling so animations somehow work, without relying
   // on the cards themselves to animate in/out.

src/components/themed/SideMenu.tsx

@@ -17,6 +17,7 @@ import { sprintf } from 'sprintf-js'
 
 import { showBackupModal } from '../../actions/BackupModalActions'
 import { launchDeepLink } from '../../actions/DeepLinkingActions'
+import { useNotifNumber } from '../../actions/LocalSettingsActions'
 import { getRootNavigation, logoutRequest } from '../../actions/LoginActions'
 import { executePluginAction } from '../../actions/PluginActions'
 import { Fontello } from '../../assets/vector'
@@ -54,6 +55,8 @@ export function SideMenuComponent(props: Props) {
   const { navigation } = props
   const navigationBase = navigation as any as NavigationBase
   const isDrawerOpen = useDrawerStatus() === 'open'
+  const number = useNotifNumber()
+  console.debug(number)
 
   const dispatch = useDispatch()
   const theme = useTheme()
@@ -387,16 +390,13 @@ export function SideMenuComponent(props: Props) {
           {rowDatas.map(rowData => (
             <EdgeTouchableOpacity accessible={false} onPress={rowData.pressHandler} key={rowData.title} style={styles.rowContainer}>
               <View style={styles.leftIconContainer}>
-                {
-                  // TODO: No red dot ever renders for some reason...
-                  rowData.iconName === 'notifications' ? (
-                    <IconBadge offsetX={theme.rem(0.25)} offsetY={theme.rem(0.25)} sizeRem={1.5}>
-                      <Ionicons name="notifications-outline" style={styles.icon} size={theme.rem(1.5)} color={theme.iconTappable} />
-                    </IconBadge>
-                  ) : rowData.iconName != null ? (
-                    <Fontello name={rowData.iconName} style={styles.icon} size={theme.rem(1.5)} color={theme.iconTappable} />
-                  ) : null
-                }
+                {rowData.iconName === 'notifications' ? (
+                  <IconBadge number={number} offsetX={theme.rem(0.25)} offsetY={theme.rem(0.25)} sizeRem={1.5}>
+                    <Ionicons name="notifications-outline" style={styles.icon} size={theme.rem(1.5)} color={theme.iconTappable} />
+                  </IconBadge>
+                ) : rowData.iconName != null ? (
+                  <Fontello name={rowData.iconName} style={styles.icon} size={theme.rem(1.5)} color={theme.iconTappable} />
+                ) : null}
                 {rowData.iconNameFontAwesome != null ? (
                   <FontAwesome5Icon name={rowData.iconNameFontAwesome} style={styles.icon} size={theme.rem(1.25)} color={theme.iconTappable} />
                 ) : null}