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

2 files changed, 81 insertions, 13 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({