From ace4f8966abf1c9bbcddfeb71dcacfc11c8f4942 Mon Sep 17 00:00:00 2001
From: Aditya Pawar <apawar@berkeley.edu>
Date: Thu, 18 Apr 2024 15:48:09 -0700
Subject: [PATCH] Add default state to saved story button

---
 src/app/(tabs)/library/index.tsx                   | 3 ++-
 src/components/PreviewCard/PreviewCard.tsx         | 4 +++-
 src/components/SaveStoryButton/SaveStoryButton.tsx | 5 +++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/app/(tabs)/library/index.tsx b/src/app/(tabs)/library/index.tsx
index e8bc738..77069ec 100644
--- a/src/app/(tabs)/library/index.tsx
+++ b/src/app/(tabs)/library/index.tsx
@@ -84,7 +84,7 @@ function LibraryScreen() {
         </View>
       </View>
 
-      <View style={{ width: "100%" }}>
+      <View style={{ width: "100%", flex: 1, marginBottom: 100 }}>
         {favoritesSelected &&
           <FlatList
             data={favoriteStories}
@@ -122,6 +122,7 @@ function LibraryScreen() {
                   <PreviewCard
                     key={item.title}
                     storyId={item.id}
+                    defaultSavedStoriesState={true}
                     title={item.title}
                     image={item.featured_media}
                     author={item.author_name}
diff --git a/src/components/PreviewCard/PreviewCard.tsx b/src/components/PreviewCard/PreviewCard.tsx
index 0bfba46..7d93af8 100644
--- a/src/components/PreviewCard/PreviewCard.tsx
+++ b/src/components/PreviewCard/PreviewCard.tsx
@@ -22,6 +22,7 @@ type PreviewCardProps = {
   storyId: number;
   author: string;
   authorImage: string;
+  defaultSavedStoriesState?: boolean
   excerpt: { html: string };
   tags: string[];
   pressFunction: (event: GestureResponderEvent) => void;
@@ -35,6 +36,7 @@ function PreviewCard({
   authorImage,
   excerpt,
   tags,
+  defaultSavedStoriesState = false,
   pressFunction,
 }: PreviewCardProps) {
   return (
@@ -46,7 +48,7 @@ function PreviewCard({
           </Text>
           <TouchableOpacity style={{ alignSelf: 'flex-end' }}>
             <View>
-              <SaveStoryButton storyId={storyId} />
+              <SaveStoryButton storyId={storyId} defaultState={defaultSavedStoriesState} />
             </View>
           </TouchableOpacity>
         </View>
diff --git a/src/components/SaveStoryButton/SaveStoryButton.tsx b/src/components/SaveStoryButton/SaveStoryButton.tsx
index c4d4331..e1dd720 100644
--- a/src/components/SaveStoryButton/SaveStoryButton.tsx
+++ b/src/components/SaveStoryButton/SaveStoryButton.tsx
@@ -11,14 +11,15 @@ import { TouchableOpacity } from 'react-native-gesture-handler';
 
 type SaveStoryButtonProps = {
   storyId: number;
+  defaultState?: boolean
 };
 
 const saveStoryImage = require('../../../assets/save_story.png');
 const savedStoryImage = require('../../../assets/saved_story.png');
 
-export default function SaveStoryButton({ storyId }: SaveStoryButtonProps) {
+export default function SaveStoryButton({ storyId, defaultState = false }: SaveStoryButtonProps) {
   const { user } = useSession();
-  const [storyIsSaved, setStoryIsSaved] = useState(false);
+  const [storyIsSaved, setStoryIsSaved] = useState(defaultState);
   const { channels, initializeChannel, publish } = usePubSub();
 
   useEffect(() => {