diff --git a/src/components/StarterPack/ProfileStarterPacks.tsx b/src/components/StarterPack/ProfileStarterPacks.tsx index 342fa4a593..44fc64c1d6 100644 --- a/src/components/StarterPack/ProfileStarterPacks.tsx +++ b/src/components/StarterPack/ProfileStarterPacks.tsx @@ -6,20 +6,17 @@ import { View, ViewStyle, } from 'react-native' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import {AppBskyGraphGetActorStarterPacks} from '@atproto/api' +import {Trans} from '@lingui/macro' +import {InfiniteData, UseInfiniteQueryResult} from '@tanstack/react-query' -import {cleanError} from '#/lib/strings/errors' import {useTheme} from '#/lib/ThemeContext' import {logger} from '#/logger' import {isNative, isWeb} from '#/platform/detection' import {usePalette} from 'lib/hooks/usePalette' -import {useActorStarterPacksQuery} from 'state/queries/actor-starter-packs' import {usePreferencesQuery} from 'state/queries/preferences' import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' -import {ErrorMessage} from 'view/com/util/error/ErrorMessage' import {List, ListRef} from 'view/com/util/List' -import {LoadMoreRetryBtn} from 'view/com/util/LoadMoreRetryBtn' import {Text} from 'view/com/util/text/Text' import {StarterPackCard} from '#/components/StarterPack/StarterPackCard' @@ -33,7 +30,10 @@ interface SectionRef { } interface ProfileFeedgensProps { - did: string + starterPacksQuery: UseInfiniteQueryResult< + InfiniteData, + Error + > scrollElRef: ListRef headerOffset: number enabled?: boolean @@ -46,47 +46,40 @@ export const ProfileStarterPacks = React.forwardRef< SectionRef, ProfileFeedgensProps >(function ProfileFeedgensImpl( - {did, scrollElRef, headerOffset, enabled, style, testID, setScrollViewTag}, + { + starterPacksQuery: query, + scrollElRef, + headerOffset, + enabled, + style, + testID, + setScrollViewTag, + }, ref, ) { const pal = usePalette('default') - const {_} = useLingui() const theme = useTheme() const [isPTRing, setIsPTRing] = React.useState(false) - - const { - data, - isFetching, - isError, - isFetched, - fetchNextPage, - refetch, - hasNextPage, - error, - } = useActorStarterPacksQuery({ - did, - }) + const {data: pages, refetch, isFetching, hasNextPage, fetchNextPage} = query const {data: preferences} = usePreferencesQuery() - const isEmpty = !isFetching && data?.pages.length === 0 + const isEmpty = pages?.pages.length === 0 const items = React.useMemo(() => { let items: any[] = [] - if (isError && isEmpty) { + if (isEmpty) { items = items.concat([ERROR_ITEM]) } - if (!isFetched && isFetching) { - items = items.concat([LOADING]) - } else if (isEmpty) { + if (isEmpty) { items = items.concat([EMPTY]) - } else if (data?.pages) { - items = data?.pages.flatMap(page => page.starterPacks) + } else if (pages?.pages) { + items = pages?.pages.flatMap(page => page.starterPacks) } - if (isError && !isEmpty) { + if (!isEmpty) { items = items.concat([LOAD_MORE_ERROR_ITEM]) } return items - }, [isError, isEmpty, isFetched, isFetching, data]) + }, [isEmpty, pages]) React.useImperativeHandle(ref, () => ({ scrollToTop: () => {}, @@ -103,18 +96,14 @@ export const ProfileStarterPacks = React.forwardRef< }, [refetch, setIsPTRing]) const onEndReached = React.useCallback(async () => { - if (isFetching || !hasNextPage || isError) return + if (isFetching || !hasNextPage) return try { await fetchNextPage() } catch (err) { logger.error('Failed to load more starter packs', {message: err}) } - }, [isFetching, hasNextPage, isError, fetchNextPage]) - - const onPressRetryLoadMore = React.useCallback(() => { - fetchNextPage() - }, [fetchNextPage]) + }, [isFetching, hasNextPage, fetchNextPage]) const renderItem = React.useCallback( ({item, index}: ListRenderItemInfo) => { @@ -128,19 +117,6 @@ export const ProfileStarterPacks = React.forwardRef< ) - } else if (item === ERROR_ITEM) { - return ( - - ) - } else if (item === LOAD_MORE_ERROR_ITEM) { - return ( - - ) } else if (item === LOADING) { return } @@ -155,7 +131,7 @@ export const ProfileStarterPacks = React.forwardRef< } return null }, - [error, refetch, onPressRetryLoadMore, pal, preferences, _], + [pal, preferences], ) React.useEffect(() => { diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx index 7fcd1c89be..6c9cca7e34 100644 --- a/src/view/screens/Profile.tsx +++ b/src/view/screens/Profile.tsx @@ -2,6 +2,7 @@ import React, {useCallback, useMemo} from 'react' import {StyleSheet} from 'react-native' import { AppBskyActorDefs, + AppBskyGraphGetActorStarterPacks, moderateProfile, ModerationOpts, RichText as RichTextAPI, @@ -9,7 +10,11 @@ import { import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useFocusEffect} from '@react-navigation/native' -import {useQueryClient} from '@tanstack/react-query' +import { + InfiniteData, + UseInfiniteQueryResult, + useQueryClient, +} from '@tanstack/react-query' import {cleanError} from '#/lib/strings/errors' import {useProfileShadow} from '#/state/cache/profile-shadow' @@ -29,6 +34,7 @@ import {combinedDisplayName} from 'lib/strings/display-names' import {isInvalidHandle} from 'lib/strings/handles' import {colors, s} from 'lib/styles' import {listenSoftReset} from 'state/events' +import {useActorStarterPacksQuery} from 'state/queries/actor-starter-packs' import {PagerWithHeader} from 'view/com/pager/PagerWithHeader' import {ProfileHeader, ProfileHeaderLoading} from '#/screens/Profile/Header' import {ProfileFeedSection} from '#/screens/Profile/Sections/Feed' @@ -70,6 +76,7 @@ export function ProfileScreen({route}: Props) { } = useProfileQuery({ did: resolvedDid, }) + const starterPacksQuery = useActorStarterPacksQuery({did: resolvedDid}) const onPressTryAgain = React.useCallback(() => { if (resolveError) { @@ -87,7 +94,7 @@ export function ProfileScreen({route}: Props) { }, [queryClient, profile?.viewer?.blockedBy, resolvedDid]) // Most pushes will happen here, since we will have only placeholder data - if (isLoadingDid || isLoadingProfile) { + if (isLoadingDid || isLoadingProfile || starterPacksQuery.isLoading) { return ( @@ -109,6 +116,7 @@ export function ProfileScreen({route}: Props) { return ( , + Error + > }) { const profile = useProfileShadow(profileUnshadowed) const {hasSession, currentAccount} = useSession() @@ -185,10 +198,13 @@ function ProfileScreenLoaded({ const showMediaTab = !hasLabeler const showLikesTab = isMe const showFeedsTab = isMe || (profile.associated?.feedgens || 0) > 0 - const showStarterPacksTab = isMe || true + const showStarterPacksTab = + isMe || !!starterPacksQuery.data?.pages?.[0].starterPacks.length const showListsTab = hasSession && (isMe || (profile.associated?.lists || 0) > 0) + console.log(starterPacksQuery.data?.pages) + const sectionTitles = [ showFiltersTab ? _(msg`Labels`) : undefined, showListsTab && hasLabeler ? _(msg`Lists`) : undefined, @@ -433,7 +449,7 @@ function ProfileScreenLoaded({ ? ({headerHeight, isFocused, scrollElRef}) => (