From 08a5694e451218f1bcb2ad9eb42fd93250afbb96 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Fri, 9 Feb 2024 01:50:35 +0000
Subject: [refactor] Extract the bookmark model to be a high level model to
 support other type of bookmarks

---
 .../bookmarks/components/BookmarksGrid.tsx         | 27 ++++++++++++++++++++++
 .../dashboard/bookmarks/components/LinkCard.tsx    | 15 ++++++------
 .../dashboard/bookmarks/components/LinksGrid.tsx   | 21 -----------------
 packages/web/app/dashboard/bookmarks/page.tsx      |  4 ++--
 4 files changed, 37 insertions(+), 30 deletions(-)
 create mode 100644 packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx
 delete mode 100644 packages/web/app/dashboard/bookmarks/components/LinksGrid.tsx

(limited to 'packages/web/app/dashboard')

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>
-  );
-}
diff --git a/packages/web/app/dashboard/bookmarks/page.tsx b/packages/web/app/dashboard/bookmarks/page.tsx
index b4158893..b9eabfe8 100644
--- a/packages/web/app/dashboard/bookmarks/page.tsx
+++ b/packages/web/app/dashboard/bookmarks/page.tsx
@@ -1,5 +1,5 @@
 import AddLink from "./components/AddLink";
-import LinksGrid from "./components/LinksGrid";
+import BookmarksGrid from "./components/BookmarksGrid";
 import type { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -13,7 +13,7 @@ export default async function Bookmarks() {
         <AddLink />
       </div>
       <div>
-        <LinksGrid />
+        <BookmarksGrid />
       </div>
     </div>
   );
-- 
cgit v1.2.3-70-g09d2