Fix bookmarks

- Add bookmark feed query key to invalidation
- Fix bookmark item onShare
- Add haptics to onShare
- Fix bookmark item comments
- Fix bookmark share mutation

src/app/(auth)/profile/bookmarks/index.tsx

@@ -1,27 +1,106 @@
-import { useInfiniteQuery } from '@tanstack/react-query'
+import { BottomSheetBackdrop, BottomSheetModal } from '@gorhom/bottom-sheet'
+import { useInfiniteQuery, useMutation } from '@tanstack/react-query'
+import * as Haptics from 'expo-haptics'
 //@ts-check
-import { Stack, useNavigation } from 'expo-router'
-import { useCallback, useLayoutEffect } from 'react'
-import { ActivityIndicator, FlatList } from 'react-native'
+import { Stack, useNavigation, useRouter } from 'expo-router'
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { ActivityIndicator, FlatList, Platform } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
+import CommentFeed from 'src/components/post/CommentFeed'
 import FeedPost from 'src/components/post/FeedPost'
-import { getSelfBookmarks } from 'src/lib/api'
+import { getSelfBookmarks, reblogStatus, unreblogStatus } from 'src/lib/api'
 import { useUserCache } from 'src/state/AuthProvider'
 import { Text, View } from 'tamagui'
 
-export default function LikesScreen() {
+export default function BookmarksScreen() {
   const navigation = useNavigation()
+  const router = useRouter()
+  const [replyId, setReplyId] = useState<string | undefined>()
   useLayoutEffect(() => {
     navigation.setOptions({ title: 'My Bookmarks', headerBackTitle: 'Back' })
   }, [navigation])
   const user = useUserCache()
+
+  const bottomSheetModalRef = useRef<BottomSheetModal>(null)
+  const snapPoints = useMemo(
+    () => (Platform.OS === 'ios' ? ['50%', '85%'] : ['64%', '65%', '66%']),
+    []
+  )
+
+  const handleSheetChanges = useCallback((index: number) => {}, [])
+  const renderBackdrop = useCallback(
+    (props: any) => (
+      <BottomSheetBackdrop {...props} disappearsOnIndex={-1} appearsOnIndex={1} />
+    ),
+    []
+  )
+
+  const onOpenComments = useCallback(
+    (id: string) => {
+      setReplyId(id)
+      bottomSheetModalRef.current?.present()
+    },
+    [replyId]
+  )
+
+  const onShare = (id: string, state: string) => {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium)
+    try {
+      shareMutation.mutate({ type: state == true ? 'unreblog' : 'reblog', id: id })
+    } catch (error) {
+      console.error('Error occurred during share:', error)
+    }
+  }
+
+  const handleShowLikes = (id) => {
+    bottomSheetModalRef.current?.close()
+    router.push(`/post/likes/${id}`)
+  }
+
+  const handleGotoProfile = (id: string) => {
+    bottomSheetModalRef.current?.close()
+    router.push(`/profile/${id}`)
+  }
+
+  const handleGotoUsernameProfile = (username: string) => {
+    bottomSheetModalRef.current?.close()
+    router.push(`/profile/0?byUsername=${username}`)
+  }
+
+  const gotoHashtag = (id: string) => {
+    bottomSheetModalRef.current?.close()
+    router.push(`/hashtag/${id}`)
+  }
+
+  const handleCommentReport = (id: string) => {
+    bottomSheetModalRef.current?.close()
+    router.push(`/post/report/${id}`)
+  }
+
+  const shareMutation = useMutation({
+    mutationFn: async (handleShare) => {
+      try {
+        return handleShare.type === 'reblog'
+          ? await reblogStatus(handleShare)
+          : await unreblogStatus(handleShare)
+      } catch (error) {
+        console.error('Error within mutationFn:', error)
+        throw error
+      }
+    },
+    onError: (error) => {
+      console.error('Error handled by share useMutation:', error)
+    },
+  })
+
   const renderItem = useCallback(
     ({ item }) => (
       <FeedPost
         post={item}
         user={user}
         onOpenComments={() => onOpenComments(item.id)}
         onDeletePost={() => onDeletePost(item.id)}
+        onShare={() => onShare(item.id, item.reblogged)}
       />
     ),
     []
@@ -84,6 +163,26 @@ export default function LikesScreen() {
           isFetchingNextPage ? <ActivityIndicator /> : <View h={200} />
         }
       />
+
+      <BottomSheetModal
+        ref={bottomSheetModalRef}
+        index={Platform.OS === 'ios' ? 1 : 0}
+        keyboardBehavior={Platform.OS === 'ios' ? 'extend' : 'interactive'}
+        android_keyboardInputMode="adjustResize"
+        snapPoints={snapPoints}
+        onChange={handleSheetChanges}
+        backdropComponent={renderBackdrop}
+      >
+        <CommentFeed
+          id={replyId}
+          showLikes={handleShowLikes}
+          gotoProfile={handleGotoProfile}
+          gotoUsernameProfile={handleGotoUsernameProfile}
+          gotoHashtag={gotoHashtag}
+          user={user}
+          handleReport={handleCommentReport}
+        />
+      </BottomSheetModal>
     </SafeAreaView>
   )
 }

src/hooks/mutations/useLikeMutation.ts

@@ -58,6 +58,7 @@ export function useLikeMutation({ onSuccess }: { onSuccess?: onSuccessType } = {
       const queryKeys = [
         ['homeFeed'],
         ['fetchNetworkFeed'],
+        ['getSelfBookmarks'],
         ['getStatusById', newLike.id],
       ]
 
@@ -107,6 +108,7 @@ export function useLikeMutation({ onSuccess }: { onSuccess?: onSuccessType } = {
       const queryKeys = [
         ['homeFeed'],
         ['fetchNetworkFeed'],
+        ['getSelfBookmarks'],
         ['getStatusById', variables.id],
       ]