Merge branch 'main' into justin/favorite-story-button

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",
@@ -82,8 +83,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

@@ -14,11 +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';
 
 function GenreScreen() {
   const [genreStoryData, setGenreStoryData] = useState<GenreStories[]>();
@@ -47,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));
@@ -202,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]}> */}
@@ -297,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

@@ -1,3 +1,4 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import { router } from 'expo-router';
 import { useEffect, useState } from 'react';
 import {
@@ -10,7 +11,6 @@ import {
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import styles from './styles';
-import Icon from '../../../../assets/icons';
 import ContentCard from '../../../components/ContentCard/ContentCard';
 import PreviewCard from '../../../components/PreviewCard/PreviewCard';
 import { fetchUsername } from '../../../queries/profiles';
@@ -19,6 +19,7 @@ import {
   fetchFeaturedStoryPreviews,
   fetchNewStories,
   fetchRecommendedStories,
+  fetchStoryPreviewById,
 } from '../../../queries/stories';
 import { StoryCard, StoryPreview } from '../../../queries/types';
 import globalStyles from '../../../styles/globalStyles';
@@ -29,32 +30,97 @@ function HomeScreen() {
   const [username, setUsername] = useState('');
   const [loading, setLoading] = useState(true);
   const [featuredStories, setFeaturedStories] = useState<StoryPreview[]>([]);
+  const [recentlyViewed, setRecentlyViewed] = useState<StoryPreview[]>([]);
   const [featuredStoriesDescription, setFeaturedStoriesDescription] =
     useState<string>('');
   const [recommendedStories, setRecommendedStories] = useState<StoryCard[]>([]);
   const [newStories, setNewStories] = useState<StoryCard[]>([]);
 
+  const getRecentStory = async () => {
+    try {
+      const jsonValue = await AsyncStorage.getItem('GWN_RECENT_STORIES_ARRAY');
+      return jsonValue != null ? JSON.parse(jsonValue) : [];
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const setRecentStory = async (recentStories: StoryCard[]) => {
+    try {
+      const jsonValue = JSON.stringify(recentStories);
+      await AsyncStorage.setItem('GWN_RECENT_STORIES_ARRAY', jsonValue);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const handleStoryPreviewPressed = (story: StoryPreview) => {
+    recentlyViewedStacking(story);
+    router.push({
+      pathname: '/story',
+      params: { storyId: story.id.toString() },
+    });
+  };
+
+  const handleStoryCardPressed = async (story: StoryCard) => {
+    const newStoryArray = await fetchStoryPreviewById(story.id);
+    recentlyViewedStacking(newStoryArray[0]);
+    router.push({
+      pathname: '/story',
+      params: { storyId: story.id.toString() },
+    });
+  };
+
+  const recentlyViewedStacking = async (story: StoryPreview) => {
+    const maxArrayLength = 5;
+    const newRecentlyViewed = [...recentlyViewed];
+
+    for (let i = 0; i < recentlyViewed.length; i++) {
+      if (story.id === recentlyViewed[i].id) {
+        newRecentlyViewed.splice(i, 1);
+        break;
+      }
+    }
+
+    if (newRecentlyViewed.length >= maxArrayLength) {
+      newRecentlyViewed.splice(-1, 1);
+    }
+
+    newRecentlyViewed.splice(0, 0, story);
+
+    setRecentStory(newRecentlyViewed);
+    setRecentlyViewed(newRecentlyViewed);
+  };
+
   useEffect(() => {
+    const getRecommendedStories = async () => {
+      const recentStoryResponse = await getRecentStory();
+
+      const recommendedStoriesResponse =
+        await fetchRecommendedStories(recentStoryResponse);
+      setRecommendedStories(recommendedStoriesResponse);
+    };
+
     (async () => {
       const [
         usernameResponse,
         featuredStoryResponse,
         featuredStoryDescriptionResponse,
-        recommendedStoriesResponse,
         newStoriesResponse,
+        recentStoryResponse,
       ] = await Promise.all([
         fetchUsername(user?.id).catch(() => ''),
         fetchFeaturedStoryPreviews().catch(() => []),
         fetchFeaturedStoriesDescription().catch(() => ''),
-        fetchRecommendedStories().catch(() => []),
         fetchNewStories().catch(() => []),
+        getRecentStory(),
       ]);
-
       setUsername(usernameResponse);
       setFeaturedStories(featuredStoryResponse);
       setFeaturedStoriesDescription(featuredStoryDescriptionResponse);
-      setRecommendedStories(recommendedStoriesResponse);
       setNewStories(newStoriesResponse);
+      setRecentlyViewed(recentStoryResponse);
+      await getRecommendedStories();
     })().finally(() => {
       setLoading(false);
     });
@@ -79,20 +145,18 @@ function HomeScreen() {
           <Text style={globalStyles.h1}>
             {username ? `Welcome, ${username}` : 'Welcome!'}
           </Text>
-          <Pressable onPress={() => router.push('/settings')}>
-            <View>
-              <Icon type="settings_gear" />
-            </View>
-          </Pressable>
         </View>
 
         {featuredStories.length > 0 && (
           <View>
             <Text style={globalStyles.h3}>Featured Stories</Text>
-            <Text style={[globalStyles.body1, styles.featuredDescription]}>
-              {featuredStoriesDescription}
-            </Text>
-            <View style={{ marginRight: 24 }}>
+            {featuredStoriesDescription != null &&
+              featuredStoriesDescription.length > 0 && (
+                <Text style={[globalStyles.body1, styles.featuredDescription]}>
+                  {featuredStoriesDescription}
+                </Text>
+              )}
+            <View style={{ marginRight: 24, marginTop: 16 }}>
               {featuredStories.map(story => (
                 <PreviewCard
                   key={story.id}
@@ -105,12 +169,7 @@ function HomeScreen() {
                   tags={story.genre_medium
                     .concat(story.tone)
                     .concat(story.topic)}
-                  pressFunction={() =>
-                    router.push({
-                      pathname: '/story',
-                      params: { storyId: story.id.toString() },
-                    })
-                  }
+                  pressFunction={() => handleStoryPreviewPressed(story)}
                 />
               ))}
             </View>
@@ -129,17 +188,13 @@ function HomeScreen() {
             >
               {recommendedStories.map(story => (
                 <ContentCard
+                  id={story.id}
+                  storyId={story.id}
                   key={story.title}
                   title={story.title}
                   author={story.author_name}
                   authorImage={story.author_image}
-                  storyId={story.id}
-                  pressFunction={() =>
-                    router.push({
-                      pathname: '/story',
-                      params: { storyId: story.id.toString() },
-                    })
-                  }
+                  pressFunction={() => handleStoryCardPressed(story)}
                   image={story.featured_media}
                 />
               ))}
@@ -159,17 +214,13 @@ function HomeScreen() {
             >
               {newStories.map(story => (
                 <ContentCard
+                  id={story.id}
+                  storyId={story.id}
                   key={story.title}
                   title={story.title}
                   author={story.author_name}
                   authorImage={story.author_image}
-                  storyId={story.id}
-                  pressFunction={() =>
-                    router.push({
-                      pathname: '/story',
-                      params: { storyId: story.id.toString() },
-                    })
-                  }
+                  pressFunction={() => handleStoryCardPressed(story)}
                   image={story.featured_media}
                 />
               ))}