From da03fce5e5373e4791ccf0a885aaecff513156fe Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Tue, 13 Feb 2024 20:49:42 +0000
Subject: feature: Implement a usable but ugly all tags and a single tag page

---
 .../dashboard/bookmarks/components/Bookmarks.tsx   | 19 ++++----
 .../dashboard/bookmarks/components/LinkCard.tsx    | 15 ++++---
 packages/web/app/dashboard/components/Sidebar.tsx  | 13 +-----
 packages/web/app/dashboard/tags/[tagName]/page.tsx | 51 ++++++++++++++++++++++
 packages/web/app/dashboard/tags/page.tsx           | 36 +++++++++++++++
 5 files changed, 105 insertions(+), 29 deletions(-)
 create mode 100644 packages/web/app/dashboard/tags/[tagName]/page.tsx
 create mode 100644 packages/web/app/dashboard/tags/page.tsx

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

diff --git a/packages/web/app/dashboard/bookmarks/components/Bookmarks.tsx b/packages/web/app/dashboard/bookmarks/components/Bookmarks.tsx
index d7e3f1f3..bd144a67 100644
--- a/packages/web/app/dashboard/bookmarks/components/Bookmarks.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/Bookmarks.tsx
@@ -20,20 +20,17 @@ export default async function Bookmarks({
     archived,
   });
 
-  if (bookmarks.bookmarks.length == 0) {
-    // TODO: This needs to be polished
-    return (
-      <>
-        <div className="container pb-4 text-2xl">{title}</div>
-        <div className="container">No bookmarks</div>
-      </>
-    );
-  }
-
+  // TODO: This needs to be polished
   return (
     <>
       <div className="container pb-4 text-2xl">{title}</div>
-      <BookmarksGrid bookmarks={bookmarks.bookmarks} />
+      <div className="container">
+        {bookmarks.bookmarks.length == 0 ? (
+          "No bookmarks"
+        ) : (
+          <BookmarksGrid bookmarks={bookmarks.bookmarks} />
+        )}
+      </div>
     </>
   );
 }
diff --git a/packages/web/app/dashboard/bookmarks/components/LinkCard.tsx b/packages/web/app/dashboard/bookmarks/components/LinkCard.tsx
index abd4bff7..00e4ef26 100644
--- a/packages/web/app/dashboard/bookmarks/components/LinkCard.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/LinkCard.tsx
@@ -27,13 +27,14 @@ export default function LinkCard({ bookmark }: { bookmark: ZBookmark }) {
       </ImageCardTitle>
       <ImageCardBody className="overflow-clip py-2">
         {bookmark.tags.map((t) => (
-          <Badge
-            variant="default"
-            className="bg-gray-300 text-gray-500 hover:text-white"
-            key={t.id}
-          >
-            #{t.name}
-          </Badge>
+          <Link key={t.id} href={`/dashboard/tags/${t.name}`}>
+            <Badge
+              variant="default"
+              className="bg-gray-300 text-gray-500 hover:text-white"
+            >
+              #{t.name}
+            </Badge>
+          </Link>
         ))}
       </ImageCardBody>
       <ImageCardFooter>
diff --git a/packages/web/app/dashboard/components/Sidebar.tsx b/packages/web/app/dashboard/components/Sidebar.tsx
index 0563e26f..30179166 100644
--- a/packages/web/app/dashboard/components/Sidebar.tsx
+++ b/packages/web/app/dashboard/components/Sidebar.tsx
@@ -1,13 +1,4 @@
-import { Button } from "@/components/ui/button";
-import {
-  Archive,
-  MoreHorizontal,
-  Star,
-  Tag,
-  Home,
-  Brain,
-  Settings,
-} from "lucide-react";
+import { Archive, Star, Tag, Home, Brain, Settings } from "lucide-react";
 import { redirect } from "next/navigation";
 import SidebarItem from "./SidebarItem";
 import { getServerAuthSession } from "@/server/auth";
@@ -46,7 +37,7 @@ export default async function Sidebar() {
             name="Archive"
             path="/dashboard/bookmarks/archive"
           />
-          <SidebarItem logo={<Tag />} name="Tags" path="#" />
+          <SidebarItem logo={<Tag />} name="Tags" path="/dashboard/tags" />
           <SidebarItem
             logo={<Settings />}
             name="Settings"
diff --git a/packages/web/app/dashboard/tags/[tagName]/page.tsx b/packages/web/app/dashboard/tags/[tagName]/page.tsx
new file mode 100644
index 00000000..e55c7d7e
--- /dev/null
+++ b/packages/web/app/dashboard/tags/[tagName]/page.tsx
@@ -0,0 +1,51 @@
+import { getServerAuthSession } from "@/server/auth";
+import { prisma } from "@remember/db";
+import { notFound, redirect } from "next/navigation";
+import BookmarksGrid from "../../bookmarks/components/BookmarksGrid";
+import { api } from "@/server/api/client";
+
+export default async function TagPage({
+  params,
+}: {
+  params: { tagName: string };
+}) {
+  const session = await getServerAuthSession();
+  if (!session) {
+    redirect("/");
+  }
+  const tag = await prisma.bookmarkTags.findUnique({
+    where: {
+      userId: session.user.id,
+      name: params.tagName,
+    },
+    select: {
+      id: true,
+    },
+  });
+
+  if (!tag) {
+    // TODO: Better error message when the tag is not there
+    notFound();
+  }
+
+  const bookmarkIds = await prisma.tagsOnBookmarks.findMany({
+    where: {
+      tagId: tag.id,
+    },
+    select: {
+      bookmarkId: true,
+    },
+  });
+
+  const bookmarks = await api.bookmarks.getBookmarksById({
+    ids: bookmarkIds.map((b) => b.bookmarkId),
+    archived: false,
+  });
+
+  return (
+    <div className="flex flex-col">
+      <span className="container py-4 text-2xl">#{params.tagName}</span>
+      <BookmarksGrid bookmarks={bookmarks.bookmarks} />
+    </div>
+  );
+}
diff --git a/packages/web/app/dashboard/tags/page.tsx b/packages/web/app/dashboard/tags/page.tsx
new file mode 100644
index 00000000..546ee28d
--- /dev/null
+++ b/packages/web/app/dashboard/tags/page.tsx
@@ -0,0 +1,36 @@
+import { Button } from "@/components/ui/button";
+import { getServerAuthSession } from "@/server/auth";
+import { prisma } from "@remember/db";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+
+export default async function TagsPage() {
+  const session = await getServerAuthSession();
+  if (!session) {
+    redirect("/");
+  }
+
+  const tags = await prisma.bookmarkTags.findMany({
+    where: {
+      userId: session.user.id,
+    },
+  });
+
+  return (
+    <div className="container mt-2 space-y-3">
+      <span className="text-2xl">All Tags</span>
+      <hr />
+      <div className="flex flex-wrap space-x-2">
+        {tags.map((t) => (
+          <Link
+            className="block rounded-xl bg-black p-2 text-white"
+            key={t.id}
+            href={`/dashboard/tags/${t.name}`}
+          >
+            {t.name}
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}
-- 
cgit v1.2.3-70-g09d2