[saved] Implement saved story button (#79)

* Implemented save story button

* Move story image to assets

* Add save story to preview card, one home screen viewing bug

* Add pubsub to sync preview and content cards

* Bug fixes

* Refactor

* Create SavedStoryButton componenet

* Remove unused imports

* Fix type errors

---------

Co-authored-by: Aditya Pawar <[email protected]>
Co-authored-by: Aditya Pawar <[email protected]>

package.json

@@ -68,7 +68,8 @@
     "react-native-vector-icons": "^10.0.2",
     "react-scroll-to-top": "^3.0.0",
     "use-debounce": "^10.0.0",
-    "validator": "^13.11.0"
+    "validator": "^13.11.0",
+    "expo-image": "~1.3.5"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

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

@@ -122,6 +122,7 @@ function AuthorScreen() {
           {authorStoryPreview?.map(story => (
             <PreviewCard
               key={story.title}
+              storyId={story.id}
               title={story.title}
               image={story.featured_media}
               author={story.author_name}

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

@@ -272,6 +272,7 @@ function GenreScreen() {
         renderItem={({ item }) => (
           <PreviewCard
             key={item.id}
+            storyId={item.id}
             tags={item.genre_medium.concat(item.tone).concat(item.topic)}
             author={item.author_name}
             image={item.featured_media}

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

@@ -96,6 +96,7 @@ function HomeScreen() {
               {featuredStories.map(story => (
                 <PreviewCard
                   key={story.id}
+                  storyId={story.id}
                   title={story.title}
                   image={story.featured_media}
                   author={story.author_name}
@@ -132,6 +133,7 @@ function HomeScreen() {
                   title={story.title}
                   author={story.author_name}
                   authorImage={story.author_image}
+                  storyId={story.id}
                   pressFunction={() =>
                     router.push({
                       pathname: '/story',
@@ -161,6 +163,7 @@ function HomeScreen() {
                   title={story.title}
                   author={story.author_name}
                   authorImage={story.author_image}
+                  storyId={story.id}
                   pressFunction={() =>
                     router.push({
                       pathname: '/story',

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

@@ -306,6 +306,7 @@ function SearchScreen() {
                 {recentlyViewed.map(item => (
                   <PreviewCard
                     key={item.title}
+                    storyId={item.id}
                     title={item.title}
                     image={item.featured_media}
                     author={item.author_name}
@@ -395,7 +396,8 @@ function SearchScreen() {
             contentContainerStyle={styles.contentCotainerStories}
             renderItem={({ item }) => (
               <PreviewCard
-                key={item.title}
+                key={item.id}
+                storyId={item.id}
                 title={item.title}
                 image={item.featured_media}
                 author={item.author_name}

src/app/_layout.tsx

@@ -2,18 +2,21 @@ import { Stack } from 'expo-router';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import { AuthContextProvider } from '../utils/AuthContext';
+import { BooleanPubSubProvider } from '../utils/PubSubContext';
 import ToastComponent from '../components/Toast/Toast';
 import { Keyboard, TouchableWithoutFeedback } from 'react-native';
 
 function StackLayout() {
   return (
     <SafeAreaProvider>
       <AuthContextProvider>
-        <Stack>
-          <Stack.Screen name="index" options={{ headerShown: false }} />
-          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-          <Stack.Screen name="auth" options={{ headerShown: false }} />
-        </Stack>
+        <BooleanPubSubProvider>
+          <Stack>
+            <Stack.Screen name="index" options={{ headerShown: false }} />
+            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+            <Stack.Screen name="auth" options={{ headerShown: false }} />
+          </Stack>
+        </BooleanPubSubProvider>
       </AuthContextProvider>
       <ToastComponent />
     </SafeAreaProvider>

src/components/AuthorCard/AuthorCard.tsx

@@ -1,7 +1,5 @@
-import { Image, Pressable, Text, View } from 'react-native';
-
+import { Image, Text, View } from 'react-native';
 import styles from './styles';
-import globalStyles from '../../styles/globalStyles';
 
 type AuthorCardProps = {
   name: string;

src/components/ContentCard/ContentCard.tsx

@@ -1,21 +1,23 @@
 import {
   GestureResponderEvent,
-  Image,
   Pressable,
   Text,
   View,
   TouchableOpacity,
 } from 'react-native';
+import { Image } from 'expo-image';
 
 import styles from './styles';
 import globalStyles from '../../styles/globalStyles';
 import Emoji from 'react-native-emoji';
+import SaveStoryButton from '../SaveStoryButton/SaveStoryButton';
 
 type ContentCardProps = {
   title: string;
   author: string;
   image: string;
   authorImage: string;
+  storyId: number;
   pressFunction: (event: GestureResponderEvent) => void;
 };
 
@@ -24,12 +26,9 @@ function ContentCard({
   author,
   image,
   authorImage,
+  storyId,
   pressFunction,
 }: ContentCardProps) {
-  const saveStory = () => {
-    console.log("testing '+' icon does something for story " + title);
-  };
-
   return (
     <Pressable onPress={pressFunction}>
       <View style={styles.contentCard}>
@@ -76,11 +75,8 @@ function ContentCard({
                 </Text>
               </View>
             </View>
-            <TouchableOpacity onPress={() => saveStory()}>
-              <Image
-                style={styles.saveStoryImage}
-                source={require('./savedStoriesIcon.png')}
-              />
+            <TouchableOpacity>
+              <SaveStoryButton storyId={storyId} />
             </TouchableOpacity>
           </View>
         </View>

src/components/PreviewCard/PreviewCard.tsx

@@ -1,23 +1,25 @@
 import * as cheerio from 'cheerio';
 import {
   GestureResponderEvent,
-  Image,
   Pressable,
   Text,
   TouchableOpacity,
   View,
 } from 'react-native';
 import Emoji from 'react-native-emoji';
+import { Image } from 'expo-image';
 
 import styles from './styles';
 import globalStyles from '../../styles/globalStyles';
+import SaveStoryButton from '../SaveStoryButton/SaveStoryButton';
 
 const placeholderImage =
   'https://gwn-uploads.s3.amazonaws.com/wp-content/uploads/2021/10/10120952/Girls-Write-Now-logo-avatar.png';
 
 type PreviewCardProps = {
   title: string;
   image: string;
+  storyId: number;
   author: string;
   authorImage: string;
   excerpt: { html: string };
@@ -28,28 +30,22 @@ type PreviewCardProps = {
 function PreviewCard({
   title,
   image,
+  storyId,
   author,
   authorImage,
   excerpt,
   tags,
   pressFunction,
 }: PreviewCardProps) {
-  const saveStory = () => {
-    console.log("testing '+' icon does something for story " + title);
-  };
-
   return (
     <Pressable onPress={pressFunction}>
       <View style={styles.card}>
         <View style={styles.titleContainer}>
           <Text numberOfLines={1} style={[globalStyles.h3, styles.title]}>
             {title}
           </Text>
-          <TouchableOpacity onPress={() => saveStory()}>
-            <Image
-              style={{ width: 30, height: 30 }}
-              source={require('./savedStoriesIcon.png')}
-            />
+          <TouchableOpacity>
+            <SaveStoryButton storyId={storyId} />
           </TouchableOpacity>
         </View>
         <View style={styles.body}>

src/components/PreviewCard/styles.ts

@@ -50,9 +50,11 @@ const styles = StyleSheet.create({
     paddingTop: 16,
     paddingLeft: 12,
     paddingRight: 12,
+    paddingBottom: 8,
     borderBottomColor: '#EBEBEB',
     borderBottomWidth: StyleSheet.hairlineWidth,
     flexDirection: 'row',
+    flexGrow: 1,
     justifyContent: 'space-between',
   },
   tag: {

src/components/SaveStoryButton/SaveStoryButton.tsx

@@ -0,0 +1,64 @@
+import { useEffect, useState } from 'react';
+import {
+  addUserStoryToReadingList,
+  deleteUserStoryToReadingList,
+  isStoryInReadingList,
+} from '../../queries/savedStories';
+import { usePubSub } from '../../utils/PubSubContext';
+import { useSession } from '../../utils/AuthContext';
+import { Image } from 'expo-image';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+
+type SaveStoryButtonProps = {
+  storyId: number;
+};
+
+const saveStoryImage = require('../../../assets/save_story.png');
+const savedStoryImage = require('../../../assets/saved_story.png');
+
+export default function SaveStoryButton({ storyId }: SaveStoryButtonProps) {
+  const { user } = useSession();
+  const [storyIsSaved, setStoryIsSaved] = useState(false);
+  const { channels, initializeChannel, publish } = usePubSub();
+
+  useEffect(() => {
+    isStoryInReadingList(storyId, user?.id).then(storyInReadingList => {
+      setStoryIsSaved(storyInReadingList);
+      initializeChannel(storyId);
+    });
+  }, [storyId]);
+
+  useEffect(() => {
+    // if another card updates this story, update it here also
+    if (typeof channels[storyId] !== 'undefined') {
+      setStoryIsSaved(channels[storyId] ?? false);
+    }
+  }, [channels[storyId]]);
+
+  useEffect(() => {
+    isStoryInReadingList(storyId, user?.id).then(storyInReadingList =>
+      setStoryIsSaved(storyInReadingList),
+    );
+  }, [storyId]);
+
+  const saveStory = async (saved: boolean) => {
+    setStoryIsSaved(saved);
+    publish(storyId, saved); // update other cards with this story
+
+    if (saved) {
+      await addUserStoryToReadingList(user?.id, storyId);
+    } else {
+      await deleteUserStoryToReadingList(user?.id, storyId);
+    }
+  };
+
+  return (
+    <TouchableOpacity onPress={() => saveStory(!storyIsSaved)}>
+      {storyIsSaved ? (
+        <Image style={{ width: 30, height: 30 }} source={savedStoryImage} />
+      ) : (
+        <Image style={{ width: 30, height: 30 }} source={saveStoryImage} />
+      )}
+    </TouchableOpacity>
+  );
+}

src/queries/reactions.tsx

@@ -53,7 +53,7 @@ export async function fetchAllReactionsToStory(
       `An error occured when trying to fetch reactions to a story', ${error}`,
     );
   } else {
-    return data;
+    return data as Reactions[];
   }
 }