Auto update reading list page

calblueprint · Apr 21, 2024 · 93f26a3 · 93f26a3
1 parent f92f72d
commit 93f26a3
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 66 deletions.
diff --git a/src/app/(tabs)/home/index.tsx b/src/app/(tabs)/home/index.tsx
@@ -150,7 +150,7 @@ function HomeScreen() {
         {featuredStories.length > 0 && (
           <View>
             <Text style={globalStyles.h3}>Featured Stories</Text>
-            {featuredStoriesDescription.length > 0 && (
+            {featuredStoriesDescription != null && featuredStoriesDescription.length > 0 && (
               <Text style={[globalStyles.body1, styles.featuredDescription]}>
                 {featuredStoriesDescription}
               </Text>

diff --git a/src/app/(tabs)/library/index.tsx b/src/app/(tabs)/library/index.tsx
@@ -13,6 +13,7 @@ import {
   fetchUserStoriesReadingList,
 } from '../../../queries/savedStories';
 import { FlatList } from 'react-native-gesture-handler';
+import { usePubSub } from '../../../utils/PubSubContext';
 
 function LibraryScreen() {
   const { user } = useSession();
@@ -22,27 +23,57 @@ function LibraryScreen() {
   const [readingListStories, setReadingListStories] = useState<StoryPreview[]>(
     [],
   );
+  const { channels } = usePubSub();
 
   const favoritesPressed = () => {
     setFavoritesSelected(true);
     setReadingSelected(false);
-    console.log(favoriteStories);
   };
 
   const readingPressed = () => {
     setFavoritesSelected(false);
     setReadingSelected(true);
-    console.log(readingListStories);
   };
 
+  const renderItem = ({ item }: { item: StoryPreview }) => {
+    return (
+      <View style={{ paddingHorizontal: 24 }}>
+        <PreviewCard
+          key={item.title}
+          storyId={item.id}
+          defaultSavedStoriesState={true}
+          title={item.title}
+          image={item.featured_media}
+          author={item.author_name}
+          authorImage={item.author_image}
+          excerpt={item.excerpt}
+          tags={item.genre_medium
+            .concat(item.tone)
+            .concat(item.topic)}
+          pressFunction={() =>
+            router.push({
+              pathname: '/story',
+              params: { storyId: item.id.toString() },
+            })
+          }
+        />
+      </View>
+    );
+  }
+
+  useEffect(() => {
+    setTimeout(() => fetchUserStoriesReadingList(user?.id).then(readingList => {
+      setReadingListStories(readingList);
+    }), 3000)
+  }, [channels])
+
   useEffect(() => {
     (async () => {
       await Promise.all([
         fetchUserStoriesFavorites(user?.id).then(favorites =>
           setFavoriteStories(favorites),
         ),
         fetchUserStoriesReadingList(user?.id).then(readingList => {
-          console.log(readingList);
           setReadingListStories(readingList);
         }),
       ]);
@@ -85,66 +116,41 @@ function LibraryScreen() {
       </View>
 
       <View style={{ width: '100%', flex: 1, marginBottom: 100 }}>
-        {favoritesSelected && (
-          <FlatList
-            data={favoriteStories}
-            renderItem={({ item }) => {
-              return (
-                <View style={{ paddingHorizontal: 24 }}>
-                  <PreviewCard
-                    key={item.title}
-                    storyId={item.id}
-                    title={item.title}
-                    image={item.featured_media}
-                    author={item.author_name}
-                    authorImage={item.author_image}
-                    excerpt={item.excerpt}
-                    tags={item.genre_medium
-                      .concat(item.tone)
-                      .concat(item.topic)}
-                    pressFunction={() =>
-                      router.push({
-                        pathname: '/story',
-                        params: { storyId: item.id.toString() },
-                      })
-                    }
-                  />
-                </View>
-              );
-            }}
-          />
-        )}
+        {favoritesSelected &&
+          (
+            favoriteStories.length > 0 ? (
+              <FlatList
+                data={favoriteStories}
+                renderItem={renderItem}
+              />
+            ) : (
+              <View style={{ paddingBottom: 16 }}>
+                <Text style={[globalStyles.h3, { textAlign: 'center' }]}>
+                  Favorited stories
+                </Text>
+                <Text style={[globalStyles.h3, { textAlign: 'center' }]}>
+                  will appear here.
+                </Text>
+              </View>)
+          )}
 
-        {readingSelected && (
-          <FlatList
-            data={readingListStories}
-            renderItem={({ item }) => {
-              return (
-                <View style={{ paddingHorizontal: 24 }}>
-                  <PreviewCard
-                    key={item.title}
-                    storyId={item.id}
-                    defaultSavedStoriesState={true}
-                    title={item.title}
-                    image={item.featured_media}
-                    author={item.author_name}
-                    authorImage={item.author_image}
-                    excerpt={item.excerpt}
-                    tags={item.genre_medium
-                      .concat(item.tone)
-                      .concat(item.topic)}
-                    pressFunction={() =>
-                      router.push({
-                        pathname: '/story',
-                        params: { storyId: item.id.toString() },
-                      })
-                    }
-                  />
-                </View>
-              );
-            }}
-          />
-        )}
+        {readingSelected &&
+          (
+            readingListStories.length > 0 ? (
+              <FlatList
+                data={readingListStories}
+                renderItem={renderItem}
+              />
+            ) : (
+              <View style={{ paddingBottom: 16 }}>
+                <Text style={[globalStyles.h3, { textAlign: 'center' }]}>
+                  Saved stories
+                </Text>
+                <Text style={[globalStyles.h3, { textAlign: 'center' }]}>
+                  will appear here.
+                </Text>
+              </View>)
+          )}
       </View>
     </View>
   );

diff --git a/src/queries/savedStories.tsx b/src/queries/savedStories.tsx
@@ -11,14 +11,14 @@ async function fetchUserStories(
   name: string | undefined,
 ) {
   let { data, error } = await supabase.rpc('get_saved_stories_for_user', {
-    user_id,
-    saved_list_name: name,
+    user_id_string: user_id,
+    saved_list_name: name
   });
 
   if (error) {
     if (process.env.NODE_ENV !== 'production') {
       throw new Error(
-        `An error occured when trying to set user saved stories: ${JSON.stringify(
+        `An error occured when trying to get user saved stories: ${JSON.stringify(
           error,
         )}`,
       );