From 826b841e105269952c00456240dd2978c7bc9d97 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Tue, 5 Dec 2023 18:01:08 -0800 Subject: [PATCH] Fix: correctly identify if the screen is focused when handling soft resets on post feeds (#2100) --- src/lib/routes/helpers.ts | 10 ++++++++++ src/state/queries/post-feed.ts | 2 +- src/view/com/feeds/FeedPage.tsx | 18 +++++++++++------- src/view/screens/Home.tsx | 9 ++++----- 4 files changed, 26 insertions(+), 13 deletions(-) diff --git a/src/lib/routes/helpers.ts b/src/lib/routes/helpers.ts index cdac9039..7097f09b 100644 --- a/src/lib/routes/helpers.ts +++ b/src/lib/routes/helpers.ts @@ -1,5 +1,15 @@ +import {NavigationProp} from '@react-navigation/native' import {State, RouteParams} from './types' +export function getRootNavigation( + nav: NavigationProp, +): NavigationProp { + while (nav.getParent()) { + nav = nav.getParent() + } + return nav +} + export function getCurrentRoute(state: State) { let node = state.routes[state.index || 0] while (node.state?.routes && typeof node.state?.index === 'number') { diff --git a/src/state/queries/post-feed.ts b/src/state/queries/post-feed.ts index 36e06cfa..7cdda577 100644 --- a/src/state/queries/post-feed.ts +++ b/src/state/queries/post-feed.ts @@ -98,7 +98,7 @@ export function usePostFeedQuery( staleTime: STALE.INFINITY, queryKey: RQKEY(feedDesc, params), async queryFn({pageParam}: {pageParam: RQPageParam}) { - logger.debug('usePostFeedQuery', {feedDesc, pageParam}) + logger.debug('usePostFeedQuery', {feedDesc, cursor: pageParam?.cursor}) const {api, cursor} = pageParam ? pageParam diff --git a/src/view/com/feeds/FeedPage.tsx b/src/view/com/feeds/FeedPage.tsx index f3f07a8b..3a7781ea 100644 --- a/src/view/com/feeds/FeedPage.tsx +++ b/src/view/com/feeds/FeedPage.tsx @@ -1,8 +1,9 @@ +import React from 'react' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {useIsFocused} from '@react-navigation/native' +import {useNavigation} from '@react-navigation/native' import {useAnalytics} from '@segment/analytics-react-native' import {useQueryClient} from '@tanstack/react-query' import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed' @@ -12,7 +13,6 @@ import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {FeedDescriptor, FeedParams} from '#/state/queries/post-feed' import {ComposeIcon2} from 'lib/icons' import {colors, s} from 'lib/styles' -import React from 'react' import {FlatList, View, useWindowDimensions} from 'react-native' import {Feed} from '../posts/Feed' import {TextLink} from '../util/Link' @@ -24,6 +24,7 @@ import {useSession} from '#/state/session' import {useComposerControls} from '#/state/shell/composer' import {listenSoftReset, emitSoftReset} from '#/state/events' import {truncateAndInvalidate} from '#/state/queries/util' +import {TabState, getTabState, getRootNavigation} from '#/lib/routes/helpers' const POLL_FREQ = 30e3 // 30sec @@ -45,6 +46,7 @@ export function FeedPage({ const {isSandbox, hasSession} = useSession() const pal = usePalette('default') const {_} = useLingui() + const navigation = useNavigation() const {isDesktop} = useWebMediaQueries() const queryClient = useQueryClient() const {openComposer} = useComposerControls() @@ -52,7 +54,6 @@ export function FeedPage({ const {screen, track} = useAnalytics() const headerOffset = useHeaderOffset() const scrollElRef = React.useRef(null) - const isScreenFocused = useIsFocused() const [hasNew, setHasNew] = React.useState(false) const scrollToTop = React.useCallback(() => { @@ -61,21 +62,24 @@ export function FeedPage({ }, [headerOffset, resetMainScroll]) const onSoftReset = React.useCallback(() => { - if (isPageFocused) { + const isScreenFocused = + getTabState(getRootNavigation(navigation).getState(), 'Home') === + TabState.InsideAtRoot + if (isScreenFocused && isPageFocused) { scrollToTop() truncateAndInvalidate(queryClient, FEED_RQKEY(feed)) setHasNew(false) } - }, [isPageFocused, scrollToTop, queryClient, feed, setHasNew]) + }, [navigation, isPageFocused, scrollToTop, queryClient, feed, setHasNew]) // fires when page within screen is activated/deactivated React.useEffect(() => { - if (!isPageFocused || !isScreenFocused) { + if (!isPageFocused) { return } screen('Feed') return listenSoftReset(onSoftReset) - }, [onSoftReset, screen, isPageFocused, isScreenFocused]) + }, [onSoftReset, screen, isPageFocused]) const onPressCompose = React.useCallback(() => { track('HomeScreen:PressCompose') diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index d07fa043..8a0bbf10 100644 --- a/src/view/screens/Home.tsx +++ b/src/view/screens/Home.tsx @@ -1,6 +1,6 @@ import React from 'react' import {View, ActivityIndicator, StyleSheet} from 'react-native' -import {useFocusEffect, useIsFocused} from '@react-navigation/native' +import {useFocusEffect} from '@react-navigation/native' import {NativeStackScreenProps, HomeTabNavigatorParams} from 'lib/routes/types' import {FeedDescriptor, FeedParams} from '#/state/queries/post-feed' import {FollowingEmptyState} from 'view/com/posts/FollowingEmptyState' @@ -65,7 +65,6 @@ function HomeScreenReady({ const {hasSession} = useSession() const setMinimalShellMode = useSetMinimalShellMode() const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled() - const isPageFocused = useIsFocused() const [selectedPage, setSelectedPage] = React.useState(initialPage) /** @@ -175,7 +174,7 @@ function HomeScreenReady({ @@ -202,7 +201,7 @@ function HomeScreenReady({ tabBarPosition="top">