[search] Implement genre screen (#59)

* progress on database functions to pull genre information * pushing changes before rebase * ran prettier * finished styling genre preview card component * styling complete for genre screen, need to implement tone, topic dropdown selection logic * semi finished genre screen, need to debug drop down logic * Fix rpc calls * Seperate components in genre screen * Use PreviewCard instead of GenreStoryPreviewCard * Run initial useEffect async * Use rpc function to get all stories instead of loop * Run prettier * Implement tone and topic selectors * Refactor dropdowns * Fix type errors * Refactor some filter functions * More refactor of genre screen * Fix loading bug * Fix list key warning * Run prettier * Run prettier * Rename state variables * Small optimizations * Run prettier * Temp fix for spacing for tab bar * Small bug fixes * Run prettier --------- Co-authored-by: Aditya Pawar <[email protected]> Co-authored-by: Aditya Pawar <[email protected]>
calblueprint · Apr 7, 2024 · 507523a · 507523a
1 parent 9a3d707
commit 507523a
Show file tree

Hide file tree

Showing 21 changed files with 987 additions and 62 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/(tabs)/_layout.tsx b/src/app/(tabs)/_layout.tsx
@@ -55,7 +55,6 @@ function TabNav() {
           headerShown: false,
           tabBarLabel: 'Home',
           tabBarIcon: ({ color }) => HomeIcon({ color }),
-          // tabBarLabelStyle: { borderTopWidth: 12, paddingTop: 12 },
         }}
       />
       <Tabs.Screen
@@ -95,6 +94,13 @@ function TabNav() {
           href: null,
         }}
       />
+      <Tabs.Screen
+        name="genre"
+        options={{
+          headerShown: false,
+          href: null,
+        }}
+      />
     </Tabs>
   );
 }

diff --git a/src/app/(tabs)/author/index.tsx b/src/app/(tabs)/author/index.tsx
@@ -14,6 +14,7 @@ import {
 } from '../../../queries/authors';
 import { Author, StoryPreview } from '../../../queries/types';
 import globalStyles from '../../../styles/globalStyles';
+import * as cheerio from 'cheerio';
 
 function AuthorScreen() {
   const [authorInfo, setAuthorInfo] = useState<Author>();
@@ -26,41 +27,39 @@ function AuthorScreen() {
   useEffect(() => {
     setLoading(true);
     (async () => {
-      const storyData: StoryPreview[] = await fetchAuthorStoryPreviews(
-        parseInt(author as string, 10),
-      );
-      const authorData: Author = await fetchAuthor(
-        parseInt(author as string, 10),
-      );
       try {
-        setAuthorInfo(authorData);
-        console.log('TESTING AUTHOR INFO QUERY OUTPUT:', authorInfo);
-      } catch (error) {
-        console.log(
-          `There was an error while trying to output authorinfo ${error}`,
+        const storyData: StoryPreview[] = await fetchAuthorStoryPreviews(
+          parseInt(author as string, 10),
         );
-      }
-      try {
+        const authorData: Author = await fetchAuthor(
+          parseInt(author as string, 10),
+        );
+
+        // Assuming these setters do not throw, but if they do, they're caught by the catch block
+        setAuthorInfo(authorData);
         setAuthorStoryPreview(storyData);
-        console.log('TESTING STORY PREVIEW INFO QUERY OUTPUT:', storyData);
       } catch (error) {
-        console.log(
-          `There was an error while trying to output author story preview info ${error}`,
-        );
+        console.error('There was an error while fetching data:', error);
+      } finally {
+        setLoading(false);
       }
-    })().then(() => {
-      setLoading(false);
-    });
+    })();
   }, [author]);
 
+  const getTextFromHtml = (text: string) => {
+    return cheerio.load(text).text().trim();
+  };
+
   return (
-    <SafeAreaView style={[globalStyles.container, { marginHorizontal: -8 }]}>
+    <SafeAreaView
+      style={[globalStyles.tabBarContainer, { marginHorizontal: -8 }]}
+    >
       {isLoading ? (
         <ActivityIndicator />
       ) : (
         <ScrollView
           showsVerticalScrollIndicator={false}
-          bounces={false}
+          bounces={true}
           contentContainerStyle={{ paddingHorizontal: 8 }}
         >
           <BackButton pressFunction={() => router.back()} />
@@ -77,7 +76,7 @@ function AuthorScreen() {
                   numberOfLines={2}
                   style={globalStyles.h1}
                 >
-                  {authorInfo.name}
+                  {getTextFromHtml(authorInfo.name)}
                 </Text>
                 {authorInfo?.pronouns && (
                   <Text style={[globalStyles.subHeading2, styles.pronouns]}>
@@ -92,7 +91,9 @@ function AuthorScreen() {
 
           {authorInfo?.bio && (
             <>
-              <Text style={globalStyles.body1}>{decode(authorInfo.bio)}</Text>
+              <Text style={globalStyles.body1}>
+                {getTextFromHtml(authorInfo.bio)}
+              </Text>
               <HorizontalLine />
             </>
           )}
@@ -105,7 +106,7 @@ function AuthorScreen() {
                 Artist's Statement
               </Text>
               <Text style={globalStyles.body1}>
-                {decode(authorInfo.artist_statement)}
+                {getTextFromHtml(authorInfo.artist_statement)}
               </Text>
               <HorizontalLine />
             </>
@@ -135,6 +136,9 @@ function AuthorScreen() {
               }
             />
           ))}
+
+          {/* View so there's space between the tab bar and the stories */}
+          <View style={{ paddingBottom: 10 }}></View>
         </ScrollView>
       )}
     </SafeAreaView>

diff --git a/src/app/(tabs)/genre/_layout.tsx b/src/app/(tabs)/genre/_layout.tsx
@@ -0,0 +1,11 @@
+import { Stack } from 'expo-router';
+
+function StackLayout() {
+  return (
+    <Stack>
+      <Stack.Screen name="index" options={{ headerShown: false }} />
+    </Stack>
+  );
+}
+
+export default StackLayout;