combine feed components

Memmy-App · Oct 13, 2023 · 6294eee · 6294eee
1 parent 1de9c5a
commit 6294eee
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 85 deletions.
diff --git 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<NativeStackNavigationProp<any>>();
 
   // 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
diff --git 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<any>();
   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={<CommunityHeader />}
         ListFooterComponent={
           <FeedLoadingIndicator loading={isLoading} error={isError} />
         }

diff --git 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(
         />
         <stack.Screen
           name="Community"
-          component={CommunityFeed}
+          component={MainFeed}
           options={{
             headerShown: true,
           }}