add remove bookmark, mark as bookmarked

AFK-AlignedFamKernel · Aug 31, 2024 · cb7a6a9 · cb7a6a9
1 parent 2d6533c
commit cb7a6a9
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 15 deletions.
diff --git a/apps/mobile/src/assets/icons.tsx b/apps/mobile/src/assets/icons.tsx
@@ -386,17 +386,26 @@ export const LikeIcon: React.FC<SvgProps> = (props) => {
 };
 
 export const BookmarkIcon: React.FC<SvgProps> = (props) => (
+  <Svg width="32" height="32" viewBox="0 0 21 21" {...props}>
+    <Path
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      d="M4 2C2.343 2 1 3.343 1 5v15l7-4 7 4V5c0-1.657-1.343-3-3-3H4z"
+    />
+  </Svg>
+);
+
+export const BookmarkFillIcon: React.FC<SvgProps> = (props) => (
   <Svg width="32" height="32" viewBox="0 0 21 21" {...props}>
     <Path
       fill="currentColor"
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M 6.0097656 2 C 4.9143111 2 4.0097656 2.9025988 4.0097656 3.9980469 L 4 22 L 12 19 L 20 22 L 20 20.556641 L 20 4 C 20 2.9069372 19.093063 2 18 2 L 6.0097656 2 z M 6.0097656 4 L 18 4 L 18 19.113281 L 12 16.863281 L 6.0019531 19.113281 L 6.0097656 4 z"
-      // d="M 12.8125 2 C 12.335938 2.089844 11.992188 2.511719 12 3 L 12 47 C 11.996094 47.359375 12.1875 47.691406 12.496094 47.871094 C 12.804688 48.054688 13.1875 48.054688 13.5 47.875 L 25 41.15625 L 36.5 47.875 C 36.8125 48.054688 37.195313 48.054688 37.503906 47.871094 C 37.8125 47.691406 38.003906 47.359375 38 47 L 38 3 C 38 2.449219 37.550781 2 37 2 L 13 2 C 12.96875 2 12.9375 2 12.90625 2 C 12.875 2 12.84375 2 12.8125 2 Z M 14 4 L 36 4 L 36 45.25 L 25.5 39.125 C 25.191406 38.945313 24.808594 38.945313 24.5 39.125 L 14 45.25 Z"
+      d="M4 2C2.343 2 1 3.343 1 5v15l7-4 7 4V5c0-1.657-1.343-3-3-3H4z"
     />
   </Svg>
 );
 
