feature: Extract hook logic into separate package and add a new actio…

…n bar in bookmark preview

apps/browser-extension/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@hoarder/trpc": "workspace:^0.1.0",
+    "@hoarder/shared-react": "workspace:^0.1.0",
     "@tanstack/react-query": "^5.24.8",
     "@trpc/client": "11.0.0-next-beta.308",
     "@trpc/next": "11.0.0-next-beta.308",

apps/browser-extension/src/BookmarkSavedPage.tsx

@@ -2,24 +2,24 @@ import { useState } from "react";
 import { ArrowUpRightFromSquare, Trash } from "lucide-react";
 import { Link, useNavigate, useParams } from "react-router-dom";
 
+import { useDeleteBookmark } from "@hoarder/shared-react/hooks/bookmarks";
+
 import Spinner from "./Spinner";
 import usePluginSettings from "./utils/settings";
-import { api } from "./utils/trpc";
 
 export default function BookmarkSavedPage() {
   const { bookmarkId } = useParams();
   const navigate = useNavigate();
   const [error, setError] = useState("");
 
-  const { mutate: deleteBookmark, isPending } =
-    api.bookmarks.deleteBookmark.useMutation({
-      onSuccess: () => {
-        navigate("/bookmarkdeleted");
-      },
-      onError: (e) => {
-        setError(e.message);
-      },
-    });
+  const { mutate: deleteBookmark, isPending } = useDeleteBookmark({
+    onSuccess: () => {
+      navigate("/bookmarkdeleted");
+    },
+    onError: (e) => {
+      setError(e.message);
+    },
+  });
 
   const { settings } = usePluginSettings();
 

apps/mobile/components/bookmarks/BookmarkCard.tsx

@@ -17,6 +17,10 @@ import { MenuView } from "@react-native-menu/menu";
 import { Ellipsis, Star } from "lucide-react-native";
 
 import type { ZBookmark } from "@hoarder/trpc/types/bookmarks";
+import {
+  useDeleteBookmark,
+  useUpdateBookmark,
+} from "@hoarder/shared-react/hooks/bookmarks";
 
 import { Divider } from "../ui/Divider";
 import { Skeleton } from "../ui/Skeleton";
@@ -45,7 +49,6 @@ export function isBookmarkStillLoading(bookmark: ZBookmark) {
 
 function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
   const { toast } = useToast();
-  const apiUtils = api.useUtils();
 
   const onError = () => {
     toast({
@@ -56,37 +59,27 @@ function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
   };
 
   const { mutate: deleteBookmark, isPending: isDeletionPending } =
-    api.bookmarks.deleteBookmark.useMutation({
+    useDeleteBookmark({
       onSuccess: () => {
         toast({
           message: "The bookmark has been deleted!",
           showProgress: false,
         });
-        apiUtils.bookmarks.getBookmarks.invalidate();
-        apiUtils.bookmarks.searchBookmarks.invalidate();
       },
       onError,
     });
 
-  const { mutate: favouriteBookmark, variables } =
-    api.bookmarks.updateBookmark.useMutation({
-      onSuccess: () => {
-        apiUtils.bookmarks.getBookmarks.invalidate();
-        apiUtils.bookmarks.getBookmark.invalidate({ bookmarkId: bookmark.id });
-      },
-      onError,
-    });
+  const { mutate: favouriteBookmark, variables } = useUpdateBookmark({
+    onError,
+  });
 
   const { mutate: archiveBookmark, isPending: isArchivePending } =
-    api.bookmarks.updateBookmark.useMutation({
+    useUpdateBookmark({
       onSuccess: (resp) => {
         toast({
           message: `The bookmark has been ${resp.archived ? "archived" : "un-archived"}!`,
           showProgress: false,
         });
-        apiUtils.bookmarks.getBookmarks.invalidate();
-        apiUtils.bookmarks.getBookmark.invalidate({ bookmarkId: bookmark.id });
-        apiUtils.bookmarks.searchBookmarks.invalidate();
       },
       onError,
     });

apps/mobile/package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@hoarder/trpc": "workspace:^0.1.0",
+    "@hoarder/shared-react": "workspace:^0.1.0",
     "@react-native-menu/menu": "^0.9.1",
     "@tanstack/react-query": "^5.24.8",
     "class-variance-authority": "^0.7.0",

apps/web/app/dashboard/preview/[bookmarkId]/page.tsx

@@ -1,4 +1,4 @@
-import BookmarkPreview from "@/components/dashboard/bookmarks/BookmarkPreview";
+import BookmarkPreview from "@/components/dashboard/preview/BookmarkPreview";
 import { api } from "@/server/api/client";
 
 export default async function BookmarkPreviewPage({

apps/web/components/dashboard/bookmarks/BookmarkActionBar.tsx

@@ -1,11 +1,12 @@
+import BookmarkPreview from "@/components/dashboard/preview/BookmarkPreview";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
-import { Maximize2, Star } from "lucide-react";
+import { Maximize2 } from "lucide-react";
 
 import type { ZBookmark } from "@hoarder/trpc/types/bookmarks";
 
 import BookmarkOptions from "./BookmarkOptions";
-import BookmarkPreview from "./BookmarkPreview";
+import { FavouritedActionIcon } from "./icons";
 
 export default function BookmarkActionBar({
   bookmark,
@@ -15,11 +16,7 @@ export default function BookmarkActionBar({
   return (
     <div className="flex text-gray-500">
       {bookmark.favourited && (
-        <Star
-          className="m-1 size-8 rounded p-1"
-          color="#ebb434"
-          fill="#ebb434"
-        />
+        <FavouritedActionIcon className="m-1 size-8 rounded p-1" favourited />
       )}
       <Dialog>
         <DialogTrigger asChild>

apps/web/components/dashboard/bookmarks/BookmarkOptions.tsx

@@ -11,24 +11,28 @@ import {
 import { useToast } from "@/components/ui/use-toast";
 import { useClientConfig } from "@/lib/clientConfig";
 import { BookmarkListContext } from "@/lib/hooks/list-context";
-import { api } from "@/lib/trpc";
 import {
-  Archive,
   Link,
   List,
   ListX,
   MoreHorizontal,
   Pencil,
   RotateCw,
-  Star,
   Tags,
   Trash2,
 } from "lucide-react";
 
 import type { ZBookmark, ZBookmarkedLink } from "@hoarder/trpc/types/bookmarks";
+import {
+  useDeleteBookmark,
+  useRecrawlBookmark,
+  useUpdateBookmark,
+} from "@hoarder/shared-react/hooks//bookmarks";
+import { useRemoveBookmarkFromList } from "@hoarder/shared-react/hooks//lists";
 
 import { useAddToListModal } from "./AddToListModal";
 import { BookmarkedTextEditor } from "./BookmarkedTextEditor";
+import { ArchivedActionIcon, FavouritedActionIcon } from "./icons";
 import { useTagModel } from "./TagModal";
 
 export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
@@ -46,64 +50,42 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
 
   const { listId } = useContext(BookmarkListContext);
 
-  const invalidateAllBookmarksCache =
-    api.useUtils().bookmarks.getBookmarks.invalidate;
-
-  const invalidateBookmarkCache =
-    api.useUtils().bookmarks.getBookmark.invalidate;
-
-  const invalidateSearchCache =
-    api.useUtils().bookmarks.searchBookmarks.invalidate;
-
   const onError = () => {
     toast({
       variant: "destructive",
       title: "Something went wrong",
       description: "There was a problem with your request.",
     });
   };
-  const deleteBookmarkMutator = api.bookmarks.deleteBookmark.useMutation({
+  const deleteBookmarkMutator = useDeleteBookmark({
     onSuccess: () => {
       toast({
         description: "The bookmark has been deleted!",
       });
     },
     onError,
-    onSettled: () => {
-      invalidateAllBookmarksCache();
-      invalidateSearchCache();
-    },
   });
 
-  const updateBookmarkMutator = api.bookmarks.updateBookmark.useMutation({
+  const updateBookmarkMutator = useUpdateBookmark({
     onSuccess: () => {
       toast({
         description: "The bookmark has been updated!",
       });
     },
     onError,
-    onSettled: () => {
-      invalidateBookmarkCache({ bookmarkId: bookmark.id });
-      invalidateAllBookmarksCache();
-      invalidateSearchCache();
-    },
   });
 
-  const crawlBookmarkMutator = api.bookmarks.recrawlBookmark.useMutation({
+  const crawlBookmarkMutator = useRecrawlBookmark({
     onSuccess: () => {
       toast({
         description: "Re-fetch has been enqueued!",
       });
     },
     onError,
-    onSettled: () => {
-      invalidateBookmarkCache({ bookmarkId: bookmark.id });
-    },
   });
 
-  const removeFromListMutator = api.lists.removeFromList.useMutation({
-    onSuccess: (_resp, req) => {
-      invalidateAllBookmarksCache({ listId: req.listId });
+  const removeFromListMutator = useRemoveBookmarkFromList({
+    onSuccess: () => {
       toast({
         description: "The bookmark has been deleted from the list",
       });
@@ -145,7 +127,10 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
               })
             }
           >
-            <Star className="mr-2 size-4" />
+            <FavouritedActionIcon
+              className="mr-2 size-4"
+              favourited={bookmark.favourited}
+            />
             <span>{bookmark.favourited ? "Un-favourite" : "Favourite"}</span>
           </DropdownMenuItem>
           <DropdownMenuItem
@@ -157,7 +142,10 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
               })
             }
           >
-            <Archive className="mr-2 size-4" />
+            <ArchivedActionIcon
+              className="mr-2 size-4"
+              archived={bookmark.archived}
+            />
             <span>{bookmark.archived ? "Un-archive" : "Archive"}</span>
           </DropdownMenuItem>
           {bookmark.content.type === "link" && (

apps/web/components/dashboard/bookmarks/icons.tsx

@@ -0,0 +1,29 @@
+import { Archive, ArchiveRestore, Star } from "lucide-react";
+
+export function FavouritedActionIcon({
+  favourited,
+  className,
+}: {
+  favourited: boolean;
+  className?: string;
+}) {
+  return favourited ? (
+    <Star className={className} color="#ebb434" fill="#ebb434" />
+  ) : (
+    <Star className={className} />
+  );
+}
+
+export function ArchivedActionIcon({
+  archived,
+  className,
+}: {
+  archived: boolean;
+  className?: string;
+}) {
+  return archived ? (
+    <ArchiveRestore className={className} />
+  ) : (
+    <Archive className={className} />
+  );
+}