[refactor] Extract the bookmark model to be a high level model to support other type of bookmarks

3 files changed, 35 insertions, 28 deletions

diff --git a/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx b/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx
new file mode 100644
index 00000000..2b6b19b6
--- /dev/null
+++ b/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx
@@ -0,0 +1,27 @@
+import { getServerSession } from "next-auth";
+import { redirect } from "next/navigation";
+import { authOptions } from "@/lib/auth";
+import { getBookmarks } from "@/lib/services/bookmarks";
+import LinkCard from "./LinkCard";
+import { ZBookmark } from "@/lib/types/api/bookmarks";
+
+function renderBookmark(bookmark: ZBookmark) {
+  switch (bookmark.content.type) {
+    case "link":
+      return <LinkCard key={bookmark.id} bookmark={bookmark} />;
+  }
+}
+
+export default async function BookmarksGrid() {
+  const session = await getServerSession(authOptions);
+  if (!session) {
+    redirect("/");
+  }
+  const bookmarks = await getBookmarks(session.user.id);
+
+  return (
+    <div className="container grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+      {bookmarks.map((b) => renderBookmark(b))}
+    </div>
+  );
+}
diff --git a/packages/web/app/dashboard/bookmarks/components/LinkCard.tsx b/packages/web/app/dashboard/bookmarks/components/LinkCard.tsx
index b5a051e8..1cbd8865 100644
--- a/packages/web/app/dashboard/bookmarks/components/LinkCard.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/LinkCard.tsx
@@ -16,7 +16,7 @@ import {
 } from "@/components/ui/imageCard";
 import { useToast } from "@/components/ui/use-toast";
 import APIClient from "@/lib/api";
-import { ZBookmarkedLink } from "@/lib/types/api/links";
+import { ZBookmark } from "@/lib/types/api/bookmarks";
 import { MoreHorizontal, Trash2 } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
@@ -26,7 +26,7 @@ export function LinkOptions({ linkId }: { linkId: string }) {
   const router = useRouter();
 
   const unbookmarkLink = async () => {
-    let [_, error] = await APIClient.unbookmarkLink(linkId);
+    let [_, error] = await APIClient.deleteBookmark(linkId);
 
     if (error) {
       toast({
@@ -59,7 +59,8 @@ export function LinkOptions({ linkId }: { linkId: string }) {
   );
 }
 
-export default function LinkCard({ link }: { link: ZBookmarkedLink }) {
+export default function LinkCard({ bookmark }: { bookmark: ZBookmark }) {
+  const link = bookmark.content;
   const parsedUrl = new URL(link.url);
 
   return (
@@ -67,15 +68,15 @@ export default function LinkCard({ link }: { link: ZBookmarkedLink }) {
       className={
         "bg-gray-50 duration-300 ease-in border border-grey-100 hover:transition-all hover:border-blue-300"
       }
-      image={link.details?.imageUrl ?? undefined}
+      image={link?.imageUrl ?? undefined}
     >
       <ImageCardTitle>
         <Link className="line-clamp-3" href={link.url}>
-          {link.details?.title ?? parsedUrl.host}
+          {link?.title ?? parsedUrl.host}
         </Link>
       </ImageCardTitle>
       <ImageCardBody className="py-2 overflow-clip">
-        {link.tags.map((t) => (
+        {bookmark.tags.map((t) => (
           <Badge
             variant="default"
             className="bg-gray-300 text-gray-500"
@@ -92,7 +93,7 @@ export default function LinkCard({ link }: { link: ZBookmarkedLink }) {
               {parsedUrl.host}
             </Link>
           </div>
-          <LinkOptions linkId={link.id} />
+          <LinkOptions linkId={bookmark.id} />
         </div>
       </ImageCardFooter>
     </ImageCard>
diff --git a/packages/web/app/dashboard/bookmarks/components/LinksGrid.tsx b/packages/web/app/dashboard/bookmarks/components/LinksGrid.tsx
deleted file mode 100644
index 66f0d766..00000000
--- a/packages/web/app/dashboard/bookmarks/components/LinksGrid.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { getServerSession } from "next-auth";
-import { redirect } from "next/navigation";
-import { authOptions } from "@/lib/auth";
-import { getLinks } from "@/lib/services/links";
-import LinkCard from "./LinkCard";
-
-export default async function LinksGrid() {
-  const session = await getServerSession(authOptions);
-  if (!session) {
-    redirect("/");
-  }
-  const links = await getLinks(session.user.id);
-
-  return (
-    <div className="container grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-      {links.map((l) => (
-        <LinkCard key={l.id} link={l} />
-      ))}
-    </div>
-  );
-}