More visually stable me page

src/screens/Tabs/Me/Root/Collections.tsx

@@ -2,18 +2,35 @@ import { MenuContainer, MenuRow } from '@components/Menu'
 import { useNavigation } from '@react-navigation/native'
 import { useAnnouncementQuery } from '@utils/queryHooks/announcement'
 import { useListsQuery } from '@utils/queryHooks/lists'
-import React from 'react'
+import { getMePage, updateContextMePage } from '@utils/slices/contextsSlice'
+import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useDispatch, useSelector } from 'react-redux'
 
 const Collections: React.FC = () => {
   const { t } = useTranslation('screenTabs')
   const navigation = useNavigation<any>()
 
+  const dispatch = useDispatch()
+  const mePage = useSelector(
+    getMePage,
+    (a, b) => a.announcements.unread === b.announcements.unread
+  )
+
   const listsQuery = useListsQuery({
     options: {
       notifyOnChangeProps: ['data']
     }
   })
+  useEffect(() => {
+    if (listsQuery.isSuccess) {
+      dispatch(
+        updateContextMePage({
+          lists: { shown: listsQuery.data?.length ? true : false }
+        })
+      )
+    }
+  }, [listsQuery.isSuccess, listsQuery.data?.length])
 
   const announcementsQuery = useAnnouncementQuery({
     showAll: true,
@@ -21,6 +38,20 @@ const Collections: React.FC = () => {
       notifyOnChangeProps: ['data']
     }
   })
+  useEffect(() => {
+    if (announcementsQuery.isSuccess) {
+      dispatch(
+        updateContextMePage({
+          announcements: {
+            shown: announcementsQuery.data?.length ? true : false,
+            unread: announcementsQuery.data.filter(
+              announcement => !announcement.read
+            ).length
+          }
+        })
+      )
+    }
+  }, [announcementsQuery.isSuccess, announcementsQuery.data?.length])
 
   return (
     <MenuContainer>
@@ -42,7 +73,7 @@ const Collections: React.FC = () => {
         title={t('me.stacks.favourites.name')}
         onPress={() => navigation.navigate('Tab-Me-Favourites')}
       />
-      {listsQuery.data?.length ? (
+      {mePage.lists.shown ? (
         <MenuRow
           iconFront='List'
           iconBack='ChevronRight'
@@ -50,18 +81,15 @@ const Collections: React.FC = () => {
           onPress={() => navigation.navigate('Tab-Me-Lists')}
         />
       ) : null}
-      {announcementsQuery.data?.length ? (
+      {mePage.announcements.shown ? (
         <MenuRow
           iconFront='Clipboard'
           iconBack='ChevronRight'
           title={t('screenAnnouncements:heading')}
           content={
-            announcementsQuery.data.filter(announcement => !announcement.read)
-              .length
+            mePage.announcements.unread
               ? t('me.root.announcements.content.unread', {
-                  amount: announcementsQuery.data.filter(
-                    announcement => !announcement.read
-                  ).length
+                  amount: mePage.announcements.unread
                 })
               : t('me.root.announcements.content.read')
           }

src/store.ts

@@ -1,6 +1,7 @@
 import createSecureStore from '@neverdull-agency/expo-unlimited-secure-store'
 import AsyncStorage from '@react-native-async-storage/async-storage'
 import { AnyAction, configureStore, Reducer } from '@reduxjs/toolkit'
+import contextsMigration from '@utils/migrations/contexts/migration'
 import instancesMigration from '@utils/migrations/instances/migration'
 import contextsSlice, { ContextsState } from '@utils/slices/contextsSlice'
 import instancesSlice, { InstancesState } from '@utils/slices/instancesSlice'
@@ -15,7 +16,10 @@ const prefix = 'tooot'
 const contextsPersistConfig = {
   key: 'contexts',
   prefix,
-  storage: AsyncStorage
+  storage: AsyncStorage,
+  version: 1,
+  // @ts-ignore
+  migrate: createMigrate(contextsMigration)
 }
 
 const instancesPersistConfig = {

src/utils/migrations/contexts/migration.ts

@@ -0,0 +1,16 @@
+import { ContextsV0 } from './v0'
+
+const contextsMigration = {
+  1: (state: ContextsV0) => {
+    return (state = {
+      ...state,
+      // @ts-ignore
+      mePage: {
+        lists: { shown: false },
+        announcements: { shown: false, unread: 0 }
+      }
+    })
+  }
+}
+
+export default contextsMigration

src/utils/migrations/contexts/v0.ts

@@ -0,0 +1,13 @@
+export type ContextsV0 = {
+  storeReview: {
+    context: Readonly<number>
+    current: number
+    shown: boolean
+  }
+  publicRemoteNotice: {
+    context: Readonly<number>
+    current: number
+    hidden: boolean
+  }
+  previousTab: 'Tab-Local' | 'Tab-Public' | 'Tab-Notifications' | 'Tab-Me'
+}

src/utils/slices/contextsSlice.ts

@@ -17,6 +17,10 @@ export type ContextsState = {
     hidden: boolean
   }
   previousTab: 'Tab-Local' | 'Tab-Public' | 'Tab-Notifications' | 'Tab-Me'
+  mePage: {
+    lists: { shown: boolean }
+    announcements: { shown: boolean; unread: number }
+  }
 }
 
 export const contextsInitialState = {
@@ -32,7 +36,11 @@ export const contextsInitialState = {
     current: 0,
     hidden: false
   },
-  previousTab: 'Tab-Me'
+  previousTab: 'Tab-Me',
+  mePage: {
+    lists: { shown: false },
+    announcements: { shown: false, unread: 0 }
+  }
 }
 
 const contextsSlice = createSlice({
@@ -61,6 +69,12 @@ const contextsSlice = createSlice({
       action: PayloadAction<ContextsState['previousTab']>
     ) => {
       state.previousTab = action.payload
+    },
+    updateContextMePage: (
+      state,
+      action: PayloadAction<Partial<ContextsState['mePage']>>
+    ) => {
+      state.mePage = { ...state.mePage, ...action.payload }
     }
   }
 })
@@ -68,10 +82,13 @@ const contextsSlice = createSlice({
 export const getPublicRemoteNotice = (state: RootState) =>
   state.contexts.publicRemoteNotice
 export const getPreviousTab = (state: RootState) => state.contexts.previousTab
+export const getMePage = (state: RootState) => state.contexts.mePage
+export const getContexts = (state: RootState) => state.contexts
 
 export const {
   updateStoreReview,
   updatePublicRemoteNotice,
-  updatePreviousTab
+  updatePreviousTab,
+  updateContextMePage
 } = contextsSlice.actions
 export default contextsSlice.reducer