Finish library screen

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

Hide file tree

Showing 5 changed files with 47 additions and 48 deletions.
diff --git a/assets/icon.png b/assets/icon.png
diff --git a/src/app/(tabs)/home/index.tsx b/src/app/(tabs)/home/index.tsx
@@ -150,11 +150,12 @@ function HomeScreen() {
         {featuredStories.length > 0 && (
           <View>
             <Text style={globalStyles.h3}>Featured Stories</Text>
-            {featuredStoriesDescription != null && featuredStoriesDescription.length > 0 && (
-              <Text style={[globalStyles.body1, styles.featuredDescription]}>
-                {featuredStoriesDescription}
-              </Text>
-            )}
+            {featuredStoriesDescription != null &&
+              featuredStoriesDescription.length > 0 && (
+                <Text style={[globalStyles.body1, styles.featuredDescription]}>
+                  {featuredStoriesDescription}
+                </Text>
+              )}
             <View style={{ marginRight: 24, marginTop: 16 }}>
               {featuredStories.map(story => (
                 <PreviewCard

diff --git a/src/app/(tabs)/library/index.tsx b/src/app/(tabs)/library/index.tsx
@@ -24,6 +24,7 @@ function LibraryScreen() {
     [],
   );
   const { channels } = usePubSub();
+  let updateReadingListTimeout: NodeJS.Timeout | null = null;
 
   const favoritesPressed = () => {
     setFavoritesSelected(true);
@@ -47,9 +48,7 @@ function LibraryScreen() {
           author={item.author_name}
           authorImage={item.author_image}
           excerpt={item.excerpt}
-          tags={item.genre_medium
-            .concat(item.tone)
-            .concat(item.topic)}
+          tags={item.genre_medium.concat(item.tone).concat(item.topic)}
           pressFunction={() =>
             router.push({
               pathname: '/story',
@@ -59,13 +58,21 @@ function LibraryScreen() {
         />
       </View>
     );
-  }
+  };
 
   useEffect(() => {
-    setTimeout(() => fetchUserStoriesReadingList(user?.id).then(readingList => {
-      setReadingListStories(readingList);
-    }), 3000)
-  }, [channels])
+    if (updateReadingListTimeout) {
+      clearTimeout(updateReadingListTimeout);
+    }
+
+    updateReadingListTimeout = setTimeout(
+      () =>
+        fetchUserStoriesReadingList(user?.id).then(readingList => {
+          setReadingListStories(readingList);
+        }),
+      5000,
+    );
+  }, [channels]);
 
   useEffect(() => {
     (async () => {
@@ -117,40 +124,32 @@ function LibraryScreen() {
 
       <View style={{ width: '100%', flex: 1, marginBottom: 100 }}>
         {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>)
-          )}
+          (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 &&
-          (
-            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>)
-          )}
+          (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/components/LibraryHeader/LibraryHeader.tsx b/src/components/LibraryHeader/LibraryHeader.tsx
@@ -16,8 +16,7 @@ export default function LibraryHeader() {
       <View style={styles.textContainer}>
         <Image
           style={styles.image}
-          //rendering the logo for now but this will change to the user's profile picture
-          source={require('../../../assets/logo.png')}
+          source={require('../../../assets/icon.png')}
         />
         <View style={styles.username}>
           <Text style={globalStyles.h1}>{user?.user_metadata.username} </Text>

diff --git a/src/queries/savedStories.tsx b/src/queries/savedStories.tsx
@@ -12,7 +12,7 @@ async function fetchUserStories(
 ) {
   let { data, error } = await supabase.rpc('get_saved_stories_for_user', {
     user_id_string: user_id,
-    saved_list_name: name
+    saved_list_name: name,
   });
 
   if (error) {