Create SavedStoryButton componenet

calblueprint · Apr 18, 2024 · 81f3b38 · 81f3b38
1 parent 5314e98
commit 81f3b38
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 92 deletions.
diff --git a/src/components/ContentCard/ContentCard.tsx b/src/components/ContentCard/ContentCard.tsx
@@ -18,6 +18,7 @@ import { useSession } from '../../utils/AuthContext';
 import Emoji from 'react-native-emoji';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { usePubSub } from '../../utils/PubSubContext';
+import SaveStoryButton from '../SaveStoryButton/SaveStoryButton';
 
 type ContentCardProps = {
   title: string;
@@ -28,9 +29,6 @@ type ContentCardProps = {
   pressFunction: (event: GestureResponderEvent) => void;
 };
 
-const saveStoryImage = require('../../../assets/save_story.png');
-const savedStoryImage = require('../../../assets/saved_story.png');
-
 function ContentCard({
   title,
   author,
@@ -39,34 +37,6 @@ function ContentCard({
   storyId,
   pressFunction,
 }: ContentCardProps) {
-  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]);
-    }
-  }, [channels[storyId]]);
-
-  const saveStory = async (saved: boolean) => {
-    setStoryIsSaved(saved);
-    publish(storyId, saved);
-    if (saved) {
-      await addUserStoryToReadingList(user?.id, storyId);
-    } else {
-      await deleteUserStoryToReadingList(user?.id, storyId);
-    }
-  };
-
   return (
     <Pressable onPress={pressFunction}>
       <View style={styles.contentCard}>
@@ -113,18 +83,8 @@ function ContentCard({
                 </Text>
               </View>
             </View>
-            <TouchableOpacity onPress={() => saveStory(!storyIsSaved)}>
-              {storyIsSaved ? (
-                <Image
-                  style={{ width: 30, height: 30 }}
-                  source={savedStoryImage}
-                />
-              ) : (
-                <Image
-                  style={{ width: 30, height: 30 }}
-                  source={saveStoryImage}
-                />
-              )}
+            <TouchableOpacity>
+              <SaveStoryButton storyId={storyId} />
             </TouchableOpacity>
           </View>
         </View>

diff --git a/src/components/PreviewCard/PreviewCard.tsx b/src/components/PreviewCard/PreviewCard.tsx
@@ -11,7 +11,7 @@ import { Image } from 'expo-image';
 
 import styles from './styles';
 import globalStyles from '../../styles/globalStyles';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import {
   addUserStoryToReadingList,
   deleteUserStoryToReadingList,
@@ -20,6 +20,7 @@ import {
 import { useSession } from '../../utils/AuthContext';
 import { useIsFocused } from '@react-navigation/native';
 import { usePubSub } from '../../utils/PubSubContext';
+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';
@@ -47,61 +48,15 @@ function PreviewCard({
   tags,
   pressFunction,
 }: PreviewCardProps) {
-  const { user } = useSession();
-  const isFocused = useIsFocused();
-  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]);
-    }
-  }, [channels[storyId]]);
-
-  useEffect(() => {
-    isStoryInReadingList(storyId, user?.id).then(storyInReadingList =>
-      setStoryIsSaved(storyInReadingList),
-    );
-  }, [storyId, isFocused]);
-
-  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 (
     <Pressable onPress={pressFunction}>
       <View style={styles.card}>
         <View style={styles.titleContainer}>
           <Text numberOfLines={1} style={[globalStyles.h3, styles.title]}>
             {title}
           </Text>
-          <TouchableOpacity onPress={() => saveStory(!storyIsSaved)}>
-            {storyIsSaved ? (
-              <Image
-                style={{ width: 30, height: 30 }}
-                source={savedStoryImage}
-              />
-            ) : (
-              <Image
-                style={{ width: 30, height: 30 }}
-                source={saveStoryImage}
-              />
-            )}
+          <TouchableOpacity>
+            <SaveStoryButton storyId={storyId} />
           </TouchableOpacity>
         </View>
         <View style={styles.body}>

diff --git a/src/components/SaveStoryButton/SaveStoryButton.tsx b/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]);
+    }
+  }, [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>
+  );
+}