feature(mobile): Allow editing notes from the mobile app

3 files changed, 93 insertions, 32 deletions

diff --git a/apps/mobile/app/dashboard/add-note.tsx b/apps/mobile/app/dashboard/add-note.tsx
index 62296fd4..8aa31936 100644
--- a/apps/mobile/app/dashboard/add-note.tsx
+++ b/apps/mobile/app/dashboard/add-note.tsx
@@ -1,28 +1,68 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Text, View } from "react-native";
-import { useRouter } from "expo-router";
+import { Stack, useLocalSearchParams, useRouter } from "expo-router";
 import { Button } from "@/components/ui/Button";
 import { Input } from "@/components/ui/Input";
 import { api } from "@/lib/trpc";
 
+import {
+  useCreateBookmark,
+  useUpdateBookmarkText,
+} from "@hoarder/shared-react/hooks/bookmarks";
 import { BookmarkTypes } from "@hoarder/shared/types/bookmarks";
 
 export default function AddNote() {
+  const { bookmarkId } = useLocalSearchParams();
+  if (bookmarkId && typeof bookmarkId !== "string") {
+    throw new Error("Unexpected param type");
+  }
+
+  const isEditing = !!bookmarkId;
+
   const [text, setText] = useState("");
   const [error, setError] = useState<string | undefined>();
   const router = useRouter();
-  const invalidateAllBookmarks =
-    api.useUtils().bookmarks.getBookmarks.invalidate;
-
-  const { mutate } = api.bookmarks.createBookmark.useMutation({
-    onSuccess: () => {
-      invalidateAllBookmarks();
-      if (router.canGoBack()) {
-        router.replace("../");
+
+  const { data: bookmark } = api.bookmarks.getBookmark.useQuery(
+    { bookmarkId: bookmarkId! },
+    {
+      enabled: !!bookmarkId,
+    },
+  );
+
+  useEffect(() => {
+    if (bookmark) {
+      if (bookmark.content.type !== BookmarkTypes.TEXT) {
+        throw new Error("Wrong content type rendered");
+      }
+      setText(bookmark.content.text);
+    }
+  }, [bookmark]);
+
+  const onSuccess = () => {
+    if (router.canGoBack()) {
+      router.replace("./");
+    } else {
+      router.replace("dashboard");
+    }
+  };
+
+  const { mutate: createBookmark } = useCreateBookmark({
+    onSuccess,
+    onError: (e) => {
+      let message;
+      if (e.data?.zodError) {
+        const zodError = e.data.zodError;
+        message = JSON.stringify(zodError);
       } else {
-        router.replace("dashboard");
+        message = `Something went wrong: ${e.message}`;
       }
+      setError(message);
     },
+  });
+
+  const { mutate: updateBookmark } = useUpdateBookmarkText({
+    onSuccess,
     onError: (e) => {
       let message;
       if (e.data?.zodError) {
@@ -35,8 +75,24 @@ export default function AddNote() {
     },
   });
 
+  const mutate = (text: string) => {
+    if (isEditing) {
+      updateBookmark({
+        bookmarkId,
+        text,
+      });
+    } else {
+      createBookmark({ type: BookmarkTypes.TEXT, text });
+    }
+  };
+
   return (
     <View className="flex gap-2 p-4">
+      <Stack.Screen
+        options={{
+          title: isEditing ? "Edit Note" : "Add Note",
+        }}
+      />
       {error && (
         <Text className="w-full text-center text-red-500">{error}</Text>
       )}
@@ -50,8 +106,8 @@ export default function AddNote() {
         textAlignVertical="top"
       />
       <Button
-        onPress={() => mutate({ type: BookmarkTypes.TEXT, text })}
-        label="Add Note"
+        onPress={() => mutate(text)}
+        label={isEditing ? "Save" : "Add Note"}
       />
     </View>
   );
diff --git a/apps/mobile/components/bookmarks/BookmarkCard.tsx b/apps/mobile/components/bookmarks/BookmarkCard.tsx
index 860e5486..ed6a3b2c 100644
--- a/apps/mobile/components/bookmarks/BookmarkCard.tsx
+++ b/apps/mobile/components/bookmarks/BookmarkCard.tsx
@@ -114,10 +114,22 @@ function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
             });
           } else if (nativeEvent.event === "manage_list") {
             manageListsSheetRef?.current?.present();
+          } else if (nativeEvent.event === "edit") {
+            router.push(`/dashboard/add-note?bookmarkId=${bookmark.id}`);
           }
         }}
         actions={[
           {
+            id: "edit",
+            title: "Edit",
+            image: Platform.select({
+              ios: "edit",
+            }),
+            attributes: {
+              hidden: bookmark.content.type !== BookmarkTypes.TEXT,
+            },
+          },
+          {
             id: "archive",
             title: bookmark.archived ? "Un-archive" : "Archive",
             image: Platform.select({
diff --git a/apps/web/components/dashboard/bookmarks/BookmarkedTextEditor.tsx b/apps/web/components/dashboard/bookmarks/BookmarkedTextEditor.tsx
index 74e94f94..e0434943 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarkedTextEditor.tsx
+++ b/apps/web/components/dashboard/bookmarks/BookmarkedTextEditor.tsx
@@ -12,8 +12,8 @@ import {
 } from "@/components/ui/dialog";
 import { Textarea } from "@/components/ui/textarea";
 import { toast } from "@/components/ui/use-toast";
-import { api } from "@/lib/trpc";
 
+import { useUpdateBookmarkText } from "@hoarder/shared-react/hooks/bookmarks";
 import { BookmarkTypes, ZBookmark } from "@hoarder/shared/types/bookmarks";
 
 export function BookmarkedTextEditor({
@@ -32,24 +32,17 @@ export function BookmarkedTextEditor({
       : "",
   );
 
-  const invalidateOneBookmarksCache =
-    api.useUtils().bookmarks.getBookmark.invalidate;
-
-  const { mutate: updateBookmarkMutator, isPending } =
-    api.bookmarks.updateBookmarkText.useMutation({
-      onSuccess: () => {
-        invalidateOneBookmarksCache({
-          bookmarkId: bookmark.id,
-        });
-        toast({
-          description: "Note updated!",
-        });
-        setOpen(false);
-      },
-      onError: () => {
-        toast({ description: "Something went wrong", variant: "destructive" });
-      },
-    });
+  const { mutate: updateBookmarkMutator, isPending } = useUpdateBookmarkText({
+    onSuccess: () => {
+      toast({
+        description: "Note updated!",
+      });
+      setOpen(false);
+    },
+    onError: () => {
+      toast({ description: "Something went wrong", variant: "destructive" });
+    },
+  });
 
   const onSave = () => {
     updateBookmarkMutator({