Improve notification load behaviors (#1943)

* Dont use the stale cache for notifs-feed

* Add a delay to marking all read to avoid marking upcoming posts as read

* Trigger automatic notifications refresh when navigating to the tab, in certain conditions
This commit is contained in:
Paul Frazee 2023-11-16 18:27:05 -08:00 committed by GitHub
parent 357c752a21
commit e358c3cc30
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 34 additions and 6 deletions

View file

@ -1,6 +1,7 @@
import React, {ComponentProps} from 'react'
import {GestureResponderEvent, TouchableOpacity, View} from 'react-native'
import Animated from 'react-native-reanimated'
import {useQueryClient} from '@tanstack/react-query'
import {StackActions} from '@react-navigation/native'
import {BottomTabBarProps} from '@react-navigation/bottom-tabs'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
@ -30,6 +31,7 @@ import {useUnreadNotifications} from '#/state/queries/notifications/unread'
import {emitSoftReset} from '#/state/events'
import {useSession} from '#/state/session'
import {useProfileQuery} from '#/state/queries/profile'
import {RQKEY as NOTIFS_RQKEY} from '#/state/queries/notifications/feed'
type TabOptions = 'Home' | 'Search' | 'Notifications' | 'MyProfile' | 'Feeds'
@ -38,6 +40,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
const {currentAccount} = useSession()
const pal = usePalette('default')
const {_} = useLingui()
const queryClient = useQueryClient()
const safeAreaInsets = useSafeAreaInsets()
const {track} = useAnalytics()
const {footerHeight} = useShellLayout()
@ -57,10 +60,16 @@ export function BottomBar({navigation}: BottomTabBarProps) {
} else if (tabState === TabState.Inside) {
navigation.dispatch(StackActions.popToTop())
} else {
if (tab === 'Notifications') {
// fetch new notifs on view
queryClient.invalidateQueries({
queryKey: NOTIFS_RQKEY(),
})
}
navigation.navigate(`${tab}Tab`)
}
},
[track, navigation],
[track, navigation, queryClient],
)
const onPressHome = React.useCallback(() => onPressTab('Home'), [onPressTab])
const onPressSearch = React.useCallback(