description and header added

package.json

@@ -30,6 +30,7 @@
     "@rneui/themed": "^4.0.0-rc.8",
     "@supabase/supabase-js": "^2.36.0",
     "@types/validator": "^13.11.5",
+    "@xenova/transformers": "^2.16.1",
     "axios": "^1.5.0",
     "cheerio": "^1.0.0-rc.12",
     "deprecated-react-native-prop-types": "^4.2.1",
@@ -81,8 +82,7 @@
     "eslint-config-universe": "^12.0.0",
     "husky": "^8.0.3",
     "prettier": "^3.0.3",
-    "supabase": "^1.110.1",
-    "typescript": "^5.1.3"
+    "supabase": "^1.110.1"
   },
   "private": true
 }

src/app/(tabs)/_layout.tsx

@@ -34,6 +34,7 @@ function TabNav() {
 
   return (
     <Tabs
+      backBehavior="history"
       screenOptions={{
         tabBarLabelStyle: { fontSize: 14 },
         tabBarHideOnKeyboard: true,

src/app/(tabs)/author/index.tsx

@@ -1,7 +1,8 @@
+import * as cheerio from 'cheerio';
 import { useLocalSearchParams, router } from 'expo-router';
-import { decode } from 'html-entities';
 import { useEffect, useState } from 'react';
-import { ActivityIndicator, ScrollView, View, Text, Image } from 'react-native';
+import { ActivityIndicator, ScrollView, View, Text } from 'react-native';
+import { Image } from 'expo-image';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import styles from './styles';
@@ -14,7 +15,6 @@ 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>();
@@ -52,14 +52,14 @@ function AuthorScreen() {
 
   return (
     <SafeAreaView
-      style={[globalStyles.tabBarContainer, { marginHorizontal: -8 }]}
+      style={[globalStyles.tabBarContainer, { paddingHorizontal: 22 }]}
     >
       {isLoading ? (
         <ActivityIndicator />
       ) : (
         <ScrollView
           showsVerticalScrollIndicator={false}
-          bounces={true}
+          bounces
           contentContainerStyle={{ paddingHorizontal: 8 }}
         >
           <BackButton pressFunction={() => router.back()} />
@@ -139,7 +139,7 @@ function AuthorScreen() {
           ))}
 
           {/* View so there's space between the tab bar and the stories */}
-          <View style={{ paddingBottom: 10 }}></View>
+          <View style={{ paddingBottom: 10 }} />
         </ScrollView>
       )}
     </SafeAreaView>

src/app/(tabs)/author/styles.tsx

@@ -4,7 +4,6 @@ import colors from '../../../styles/colors';
 
 const styles = StyleSheet.create({
   authorCardContainer: {
-    marginTop: 16,
     marginBottom: 8,
     flexDirection: 'row',
     justifyContent: 'flex-start',

src/app/(tabs)/genre/index.tsx

@@ -1,5 +1,5 @@
 import { useLocalSearchParams, router } from 'expo-router';
-import { useEffect, useState, useMemo, ReactNode } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import {
   ActivityIndicator,
   ScrollView,
@@ -14,12 +14,11 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 
 import styles from './styles';
 import BackButton from '../../../components/BackButton/BackButton';
+import PreviewCard from '../../../components/PreviewCard/PreviewCard';
 import { fetchGenreStoryById } from '../../../queries/genres';
 import { fetchStoryPreviewByIds } from '../../../queries/stories';
 import { StoryPreview, GenreStories } from '../../../queries/types';
 import globalStyles from '../../../styles/globalStyles';
-import PreviewCard from '../../../components/PreviewCard/PreviewCard';
-import React from 'react';
 
 function GenreScreen() {
   const [genreStoryData, setGenreStoryData] = useState<GenreStories[]>();
@@ -48,13 +47,13 @@ function GenreScreen() {
 
   useEffect(() => {
     const checkTopic = (preview: StoryPreview): boolean => {
-      if (preview == null || preview.topic == null) return false;
+      if (preview?.topic == null) return false;
       if (selectedTopicsForFiltering.length == 0) return true;
       else
         return selectedTopicsForFiltering.every(t => preview.topic.includes(t));
     };
     const checkTone = (preview: StoryPreview): boolean => {
-      if (preview == null || preview.tone == null) return false;
+      if (preview?.tone == null) return false;
       if (selectedTonesForFiltering.length == 0) return true;
       else
         return selectedTonesForFiltering.every(t => preview.tone.includes(t));
@@ -203,7 +202,7 @@ function GenreScreen() {
   const renderGenreHeading = () => {
     return (
       <View>
-        <Text style={[globalStyles.h1, { marginTop: 15 }]}>
+        <Text style={globalStyles.h1}>
           {selectedSubgenre === 'All' ? mainGenre : selectedSubgenre}
         </Text>
         {/* <Text style={[globalStyles.subHeading1]}> */}
@@ -298,13 +297,7 @@ function GenreScreen() {
     >
       <View style={styles.container}>
         <View style={styles.headerContainer}>
-          <BackButton
-            pressFunction={() =>
-              router.push({
-                pathname: '/search',
-              })
-            }
-          />
+          <BackButton pressFunction={() => router.back()} />
 
           {useMemo(renderGenreHeading, [selectedSubgenre, mainGenre])}
           {useMemo(renderGenreScrollSelector, [subgenres, selectedSubgenre])}

src/app/(tabs)/genre/styles.tsx

@@ -10,7 +10,6 @@ const styles = StyleSheet.create({
   container: {
     paddingHorizontal: 24,
     width: '100%',
-    marginTop: 24,
     flex: 1,
   },
 

src/app/(tabs)/home/index.tsx

@@ -210,6 +210,7 @@ function HomeScreen() {
             >
               {recommendedStories.map(story => (
                 <ContentCard
+                  id={story.id}
                   storyId={story.id}
                   key={story.title}
                   title={story.title}
@@ -235,6 +236,7 @@ function HomeScreen() {
             >
               {newStories.map(story => (
                 <ContentCard
+                  id={story.id}
                   storyId={story.id}
                   key={story.title}
                   title={story.title}

src/app/(tabs)/library/index.tsx

@@ -1,13 +1,157 @@
-import { Text } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import { Text, View, Pressable, ScrollView } from 'react-native';
+import { useState, useEffect, useMemo } from 'react';
+import { useSession } from '../../../utils/AuthContext';
+import { router } from 'expo-router';
 
 import globalStyles from '../../../styles/globalStyles';
+import styles from './styles';
+import LibraryHeader from '../../../components/LibraryHeader/LibraryHeader';
+import PreviewCard from '../../../components/PreviewCard/PreviewCard';
+import { StoryPreview } from '../../../queries/types';
+import {
+  fetchUserStoriesFavorites,
+  fetchUserStoriesReadingList,
+} from '../../../queries/savedStories';
+import { FlatList } from 'react-native-gesture-handler';
+import { usePubSub } from '../../../utils/PubSubContext';
 
 function LibraryScreen() {
+  const { user } = useSession();
+  const [favoritesSelected, setFavoritesSelected] = useState(true);
+  const [readingSelected, setReadingSelected] = useState(false);
+  const [favoriteStories, setFavoriteStories] = useState<StoryPreview[]>([]);
+  const [readingListStories, setReadingListStories] = useState<StoryPreview[]>(
+    [],
+  );
+  const { channels } = usePubSub();
+  let updateReadingListTimeout: NodeJS.Timeout | null = null;
+
+  const favoritesPressed = () => {
+    setFavoritesSelected(true);
+    setReadingSelected(false);
+  };
+
+  const readingPressed = () => {
+    setFavoritesSelected(false);
+    setReadingSelected(true);
+  };
+
+  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(() => {
+    if (updateReadingListTimeout) {
+      clearTimeout(updateReadingListTimeout);
+    }
+
+    updateReadingListTimeout = setTimeout(
+      () =>
+        fetchUserStoriesReadingList(user?.id).then(readingList => {
+          setReadingListStories(readingList);
+        }),
+      5000,
+    );
+  }, [channels]);
+
+  useEffect(() => {
+    (async () => {
+      await Promise.all([
+        fetchUserStoriesFavorites(user?.id).then(favorites =>
+          setFavoriteStories(favorites),
+        ),
+        fetchUserStoriesReadingList(user?.id).then(readingList => {
+          setReadingListStories(readingList);
+        }),
+      ]);
+    })();
+  }, [user]);
+
   return (
-    <SafeAreaView style={globalStyles.tabBarContainer}>
-      <Text style={globalStyles.h1}>Library</Text>
-    </SafeAreaView>
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <LibraryHeader />
+      </View>
+      <View style={styles.selector}>
+        <View style={favoritesSelected && styles.selectedButton}>
+          <Pressable onPress={favoritesPressed}>
+            <Text
+              style={[
+                globalStyles.subHeading1,
+                favoritesSelected ? styles.selectedText : styles.unselectedText,
+              ]}
+            >
+              Favorites
+            </Text>
+          </Pressable>
+        </View>
+
+        <View style={readingSelected && styles.selectedButton}>
+          <Pressable onPress={readingPressed}>
+            <View>
+              <Text
+                style={[
+                  globalStyles.subHeading1,
+                  readingSelected ? styles.selectedText : styles.unselectedText,
+                ]}
+              >
+                Reading List
+              </Text>
+            </View>
+          </Pressable>
+        </View>
+      </View>
+
+      <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>
+          ))}
+
+        {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>
   );
 }
 

src/app/(tabs)/library/styles.ts

@@ -1,5 +1,43 @@
 import { StyleSheet } from 'react-native';
+import colors from '../../../styles/colors';
 
-const styles = StyleSheet.create({});
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+  },
+  selector: {
+    display: 'flex',
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    backgroundColor: '#fbfbfb',
+    marginBottom: 24,
+  },
+  header: {
+    paddingHorizontal: 24,
+    marginBottom: 24,
+    marginTop: 60,
+  },
+  selectedText: {
+    textAlign: 'center',
+    color: colors.gwnOrange,
+    paddingVertical: 8,
+  },
+  unselectedText: {
+    textAlign: 'center',
+    color: colors.black,
+    paddingVertical: 8,
+  },
+  selectedButton: {
+    borderBottomWidth: 1,
+    borderBottomColor: colors.gwnOrange,
+  },
+  scrollView: {
+    width: '100%',
+  },
+});
 
 export default styles;