From f056cb646e22d350bda79be8e8bfe808307e6516 Mon Sep 17 00:00:00 2001 From: Hailey Date: Thu, 1 Aug 2024 10:32:36 -0700 Subject: [PATCH] Fix missing header on Likes/Reposted By, add missing perf optimizations (#4867) * fix liked by list * fix lists * tweaks to style * change string --- src/view/com/post-thread/PostLikedBy.tsx | 105 ++++++++++--------- src/view/com/post-thread/PostRepostedBy.tsx | 106 ++++++++++---------- src/view/screens/PostLikedBy.tsx | 15 +-- src/view/screens/PostRepostedBy.tsx | 17 ++-- src/view/screens/ProfileFeedLikedBy.tsx | 17 ++-- 5 files changed, 131 insertions(+), 129 deletions(-) diff --git a/src/view/com/post-thread/PostLikedBy.tsx b/src/view/com/post-thread/PostLikedBy.tsx index 0760ed7f..da230aad 100644 --- a/src/view/com/post-thread/PostLikedBy.tsx +++ b/src/view/com/post-thread/PostLikedBy.tsx @@ -1,38 +1,57 @@ import React, {useCallback, useMemo, useState} from 'react' -import {ActivityIndicator, StyleSheet, View} from 'react-native' import {AppBskyFeedGetLikes as GetLikes} from '@atproto/api' -import {CenteredView} from '../util/Views' -import {List} from '../util/List' -import {ErrorMessage} from '../util/error/ErrorMessage' -import {ProfileCardWithFollowBtn} from '../profile/ProfileCard' -import {logger} from '#/logger' -import {LoadingScreen} from '../util/LoadingScreen' -import {useResolveUriQuery} from '#/state/queries/resolve-uri' -import {useLikedByQuery} from '#/state/queries/post-liked-by' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' + import {cleanError} from '#/lib/strings/errors' +import {logger} from '#/logger' +import {useLikedByQuery} from '#/state/queries/post-liked-by' +import {useResolveUriQuery} from '#/state/queries/resolve-uri' +import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender' +import { + ListFooter, + ListHeaderDesktop, + ListMaybePlaceholder, +} from '#/components/Lists' +import {ProfileCardWithFollowBtn} from '../profile/ProfileCard' +import {List} from '../util/List' + +function renderItem({item}: {item: GetLikes.Like}) { + return +} + +function keyExtractor(item: GetLikes.Like) { + return item.actor.did +} export function PostLikedBy({uri}: {uri: string}) { + const {_} = useLingui() + const initialNumToRender = useInitialNumToRender() + const [isPTRing, setIsPTRing] = useState(false) + const { data: resolvedUri, error: resolveError, - isFetching: isFetchingResolvedUri, + isLoading: isLoadingUri, } = useResolveUriQuery(uri) const { data, - isFetching, - isFetched, + isLoading: isLoadingLikes, isFetchingNextPage, hasNextPage, fetchNextPage, - isError, error, refetch, } = useLikedByQuery(resolvedUri?.uri) + + const isError = Boolean(resolveError || error) + const likes = useMemo(() => { if (data?.pages) { return data.pages.flatMap(page => page.likes) } + return [] }, [data]) const onRefresh = useCallback(async () => { @@ -46,64 +65,44 @@ export function PostLikedBy({uri}: {uri: string}) { }, [refetch, setIsPTRing]) const onEndReached = useCallback(async () => { - if (isFetching || !hasNextPage || isError) return + if (isFetchingNextPage || !hasNextPage || isError) return try { await fetchNextPage() } catch (err) { logger.error('Failed to load more likes', {message: err}) } - }, [isFetching, hasNextPage, isError, fetchNextPage]) + }, [isFetchingNextPage, hasNextPage, isError, fetchNextPage]) - const renderItem = useCallback(({item}: {item: GetLikes.Like}) => { + if (likes.length < 1) { return ( - - ) - }, []) - - if (isFetchingResolvedUri || !isFetched) { - return - } - - // error - // = - if (resolveError || isError) { - return ( - - - + ) } - // loaded - // = return ( item.actor.did} + renderItem={renderItem} + keyExtractor={keyExtractor} refreshing={isPTRing} onRefresh={onRefresh} onEndReached={onEndReached} - renderItem={renderItem} - initialNumToRender={15} - // FIXME(dan) - // eslint-disable-next-line react/no-unstable-nested-components - ListFooterComponent={() => ( - - {(isFetching || isFetchingNextPage) && } - - )} + onEndReachedThreshold={4} + ListHeaderComponent={} + ListFooterComponent={ + + } // @ts-ignore our .web version only -prf desktopFixedHeight + initialNumToRender={initialNumToRender} + windowSize={11} /> ) } - -const styles = StyleSheet.create({ - footer: { - height: 200, - paddingTop: 20, - }, -}) diff --git a/src/view/com/post-thread/PostRepostedBy.tsx b/src/view/com/post-thread/PostRepostedBy.tsx index 31a0be83..9038549a 100644 --- a/src/view/com/post-thread/PostRepostedBy.tsx +++ b/src/view/com/post-thread/PostRepostedBy.tsx @@ -1,38 +1,57 @@ -import React, {useMemo, useCallback, useState} from 'react' -import {ActivityIndicator, StyleSheet, View} from 'react-native' +import React, {useCallback, useMemo, useState} from 'react' import {AppBskyActorDefs as ActorDefs} from '@atproto/api' -import {CenteredView} from '../util/Views' -import {List} from '../util/List' -import {ProfileCardWithFollowBtn} from '../profile/ProfileCard' -import {ErrorMessage} from '../util/error/ErrorMessage' -import {logger} from '#/logger' -import {LoadingScreen} from '../util/LoadingScreen' -import {useResolveUriQuery} from '#/state/queries/resolve-uri' -import {usePostRepostedByQuery} from '#/state/queries/post-reposted-by' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' + import {cleanError} from '#/lib/strings/errors' +import {logger} from '#/logger' +import {usePostRepostedByQuery} from '#/state/queries/post-reposted-by' +import {useResolveUriQuery} from '#/state/queries/resolve-uri' +import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender' +import { + ListFooter, + ListHeaderDesktop, + ListMaybePlaceholder, +} from '#/components/Lists' +import {ProfileCardWithFollowBtn} from '../profile/ProfileCard' +import {List} from '../util/List' + +function renderItem({item}: {item: ActorDefs.ProfileViewBasic}) { + return +} + +function keyExtractor(item: ActorDefs.ProfileViewBasic) { + return item.did +} export function PostRepostedBy({uri}: {uri: string}) { + const {_} = useLingui() + const initialNumToRender = useInitialNumToRender() + const [isPTRing, setIsPTRing] = useState(false) + const { data: resolvedUri, error: resolveError, - isFetching: isFetchingResolvedUri, + isLoading: isLoadingUri, } = useResolveUriQuery(uri) const { data, - isFetching, - isFetched, + isLoading: isLoadingRepostedBy, isFetchingNextPage, hasNextPage, fetchNextPage, - isError, error, refetch, } = usePostRepostedByQuery(resolvedUri?.uri) + + const isError = Boolean(resolveError || error) + const repostedBy = useMemo(() => { if (data?.pages) { return data.pages.flatMap(page => page.repostedBy) } + return [] }, [data]) const onRefresh = useCallback(async () => { @@ -46,35 +65,20 @@ export function PostRepostedBy({uri}: {uri: string}) { }, [refetch, setIsPTRing]) const onEndReached = useCallback(async () => { - if (isFetching || !hasNextPage || isError) return + if (isFetchingNextPage || !hasNextPage || isError) return try { await fetchNextPage() } catch (err) { logger.error('Failed to load more reposts', {message: err}) } - }, [isFetching, hasNextPage, isError, fetchNextPage]) + }, [isFetchingNextPage, hasNextPage, isError, fetchNextPage]) - const renderItem = useCallback( - ({item}: {item: ActorDefs.ProfileViewBasic}) => { - return - }, - [], - ) - - if (isFetchingResolvedUri || !isFetched) { - return - } - - // error - // = - if (resolveError || isError) { + if (repostedBy.length < 1) { return ( - - - + ) } @@ -83,28 +87,24 @@ export function PostRepostedBy({uri}: {uri: string}) { return ( item.did} + renderItem={renderItem} + keyExtractor={keyExtractor} refreshing={isPTRing} onRefresh={onRefresh} onEndReached={onEndReached} - renderItem={renderItem} - initialNumToRender={15} - // FIXME(dan) - // eslint-disable-next-line react/no-unstable-nested-components - ListFooterComponent={() => ( - - {(isFetching || isFetchingNextPage) && } - - )} + onEndReachedThreshold={4} + ListHeaderComponent={} + ListFooterComponent={ + + } // @ts-ignore our .web version only -prf desktopFixedHeight + initialNumToRender={initialNumToRender} + windowSize={11} /> ) } - -const styles = StyleSheet.create({ - footer: { - height: 200, - paddingTop: 20, - }, -}) diff --git a/src/view/screens/PostLikedBy.tsx b/src/view/screens/PostLikedBy.tsx index 60430154..5ff5a193 100644 --- a/src/view/screens/PostLikedBy.tsx +++ b/src/view/screens/PostLikedBy.tsx @@ -1,13 +1,14 @@ import React from 'react' import {View} from 'react-native' -import {useFocusEffect} from '@react-navigation/native' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {ViewHeader} from '../com/util/ViewHeader' -import {PostLikedBy as PostLikedByComponent} from '../com/post-thread/PostLikedBy' -import {makeRecordUri} from 'lib/strings/url-helpers' -import {useSetMinimalShellMode} from '#/state/shell' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {useFocusEffect} from '@react-navigation/native' + +import {useSetMinimalShellMode} from '#/state/shell' +import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' +import {makeRecordUri} from 'lib/strings/url-helpers' +import {PostLikedBy as PostLikedByComponent} from '../com/post-thread/PostLikedBy' +import {ViewHeader} from '../com/util/ViewHeader' type Props = NativeStackScreenProps export const PostLikedByScreen = ({route}: Props) => { @@ -23,7 +24,7 @@ export const PostLikedByScreen = ({route}: Props) => { ) return ( - + diff --git a/src/view/screens/PostRepostedBy.tsx b/src/view/screens/PostRepostedBy.tsx index 07017d69..eaacc678 100644 --- a/src/view/screens/PostRepostedBy.tsx +++ b/src/view/screens/PostRepostedBy.tsx @@ -1,13 +1,14 @@ import React from 'react' import {View} from 'react-native' -import {useFocusEffect} from '@react-navigation/native' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {ViewHeader} from '../com/util/ViewHeader' -import {PostRepostedBy as PostRepostedByComponent} from '../com/post-thread/PostRepostedBy' -import {makeRecordUri} from 'lib/strings/url-helpers' -import {useSetMinimalShellMode} from '#/state/shell' -import {useLingui} from '@lingui/react' import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useFocusEffect} from '@react-navigation/native' + +import {useSetMinimalShellMode} from '#/state/shell' +import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' +import {makeRecordUri} from 'lib/strings/url-helpers' +import {PostRepostedBy as PostRepostedByComponent} from '../com/post-thread/PostRepostedBy' +import {ViewHeader} from '../com/util/ViewHeader' type Props = NativeStackScreenProps export const PostRepostedByScreen = ({route}: Props) => { @@ -23,7 +24,7 @@ export const PostRepostedByScreen = ({route}: Props) => { ) return ( - + diff --git a/src/view/screens/ProfileFeedLikedBy.tsx b/src/view/screens/ProfileFeedLikedBy.tsx index b1bcf48b..bb9ec2ba 100644 --- a/src/view/screens/ProfileFeedLikedBy.tsx +++ b/src/view/screens/ProfileFeedLikedBy.tsx @@ -1,13 +1,14 @@ import React from 'react' import {View} from 'react-native' -import {useFocusEffect} from '@react-navigation/native' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {ViewHeader} from '../com/util/ViewHeader' -import {PostLikedBy as PostLikedByComponent} from '../com/post-thread/PostLikedBy' -import {makeRecordUri} from 'lib/strings/url-helpers' -import {useSetMinimalShellMode} from '#/state/shell' -import {useLingui} from '@lingui/react' import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useFocusEffect} from '@react-navigation/native' + +import {useSetMinimalShellMode} from '#/state/shell' +import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' +import {makeRecordUri} from 'lib/strings/url-helpers' +import {PostLikedBy as PostLikedByComponent} from '../com/post-thread/PostLikedBy' +import {ViewHeader} from '../com/util/ViewHeader' type Props = NativeStackScreenProps export const ProfileFeedLikedByScreen = ({route}: Props) => { @@ -23,7 +24,7 @@ export const ProfileFeedLikedByScreen = ({route}: Props) => { ) return ( - +