diff --git a/src/screens/Tabs/Me/Root/Collections.tsx b/src/screens/Tabs/Me/Root/Collections.tsx index a4e55e0a..2a8b4891 100644 --- a/src/screens/Tabs/Me/Root/Collections.tsx +++ b/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() + 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 ( @@ -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 ? ( { onPress={() => navigation.navigate('Tab-Me-Lists')} /> ) : null} - {announcementsQuery.data?.length ? ( + {mePage.announcements.shown ? ( !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') } diff --git a/src/store.ts b/src/store.ts index ef5eeee5..9110b49a 100644 --- a/src/store.ts +++ b/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 = { diff --git a/src/utils/migrations/contexts/migration.ts b/src/utils/migrations/contexts/migration.ts new file mode 100644 index 00000000..6ef38c56 --- /dev/null +++ b/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 diff --git a/src/utils/migrations/contexts/v0.ts b/src/utils/migrations/contexts/v0.ts new file mode 100644 index 00000000..cf4e79be --- /dev/null +++ b/src/utils/migrations/contexts/v0.ts @@ -0,0 +1,13 @@ +export type ContextsV0 = { + storeReview: { + context: Readonly + current: number + shown: boolean + } + publicRemoteNotice: { + context: Readonly + current: number + hidden: boolean + } + previousTab: 'Tab-Local' | 'Tab-Public' | 'Tab-Notifications' | 'Tab-Me' +} diff --git a/src/utils/slices/contextsSlice.ts b/src/utils/slices/contextsSlice.ts index 68287fec..79975961 100644 --- a/src/utils/slices/contextsSlice.ts +++ b/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 ) => { state.previousTab = action.payload + }, + updateContextMePage: ( + state, + action: PayloadAction> + ) => { + 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