From 6294eeea5e9474aaffa5c425bb41ac4d0db3bc1e Mon Sep 17 00:00:00 2001 From: Gavin Date: Fri, 13 Oct 2023 16:12:17 -0700 Subject: [PATCH] combine feed components --- .../components/Community/CommunityHeader.tsx | 11 +-- .../Feed/components/CommunityFeed.tsx | 75 ------------------- src/components/Feed/components/MainFeed.tsx | 25 ++++++- src/components/Navigation/MainScreens.tsx | 4 +- 4 files changed, 30 insertions(+), 85 deletions(-) delete mode 100644 src/components/Feed/components/CommunityFeed.tsx diff --git a/src/components/Feed/components/Community/CommunityHeader.tsx b/src/components/Feed/components/Community/CommunityHeader.tsx index f83650645..8efe80579 100644 --- a/src/components/Feed/components/Community/CommunityHeader.tsx +++ b/src/components/Feed/components/Community/CommunityHeader.tsx @@ -23,16 +23,17 @@ function CommunityHeader(): React.JSX.Element | null { const navigation = useNavigation>(); // Get the title - const communityTitle = useCommunityName(params.id); - const communityBanner = useCommunityBanner(params.id); - const communityNsfw = useCommunityNsfw(params.id); + const communityTitle = useCommunityName(params?.id); + const communityBanner = useCommunityBanner(params?.id); + const communityNsfw = useCommunityNsfw(params?.id); // Load the data const { isLoading, data } = useLoadData< GetCommunityResponse | number | undefined >( async () => { - return await instance.getCommunity(params.name); + if (params?.id == null) return; + return await instance.getCommunity(params?.name); }, // We don't want to load the data again if we already have it () => { @@ -53,7 +54,7 @@ function CommunityHeader(): React.JSX.Element | null { } // If we don't have the data and we don't have the ID, then we can't display anything - if (!isLoading && data == null && params.id == null) { + if (!isLoading && data == null && params?.id == null) { return null; } diff --git a/src/components/Feed/components/CommunityFeed.tsx b/src/components/Feed/components/CommunityFeed.tsx deleted file mode 100644 index 476ce8a4e..000000000 --- a/src/components/Feed/components/CommunityFeed.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import React, { useCallback, useEffect, useMemo } from 'react'; -import instance from '@api/Instance'; -import VStack from '@components/Common/Stack/VStack'; -import { useRoute } from '@react-navigation/core'; -import { useFeedNextPage, useFeedPostIds } from '@src/state/feed/feedStore'; -import FeedItem from '@components/Feed/components/Feed/FeedItem'; -import { FlatList } from 'react-native'; -import { useLoadData } from '@hooks/useLoadData'; -import IGetPostOptions from '@api/common/types/IGetPostOptions'; -import CommunityHeader from '@components/Feed/components/Community/CommunityHeader'; -import { cleanupPosts } from '@helpers/state'; -import FeedLoadingIndicator from '@components/Feed/components/Feed/FeedLoadingIndicator'; - -interface RenderItem { - item: number; -} - -const renderItem = ({ item }: RenderItem): React.JSX.Element => { - return ; -}; - -const keyExtractor = (item: number): string => item.toString(); - -export default function CommunityFeed(): React.JSX.Element { - // Get the feed ID - const { key, params } = useRoute(); - const postIds = useFeedPostIds(key); - const nextPage = useFeedNextPage(key); - - useEffect(() => { - return () => { - cleanupPosts(key); - }; - }, []); - - const defaultOptions = useMemo( - (): IGetPostOptions => ({ - communityName: params.name as unknown as string, - }), - [params.name], - ); - - const { isLoading, isError, append } = useLoadData(async () => { - await instance.getPosts(key, { ...defaultOptions }, true); - }); - - const onEndReached = useCallback(() => { - append(async () => { - await instance.getPosts(key, { - ...defaultOptions, - page: nextPage, - }); - }); - }, [nextPage]); - - return ( - - } - ListFooterComponent={ - - } - /> - - ); -} diff --git a/src/components/Feed/components/MainFeed.tsx b/src/components/Feed/components/MainFeed.tsx index b053855b7..9f81a0cc4 100644 --- a/src/components/Feed/components/MainFeed.tsx +++ b/src/components/Feed/components/MainFeed.tsx @@ -1,4 +1,4 @@ -import React, { useCallback } from 'react'; +import React, { useCallback, useEffect, useMemo } from 'react'; import instance from '@api/Instance'; import VStack from '@components/Common/Stack/VStack'; import { useRoute } from '@react-navigation/core'; @@ -7,6 +7,9 @@ import FeedItem from '@components/Feed/components/Feed/FeedItem'; import { FlatList, RefreshControl } from 'react-native'; import { useLoadData } from '@hooks/useLoadData'; import FeedLoadingIndicator from '@components/Feed/components/Feed/FeedLoadingIndicator'; +import { cleanupPosts } from '@helpers/state'; +import IGetPostOptions from '@api/common/types/IGetPostOptions'; +import CommunityHeader from '@components/Feed/components/Community/CommunityHeader'; interface RenderItem { item: number; @@ -20,16 +23,29 @@ const keyExtractor = (item: number): string => item.toString(); export default function MainFeed(): React.JSX.Element { // Get the feed ID - const { key } = useRoute(); + const { key, params } = useRoute(); const postIds = useFeedPostIds(key); const nextPage = useFeedNextPage(key); + useEffect(() => { + return () => { + cleanupPosts(key); + }; + }, []); + + const defaultOptions = useMemo( + (): IGetPostOptions => ({ + communityName: (params?.name as unknown as string) ?? undefined, + }), + [params?.name], + ); + const { isLoading, isRefreshing, isError, append, refresh } = useLoadData( async () => { await instance.getPosts( key, { - page: 1, + ...defaultOptions, }, true, ); @@ -39,6 +55,7 @@ export default function MainFeed(): React.JSX.Element { const onEndReached = useCallback(() => { append(async () => { await instance.getPosts(key, { + ...defaultOptions, page: nextPage, }); }); @@ -47,6 +64,7 @@ export default function MainFeed(): React.JSX.Element { const onRefresh = useCallback(() => { refresh(async () => { await instance.getPosts(key, { + ...defaultOptions, page: 1, refresh: true, }); @@ -66,6 +84,7 @@ export default function MainFeed(): React.JSX.Element { onEndReachedThreshold={0.5} onEndReached={onEndReached} removeClippedSubviews={true} + ListHeaderComponent={} ListFooterComponent={ } diff --git a/src/components/Navigation/MainScreens.tsx b/src/components/Navigation/MainScreens.tsx index 2e35657a3..ca7270957 100644 --- a/src/components/Navigation/MainScreens.tsx +++ b/src/components/Navigation/MainScreens.tsx @@ -11,7 +11,7 @@ import { import { NativeStackNavigatorProps } from 'react-native-screens/lib/typescript/native-stack/types'; import FeedIndexScreen from '@components/Feed/screens/FeedIndexScreen'; import PostScreen from '@components/Post/screens/PostScreen'; -import CommunityFeed from '@components/Feed/components/CommunityFeed'; +import MainFeed from '@components/Feed/components/MainFeed'; export default function MainScreens( stack: TypedNavigator< @@ -48,7 +48,7 @@ export default function MainScreens( />