Fixes to feed load triggers (#2323)

* Add soft-reset support to ProfileFeed and ProfileList

* Fix: correctly unsubscribe the notifications soft-reset listener
This commit is contained in:
Paul Frazee 2023-12-27 08:53:24 -08:00 committed by GitHub
parent 8b6ecf6bff
commit e1ba649560
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 2 deletions

View file

@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import {View} from 'react-native' import {View} from 'react-native'
import {useFocusEffect} from '@react-navigation/native' import {useFocusEffect, useIsFocused} from '@react-navigation/native'
import {useQueryClient} from '@tanstack/react-query' import {useQueryClient} from '@tanstack/react-query'
import { import {
NativeStackScreenProps, NativeStackScreenProps,
@ -46,6 +46,7 @@ export function NotificationsScreen({}: Props) {
const unreadNotifs = useUnreadNotifications() const unreadNotifs = useUnreadNotifications()
const unreadApi = useUnreadNotificationsApi() const unreadApi = useUnreadNotificationsApi()
const hasNew = !!unreadNotifs const hasNew = !!unreadNotifs
const isScreenFocused = useIsFocused()
// event handlers // event handlers
// = // =
@ -83,8 +84,11 @@ export function NotificationsScreen({}: Props) {
}, [screen, setMinimalShellMode]), }, [screen, setMinimalShellMode]),
) )
React.useEffect(() => { React.useEffect(() => {
if (!isScreenFocused) {
return
}
return listenSoftReset(onPressLoadLatest) return listenSoftReset(onPressLoadLatest)
}, [onPressLoadLatest]) }, [onPressLoadLatest, isScreenFocused])
const ListHeaderComponent = React.useCallback(() => { const ListHeaderComponent = React.useCallback(() => {
if (isDesktop) { if (isDesktop) {

View file

@ -57,6 +57,7 @@ import {useLikeMutation, useUnlikeMutation} from '#/state/queries/like'
import {useComposerControls} from '#/state/shell/composer' import {useComposerControls} from '#/state/shell/composer'
import {truncateAndInvalidate} from '#/state/queries/util' import {truncateAndInvalidate} from '#/state/queries/util'
import {isNative} from '#/platform/detection' import {isNative} from '#/platform/detection'
import {listenSoftReset} from '#/state/events'
const SECTION_TITLES = ['Posts', 'About'] const SECTION_TITLES = ['Posts', 'About']
@ -446,6 +447,7 @@ const FeedSection = React.forwardRef<SectionRef, FeedSectionProps>(
const [hasNew, setHasNew] = React.useState(false) const [hasNew, setHasNew] = React.useState(false)
const [isScrolledDown, setIsScrolledDown] = React.useState(false) const [isScrolledDown, setIsScrolledDown] = React.useState(false)
const queryClient = useQueryClient() const queryClient = useQueryClient()
const isScreenFocused = useIsFocused()
const onScrollToTop = useCallback(() => { const onScrollToTop = useCallback(() => {
scrollElRef.current?.scrollToOffset({ scrollElRef.current?.scrollToOffset({
@ -460,6 +462,13 @@ const FeedSection = React.forwardRef<SectionRef, FeedSectionProps>(
scrollToTop: onScrollToTop, scrollToTop: onScrollToTop,
})) }))
React.useEffect(() => {
if (!isScreenFocused) {
return
}
return listenSoftReset(onScrollToTop)
}, [onScrollToTop, isScreenFocused])
const renderPostsEmpty = useCallback(() => { const renderPostsEmpty = useCallback(() => {
return <EmptyState icon="feed" message="This feed is empty!" /> return <EmptyState icon="feed" message="This feed is empty!" />
}, []) }, [])

View file

@ -57,6 +57,7 @@ import {
} from '#/state/queries/preferences' } from '#/state/queries/preferences'
import {logger} from '#/logger' import {logger} from '#/logger'
import {useAnalytics} from '#/lib/analytics/analytics' import {useAnalytics} from '#/lib/analytics/analytics'
import {listenSoftReset} from '#/state/events'
const SECTION_TITLES_CURATE = ['Posts', 'About'] const SECTION_TITLES_CURATE = ['Posts', 'About']
const SECTION_TITLES_MOD = ['About'] const SECTION_TITLES_MOD = ['About']
@ -601,6 +602,7 @@ const FeedSection = React.forwardRef<SectionRef, FeedSectionProps>(
const queryClient = useQueryClient() const queryClient = useQueryClient()
const [hasNew, setHasNew] = React.useState(false) const [hasNew, setHasNew] = React.useState(false)
const [isScrolledDown, setIsScrolledDown] = React.useState(false) const [isScrolledDown, setIsScrolledDown] = React.useState(false)
const isScreenFocused = useIsFocused()
const onScrollToTop = useCallback(() => { const onScrollToTop = useCallback(() => {
scrollElRef.current?.scrollToOffset({ scrollElRef.current?.scrollToOffset({
@ -614,6 +616,13 @@ const FeedSection = React.forwardRef<SectionRef, FeedSectionProps>(
scrollToTop: onScrollToTop, scrollToTop: onScrollToTop,
})) }))
React.useEffect(() => {
if (!isScreenFocused) {
return
}
return listenSoftReset(onScrollToTop)
}, [onScrollToTop, isScreenFocused])
const renderPostsEmpty = useCallback(() => { const renderPostsEmpty = useCallback(() => {
return <EmptyState icon="feed" message="This feed is empty!" /> return <EmptyState icon="feed" message="This feed is empty!" />
}, []) }, [])