diff options
Diffstat (limited to '')
| -rw-r--r-- | apps/web/components/dashboard/bookmarks/BookmarkActionBar.tsx | 11 | ||||
| -rw-r--r-- | apps/web/components/dashboard/bookmarks/BookmarkOptions.tsx | 52 | ||||
| -rw-r--r-- | apps/web/components/dashboard/bookmarks/icons.tsx | 29 | ||||
| -rw-r--r-- | apps/web/components/dashboard/preview/BookmarkPreview.tsx (renamed from apps/web/components/dashboard/bookmarks/BookmarkPreview.tsx) | 72 | ||||
| -rw-r--r-- | apps/web/components/dashboard/preview/NoteEditor.tsx (renamed from apps/web/components/dashboard/bookmarks/NoteEditor.tsx) | 10 |
5 files changed, 60 insertions, 114 deletions
diff --git a/apps/web/components/dashboard/bookmarks/BookmarkActionBar.tsx b/apps/web/components/dashboard/bookmarks/BookmarkActionBar.tsx index d2beb8d4..420fed84 100644 --- a/apps/web/components/dashboard/bookmarks/BookmarkActionBar.tsx +++ b/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> diff --git a/apps/web/components/dashboard/bookmarks/BookmarkOptions.tsx b/apps/web/components/dashboard/bookmarks/BookmarkOptions.tsx index e95ec9a2..e3cfc796 100644 --- a/apps/web/components/dashboard/bookmarks/BookmarkOptions.tsx +++ b/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,15 +50,6 @@ 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", @@ -62,48 +57,35 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) { 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" && ( diff --git a/apps/web/components/dashboard/bookmarks/icons.tsx b/apps/web/components/dashboard/bookmarks/icons.tsx new file mode 100644 index 00000000..d899f19d --- /dev/null +++ b/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} /> + ); +} diff --git a/apps/web/components/dashboard/bookmarks/BookmarkPreview.tsx b/apps/web/components/dashboard/preview/BookmarkPreview.tsx index 102e0788..bd7881a3 100644 --- a/apps/web/components/dashboard/bookmarks/BookmarkPreview.tsx +++ b/apps/web/components/dashboard/preview/BookmarkPreview.tsx @@ -1,8 +1,7 @@ "use client"; -import Image from "next/image"; import Link from "next/link"; -import { ScrollArea } from "@/components/ui/scroll-area"; +import { TagsEditor } from "@/components/dashboard/bookmarks/TagsEditor"; import { Separator } from "@/components/ui/separator"; import { Skeleton } from "@/components/ui/skeleton"; import { @@ -20,12 +19,13 @@ import { api } from "@/lib/trpc"; import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import { CalendarDays, ExternalLink } from "lucide-react"; -import Markdown from "react-markdown"; import type { ZBookmark } from "@hoarder/trpc/types/bookmarks"; +import ActionBar from "./ActionBar"; +import { AssetContentSection } from "./AssetContentSection"; import { NoteEditor } from "./NoteEditor"; -import { TagsEditor } from "./TagsEditor"; +import { TextContentSection } from "./TextContentSection"; dayjs.extend(relativeTime); @@ -89,69 +89,6 @@ function LinkHeader({ bookmark }: { bookmark: ZBookmark }) { ); } -function TextContentSection({ bookmark }: { bookmark: ZBookmark }) { - let content; - switch (bookmark.content.type) { - case "link": { - if (!bookmark.content.htmlContent) { - content = ( - <div className="text-destructive"> - Failed to fetch link content ... - </div> - ); - } else { - content = ( - <div - dangerouslySetInnerHTML={{ - __html: bookmark.content.htmlContent || "", - }} - className="prose mx-auto dark:prose-invert" - /> - ); - } - break; - } - case "text": { - content = ( - <Markdown className="prose mx-auto dark:prose-invert"> - {bookmark.content.text} - </Markdown> - ); - break; - } - } - - return <ScrollArea className="h-full">{content}</ScrollArea>; -} - -function AssetContentSection({ bookmark }: { bookmark: ZBookmark }) { - if (bookmark.content.type != "asset") { - throw new Error("Invalid content type"); - } - - let content; - switch (bookmark.content.assetType) { - case "image": { - switch (bookmark.content.assetType) { - case "image": { - content = ( - <div className="relative h-full min-w-full"> - <Image - alt="asset" - fill={true} - className="object-contain" - src={`/api/assets/${bookmark.content.assetId}`} - /> - </div> - ); - } - } - break; - } - } - return content; -} - export default function BookmarkPreview({ initialData, }: { @@ -210,6 +147,7 @@ export default function BookmarkPreview({ <p className="text-sm text-gray-400">Note</p> <NoteEditor bookmark={bookmark} /> </div> + <ActionBar bookmark={bookmark} /> </div> </div> ); diff --git a/apps/web/components/dashboard/bookmarks/NoteEditor.tsx b/apps/web/components/dashboard/preview/NoteEditor.tsx index d712d523..6011e89d 100644 --- a/apps/web/components/dashboard/bookmarks/NoteEditor.tsx +++ b/apps/web/components/dashboard/preview/NoteEditor.tsx @@ -1,17 +1,14 @@ import { Textarea } from "@/components/ui/textarea"; import { toast } from "@/components/ui/use-toast"; import { useClientConfig } from "@/lib/clientConfig"; -import { api } from "@/lib/trpc"; import type { ZBookmark } from "@hoarder/trpc/types/bookmarks"; +import { useUpdateBookmark } from "@hoarder/shared-react/hooks/bookmarks"; export function NoteEditor({ bookmark }: { bookmark: ZBookmark }) { const demoMode = !!useClientConfig().demoMode; - const invalidateBookmarkCache = - api.useUtils().bookmarks.getBookmark.invalidate; - - const updateBookmarkMutator = api.bookmarks.updateBookmark.useMutation({ + const updateBookmarkMutator = useUpdateBookmark({ onSuccess: () => { toast({ description: "The bookmark has been updated!", @@ -23,9 +20,6 @@ export function NoteEditor({ bookmark }: { bookmark: ZBookmark }) { variant: "destructive", }); }, - onSettled: () => { - invalidateBookmarkCache({ bookmarkId: bookmark.id }); - }, }); return ( |