Fix title preview card overflow

calblueprint · Apr 18, 2024 · f8c41e7 · f8c41e7
1 parent 0900b7e
commit f8c41e7
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 74 deletions.
diff --git a/src/app/(tabs)/library/index.tsx b/src/app/(tabs)/library/index.tsx
@@ -13,6 +13,7 @@ import {
   fetchUserStoriesFavorites,
   fetchUserStoriesReadingList,
 } from '../../../queries/savedStories';
+import { FlatList } from 'react-native-gesture-handler';
 
 function LibraryScreen() {
   const { user } = useSession();
@@ -26,22 +27,25 @@ function LibraryScreen() {
   const favoritesPressed = () => {
     setFavoritesSelected(true);
     setReadingSelected(false);
+    console.log(favoriteStories);
   };
 
   const readingPressed = () => {
     setFavoritesSelected(false);
     setReadingSelected(true);
+    console.log(readingListStories);
   };
 
   useEffect(() => {
     (async () => {
-      const [favoriteStoriesResponse, readingListStoriesResponse] =
-        await Promise.all([
-          fetchUserStoriesFavorites(user?.id).catch(() => []),
-          fetchUserStoriesReadingList(user?.id).catch(() => []),
-        ]);
-      setFavoriteStories(favoriteStoriesResponse);
-      setReadingListStories(readingListStoriesResponse);
+      await Promise.all([
+        fetchUserStoriesFavorites(user?.id).catch(favorites =>
+          setFavoriteStories(favorites),
+        ),
+        fetchUserStoriesReadingList(user?.id).catch(readingList =>
+          setReadingListStories(readingList),
+        ),
+      ]);
     })().finally(() => {});
   }, [user]);
 
@@ -88,45 +92,61 @@ function LibraryScreen() {
       >
         {favoritesSelected && favoriteStories.length > 0 && (
           <View>
-            {favoriteStories.map(story => (
-              <PreviewCard
-                key={story.title}
-                title={story.title}
-                image={story.featured_media}
-                author={story.author_name}
-                authorImage={story.author_image}
-                excerpt={story.excerpt}
-                tags={story.genre_medium.concat(story.tone).concat(story.topic)}
-                pressFunction={() =>
-                  router.push({
-                    pathname: '/story',
-                    params: { storyId: story.id.toString() },
-                  })
-                }
-              />
-            ))}
+            <FlatList
+              data={favoriteStories}
+              renderItem={({ item }) => {
+                return (
+                  <PreviewCard
+                    key={item.title}
+                    title={item.title}
+                    storyId={item.id}
+                    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 && (
           <View>
-            {readingListStories.map(story => (
-              <PreviewCard
-                key={story.title}
-                title={story.title}
-                image={story.featured_media}
-                author={story.author_name}
-                authorImage={story.author_image}
-                excerpt={story.excerpt}
-                tags={story.genre_medium.concat(story.tone).concat(story.topic)}
-                pressFunction={() =>
-                  router.push({
-                    pathname: '/story',
-                    params: { storyId: story.id.toString() },
-                  })
-                }
-              />
-            ))}
+            <FlatList
+              data={readingListStories}
+              renderItem={({ item }) => {
+                return (
+                  <PreviewCard
+                    key={item.title}
+                    title={item.title}
+                    storyId={item.id}
+                    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>
         )}
       </ScrollView>

diff --git a/src/components/PreviewCard/PreviewCard.tsx b/src/components/PreviewCard/PreviewCard.tsx
@@ -44,8 +44,10 @@ function PreviewCard({
           <Text numberOfLines={1} style={[globalStyles.h3, styles.title]}>
             {title}
           </Text>
-          <TouchableOpacity>
-            <SaveStoryButton storyId={storyId} />
+          <TouchableOpacity style={{ alignSelf: 'flex-end' }}>
+            <View>
+              <SaveStoryButton storyId={storyId} />
+            </View>
           </TouchableOpacity>
         </View>
         <View style={styles.body}>

diff --git a/src/components/PreviewCard/styles.ts b/src/components/PreviewCard/styles.ts
@@ -44,7 +44,9 @@ const styles = StyleSheet.create({
     marginBottom: 12,
   },
   title: {
-    marginBottom: 8,
+    flex: 1,
+    alignSelf: 'flex-start',
+    // marginBottom: 8,
   },
   titleContainer: {
     paddingTop: 16,
@@ -54,8 +56,7 @@ const styles = StyleSheet.create({
     borderBottomColor: '#EBEBEB',
     borderBottomWidth: StyleSheet.hairlineWidth,
     flexDirection: 'row',
-    flexGrow: 1,
-    justifyContent: 'space-between',
+    flex: 1,
   },
   tag: {
     paddingHorizontal: 8,

diff --git a/src/queries/savedStories.tsx b/src/queries/savedStories.tsx
@@ -1,4 +1,5 @@
 import supabase from '../utils/supabase';
+import { StoryPreview } from './types';
 
 enum SavedList {
   FAVORITES = 'favorites',
@@ -9,44 +10,23 @@ async function fetchUserStories(
   user_id: string | undefined,
   name: string | undefined,
 ) {
-  const { data: storyObjects, error } = await supabase
-    .from('saved_stories')
-    .select('story_id')
-    .eq('user_id', user_id)
-    .eq('name', name);
+  let { data, error } = await supabase.rpc('get_saved_stories_for_user', {
+    user_id,
+    saved_list_name: name,
+  });
 
   if (error) {
     if (process.env.NODE_ENV !== 'production') {
       throw new Error(
-        `An error occured when trying to fetch user saved stories: ${JSON.stringify(
+        `An error occured when trying to set user saved stories: ${JSON.stringify(
           error,
         )}`,
       );
     }
-    return [];
-  }
-
-  let storyData = [];
-  for (const storyObject of storyObjects) {
-    const storyId = storyObject['story_id'];
-    const { data, error } = await supabase.rpc('fetch_story', {
-      input_id: storyId,
-    });
-
-    if (error || data.length == 0) {
-      if (process.env.NODE_ENV !== 'production') {
-        throw new Error(
-          `An error occured when trying to use rpc to get story data: ${JSON.stringify(
-            error,
-          )}`,
-        );
-      }
-    } else {
-      storyData.push(data[0]);
-    }
   }
 
-  return storyData;
+  console.log(data[0]);
+  return data as StoryPreview[];
 }
 
 export async function fetchUserStoriesFavorites(user_id: string | undefined) {