feat: bookmark button

bambu-group-03 · Dec 5, 2023 · c07a243 · c07a243
1 parent 8e9d4ae
commit c07a243
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 74 deletions.
diff --git a/src/api/snaps/types.ts b/src/api/snaps/types.ts
@@ -8,6 +8,7 @@ export type Snap = {
   created_at: string;
   likes: number;
   has_liked: boolean;
+  has_faved: boolean;
   shares: number;
   has_shared: boolean;
   favs: number;

diff --git a/src/screens/feed/card.tsx b/src/screens/feed/card.tsx
@@ -27,6 +27,12 @@ export const Card = ({
     snap.num_replies || 0
   );
 
+  const [isFavedBookmark, setFavedBookmark] = useState<boolean>(
+    snap.has_faved || false
+  );
+
+  // Verificar si ya esta bookmarked
+
   const formattedDate = new Date(snap.created_at).toLocaleDateString('en-US', {
     year: 'numeric',
     month: '2-digit',
@@ -37,6 +43,7 @@ export const Card = ({
     setIsLiked(snap.has_liked);
     setIsReSnaped(snap.has_shared);
     setCommentCount(snap.num_replies);
+    setFavedBookmark(snap.has_faved);
   }, [snap]);
 
   const handleResnap = async () => {
@@ -61,6 +68,16 @@ export const Card = ({
     await client.content({ url, method });
   };
 
+  const handleFavBookmark = async () => {
+    const interaction = isFavedBookmark ? '/unfav/' : '/fav/';
+    const method = isFavedBookmark ? 'DELETE' : 'POST';
+
+    const url = `/api/interactions/${currentUser?.id}${interaction}${snap.id}`;
+    setFavedBookmark(!isFavedBookmark); //Optimistic update
+
+    await client.content({ url, method });
+  };
+
   return (
     <Pressable className="flex shrink-0 p-4 pb-0" onPress={onPress}>
       <CardHeader snap={snap} formattedDate={formattedDate} />
@@ -71,8 +88,10 @@ export const Card = ({
           isLiked={isLiked}
           isReSnaped={isReSnaped}
           commentCount={commentCount}
+          isFavBookmarked={isFavedBookmark}
           onResnap={handleResnap}
           onLike={handleLike}
+          onFavBookmark={handleFavBookmark}
         />
       </View>
     </Pressable>

diff --git a/src/screens/feed/components/card/card-footer.tsx b/src/screens/feed/components/card/card-footer.tsx
@@ -9,6 +9,7 @@ import type { Snap } from '@/api';
 import { Button, View } from '@/ui';
 
 import CommentButton from './comment-button';
+import FavBookmarkButton from './fav-bookmark-button';
 import HeartButton from './heart-button';
 import ResnapButton from './re-snap-button';
 
@@ -18,18 +19,22 @@ type CardFooterProps = {
   snap: Snap;
   isLiked: boolean;
   isReSnaped: boolean;
+  isFavBookmarked: boolean;
   commentCount: number;
   onResnap: () => void;
   onLike: () => void;
+  onFavBookmark: () => void;
 };
 
 export const CardFooter: React.FC<CardFooterProps> = ({
   snap,
   isLiked,
   isReSnaped,
   commentCount,
+  isFavBookmarked,
   onResnap,
   onLike,
+  onFavBookmark,
 }) => {
   return (
     <View className="mt-2 flex border-t border-gray-200">
@@ -59,10 +64,14 @@ export const CardFooter: React.FC<CardFooterProps> = ({
               />
             )}
           </View>
+          <FavBookmarkButton
+            isFavBookmarked={isFavBookmarked}
+            onPress={onFavBookmark}
+          />
         </View>
       </View>
     </View>
   );
 };
 
-export default CardFooter;
+export default CardFooter;
diff --git a/src/screens/feed/components/card/fav-bookmark-button.tsx b/src/screens/feed/components/card/fav-bookmark-button.tsx
@@ -0,0 +1,33 @@
+import { faBookmark } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
+import React from 'react';
+
+import { Button, View } from '@/ui';
+
+type FavBookmarkButtonProps = {
+  isFavBookmarked: boolean;
+  onPress: () => void;
+};
+
+const FavBookmarkButton: React.FC<FavBookmarkButtonProps> = ({
+  isFavBookmarked,
+
+  onPress,
+}) => {
+  return (
+    <View className="duration-350 flex flex-row items-center px-2 text-xs text-gray-400 transition ease-in-out hover:text-blue-400 dark:text-white dark:hover:text-blue-400">
+      <Button
+        variant="icon"
+        onPress={onPress}
+        label={
+          <FontAwesomeIcon
+            icon={faBookmark}
+            color={isFavBookmarked ? 'red' : 'black'}
+          />
+        }
+      />
+    </View>
+  );
+};
+
+export default FavBookmarkButton;
diff --git a/src/screens/profile/components/card-profile.tsx b/src/screens/profile/components/card-profile.tsx
@@ -29,6 +29,10 @@ export const CardProfile = ({
     snap.num_replies || 0
   );
 
+  const [isFavedBookmark, setFavedBookmark] = useState<boolean>(
+    snap.has_faved || false
+  );
+
   const formattedDate = new Date(snap.created_at).toLocaleDateString('en-US', {
     year: 'numeric',
     month: '2-digit',
@@ -39,6 +43,7 @@ export const CardProfile = ({
     setIsLiked(snap.has_liked);
     setIsReSnaped(snap.has_shared);
     setCommentCount(snap.num_replies);
+    setFavedBookmark(snap.has_faved);
   }, [snap]);
 
   const handleResnap = async () => {
@@ -63,6 +68,16 @@ export const CardProfile = ({
     await client.content({ url, method });
   };
 
+  const handleFavBookmark = async () => {
+    const interaction = isFavedBookmark ? '/unfav/' : '/fav/';
+    const method = isFavedBookmark ? 'DELETE' : 'POST';
+
+    const url = `/api/interactions/${currentUser?.id}${interaction}${snap.id}`;
+    setFavedBookmark(!isFavedBookmark); //Optimistic update
+
+    await client.content({ url, method });
+  };
+
   return (
     <Pressable className="flex shrink-0 p-4 pb-0" onPress={onPress}>
       <CardHeaderProfile
@@ -77,8 +92,10 @@ export const CardProfile = ({
           isLiked={isLiked}
           isReSnaped={isReSnaped}
           commentCount={commentCount}
+          isFavBookmarked={isFavedBookmark}
           onResnap={handleResnap}
           onLike={handleLike}
+          onFavBookmark={handleFavBookmark}
         />
       </View>
     </Pressable>

diff --git a/src/screens/profile/other-graph.tsx b/src/screens/profile/other-graph.tsx