+
 export const LikeFillIcon: React.FC<SvgProps> = (props) => {
   return (
     <Svg width="26" height="26" viewBox="0 0 20 20" fill="none" {...props}>

diff --git a/apps/mobile/src/modules/Post/index.tsx b/apps/mobile/src/modules/Post/index.tsx
@@ -4,7 +4,7 @@ import {useQueryClient} from '@tanstack/react-query';
 import {useProfile, useReact, useReactions, useReplyNotes, useRepost, useBookmark} from 'afk_nostr_sdk';
 // import { useAuth } from '../../store/auth';
 import {useAuth} from 'afk_nostr_sdk';
-import {useMemo, useState} from 'react';
+import {useEffect, useMemo, useState} from 'react';
 import {ActivityIndicator, Image, Pressable, View} from 'react-native';
 import Animated, {
   Easing,
@@ -28,10 +28,11 @@ export type PostProps = {
   asComment?: boolean;
   event?: NDKEvent;
   repostedEventProps?:string;
-  isRepost?:boolean
+  isRepost?:boolean;
+  isBookmarked?:boolean;
 };
 
-export const Post: React.FC<PostProps> = ({asComment, event, repostedEventProps, isRepost}) => {
+export const Post: React.FC<PostProps> = ({asComment, event, repostedEventProps, isRepost, isBookmarked = false}) => {
   const repostedEvent = repostedEventProps  ?? undefined;
 
   const {theme} = useTheme();
@@ -50,7 +51,7 @@ export const Post: React.FC<PostProps> = ({asComment, event, repostedEventProps,
   const react = useReact();
   const queryClient = useQueryClient();
   const repostMutation = useRepost({ event });
-  const { bookmarkNote } = useBookmark(publicKey);  
+  const { bookmarkNote, removeBookmark } = useBookmark(publicKey);  
 
   const [menuOpen, setMenuOpen] = useState(false);
 
@@ -137,11 +138,16 @@ export const Post: React.FC<PostProps> = ({asComment, event, repostedEventProps,
   const handleBookmark = async () => {
     if (!event) return;
     try {
-      await bookmarkNote({ event });
-      showToast({title: 'Post bookmarked successfully', type: 'success'});
+      if (isBookmarked) {
+        await removeBookmark({ eventId: event.id });
+        showToast({ title: 'Post removed from bookmarks', type: 'success' });
+      } else {
+        await bookmarkNote({ event });
+        showToast({ title: 'Post bookmarked successfully', type: 'success' });
+      }
     } catch (error) {
       console.error('Bookmark error:', error);
-      showToast({title: 'Failed to bookmark', type: 'error'});
+      showToast({ title: 'Failed to bookmark', type: 'error' });
     }
   };
 
@@ -296,7 +302,10 @@ export const Post: React.FC<PostProps> = ({asComment, event, repostedEventProps,
               style={{marginHorizontal: 3}}
               onPress={handleBookmark}
             >
-              <Icon name="BookmarkIcon" size={20} title="Bookmark" />
+              <Icon
+                name={isBookmarked ? "BookmarkFillIcon" : "BookmarkIcon"}
+                size={20}
+                title={isBookmarked ? "Bookmarked" : "Bookmark"} />
             </Pressable>
           </View>
 

diff --git a/apps/mobile/src/modules/PostCard/index.tsx b/apps/mobile/src/modules/PostCard/index.tsx
@@ -8,9 +8,10 @@ import { useState } from 'react';
 export type PostCardProps = {
   event?: NDKEvent;
   isRepostProps?:boolean;
+  isBookmarked?:boolean;
 };
 
-export const PostCard: React.FC<PostCardProps> = ({ event, isRepostProps }) => {
+export const PostCard: React.FC<PostCardProps> = ({ event, isRepostProps, isBookmarked }) => {
   const styles = useStyles(stylesheet);
 
   let repostedEvent = undefined;
@@ -21,7 +22,7 @@ export const PostCard: React.FC<PostCardProps> = ({ event, isRepostProps }) => {
   }
   return (
     <View style={styles.container}>
-      <Post event={event} repostedEventProps={repostedEvent} isRepost={isRepost}/>
+      <Post event={event} repostedEventProps={repostedEvent} isRepost={isRepost} isBookmarked={isBookmarked} />
     </View>
   );
 };
diff --git a/apps/mobile/src/screens/Profile/index.tsx b/apps/mobile/src/screens/Profile/index.tsx
@@ -24,6 +24,22 @@ export const Profile: React.FC<ProfileScreenProps> = ({ route }) => {
   const reposts = useReposts({ authors: [publicKey] });
   const { bookmarksWithNotes } = useBookmark(publicKey);
 
+  // Extract all bookmarked note IDs
+  const bookmarkedNoteIds = useMemo(() => {
+    if (!bookmarksWithNotes) return new Set<string>();
+
+    const ids = new Set<string>();
+    bookmarksWithNotes.forEach(bookmark => {
+      bookmark.notes.forEach(note => {
+        ids.add(note?.id || '');
+      });
+    });
+    return ids;
+  }, [bookmarksWithNotes]);
+
+  // Function to check if a note is bookmarked
+  const isBookmarked = (noteId: string) => bookmarkedNoteIds.has(noteId);
+
   const getData = ndkKinds.includes(NDKKind.BookmarkList) || ndkKinds.includes(NDKKind.BookmarkSet)
     ? bookmarksWithNotes?.map(bookmark => bookmark.notes).flat() || []
     : search.data?.pages.flat();
@@ -69,7 +85,7 @@ export const Profile: React.FC<ProfileScreenProps> = ({ route }) => {
             const itemReposted = JSON.parse(item?.content);
             return <PostCard key={item?.id} event={itemReposted} isRepostProps={true} />
           }
-          return <PostCard key={item?.id} event={item} />
+          return <PostCard key={item?.id} event={item} isBookmarked={isBookmarked(item.id)} />
         }}
         refreshControl={
           <RefreshControl refreshing={search.isFetching} onRefresh={() => search.refetch()} />