diff --git a/apps/web/components/dashboard/bookmarks/ManageListsModal.tsx b/apps/web/components/dashboard/bookmarks/ManageListsModal.tsx index a906aee8..9451e736 100644 --- a/apps/web/components/dashboard/bookmarks/ManageListsModal.tsx +++ b/apps/web/components/dashboard/bookmarks/ManageListsModal.tsx @@ -19,7 +19,7 @@ import { import { toast } from "@/components/ui/use-toast"; import { api } from "@/lib/trpc"; import { zodResolver } from "@hookform/resolvers/zod"; -import { X } from "lucide-react"; +import { Archive, X } from "lucide-react"; import { useForm } from "react-hook-form"; import { z } from "zod"; @@ -30,6 +30,7 @@ import { } from "@hoarder/shared-react/hooks/lists"; import { BookmarkListSelector } from "../lists/BookmarkListSelector"; +import ArchiveBookmarkButton from "./action-buttons/ArchiveBookmarkButton"; export default function ManageListsModal({ bookmarkId, @@ -179,6 +180,13 @@ export default function ManageListsModal({ Close + setOpen(false)} + > + Archive + { + bookmarkId: string; + onDone?: () => void; +} + +const ArchiveBookmarkButton = React.forwardRef< + HTMLButtonElement, + ArchiveBookmarkButtonProps +>(({ bookmarkId, onDone, ...props }, ref) => { + const { data } = api.bookmarks.getBookmark.useQuery({ bookmarkId }); + + const { mutate: updateBookmark, isPending: isArchivingBookmark } = + useUpdateBookmark({ + onSuccess: () => { + toast({ + description: "Bookmark has been archived!", + }); + onDone?.(); + }, + onError: (e) => { + if (e.data?.code == "BAD_REQUEST") { + toast({ + variant: "destructive", + description: e.message, + }); + } else { + toast({ + variant: "destructive", + title: "Something went wrong", + }); + } + }, + }); + + if (!data) { + return ; + } + + return ( + + updateBookmark({ + bookmarkId, + archived: !data.archived, + }) + } + {...props} + /> + ); +}); + +ArchiveBookmarkButton.displayName = "ArchiveBookmarkButton"; +export default ArchiveBookmarkButton; diff --git a/apps/web/components/ui/action-button.tsx b/apps/web/components/ui/action-button.tsx index 2ac361f5..b3984d97 100644 --- a/apps/web/components/ui/action-button.tsx +++ b/apps/web/components/ui/action-button.tsx @@ -58,3 +58,4 @@ const ActionButtonWithTooltip = React.forwardRef< ActionButtonWithTooltip.displayName = "ActionButtonWithTooltip"; export { ActionButton, ActionButtonWithTooltip }; +export type { ActionButtonProps };