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

hoarder-app · Aug 24, 2024 · d8cf7c1 · d8cf7c1
1 parent 6fba4aa
commit d8cf7c1
Show file tree

Hide file tree

Showing 4 changed files with 122 additions and 32 deletions.
diff --git 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
@@ -114,9 +114,21 @@ 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",

diff --git 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({

diff --git a/packages/shared-react/hooks/bookmarks.ts b/packages/shared-react/hooks/bookmarks.ts
@@ -21,6 +21,20 @@ export function useAutoRefreshingBookmarkQuery(
   });
 }
 
+export function useCreateBookmark(
+  ...opts: Parameters<typeof api.bookmarks.createBookmark.useMutation>
+) {
+  const apiUtils = api.useUtils();
+  return api.bookmarks.createBookmark.useMutation({
+    ...opts[0],
+    onSuccess: (res, req, meta) => {
+      apiUtils.bookmarks.getBookmarks.invalidate();
+      apiUtils.bookmarks.searchBookmarks.invalidate();
+      return opts[0]?.onSuccess?.(res, req, meta);
+    },
+  });
+}
+
 export function useCreateBookmarkWithPostHook(
   ...opts: Parameters<typeof api.bookmarks.createBookmark.useMutation>
 ) {
@@ -67,6 +81,21 @@ export function useUpdateBookmark(
   });
 }
 
+export function useUpdateBookmarkText(
+  ...opts: Parameters<typeof api.bookmarks.updateBookmarkText.useMutation>
+) {
+  const apiUtils = api.useUtils();
+  return api.bookmarks.updateBookmarkText.useMutation({
+    ...opts[0],
+    onSuccess: (res, req, meta) => {
+      apiUtils.bookmarks.getBookmarks.invalidate();
+      apiUtils.bookmarks.searchBookmarks.invalidate();
+      apiUtils.bookmarks.getBookmark.invalidate({ bookmarkId: req.bookmarkId });
+      return opts[0]?.onSuccess?.(res, req, meta);
+    },
+  });
+}
+
 export function useRecrawlBookmark(
   ...opts: Parameters<typeof api.bookmarks.recrawlBookmark.useMutation>
 ) {