From 2fc94fc27b07859e122eb30bec46befd0c472a1a Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Mon, 4 Sep 2023 01:16:38 +0800
Subject: [PATCH] Update category table to show number of bookmarks

---
 app/categories/page.tsx  | 11 +++++++----
 app/categories/table.tsx |  6 ++++--
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/app/categories/page.tsx b/app/categories/page.tsx
index 5528bea..787f7a7 100644
--- a/app/categories/page.tsx
+++ b/app/categories/page.tsx
@@ -1,6 +1,4 @@
-import {
-	bookmarkCategorySchema,
-} from '@/types'
+import { bookmarkCategoryWithBookmarksSchema } from '@/types'
 import { db } from '@/lib/db'
 import { cookies } from 'next/headers'
 import { getUser } from '@/lib/auth'
@@ -17,9 +15,14 @@ export default async function CategoriesPage() {
 	const data = await db.query.bookmarkCategory.findMany({
 		where: (bookmarkCategory, { eq }) =>
 			eq(bookmarkCategory.userId, session_user ? session_user.id : 0),
+		with: {
+			bookmark: true,
+		},
 	})
 
-	const bookmarkCategories = bookmarkCategorySchema.array().parse(data)
+	const bookmarkCategories = bookmarkCategoryWithBookmarksSchema
+		.array()
+		.parse(data)
 
 	return (
 		<div className='flex w-full max-w-4xl flex-row flex-wrap justify-start gap-6'>
diff --git a/app/categories/table.tsx b/app/categories/table.tsx
index 9976c46..58118d7 100644
--- a/app/categories/table.tsx
+++ b/app/categories/table.tsx
@@ -10,19 +10,20 @@ import {
 	Tooltip,
 } from '@nextui-org/react'
 import { DeleteIcon, EditIcon } from '@/components/icons'
-import { BookmarkCategory } from '@/types'
+import { BookmarkCategoryWithBookmarks } from '@/types'
 
 import { useRouter } from 'next/navigation'
 
 const columns = [
 	{ name: 'NAME', uid: 'name' },
+	{ name: 'BOOKMARK COUNT', uid: 'bookmarkcount' },
 	{ name: 'ACTIONS', uid: 'actions' },
 ]
 
 export default function TableComponent({
 	bookmarkCategories,
 }: {
-	bookmarkCategories: BookmarkCategory[]
+	bookmarkCategories: BookmarkCategoryWithBookmarks[]
 }) {
 	const router = useRouter()
 
@@ -54,6 +55,7 @@ export default function TableComponent({
 					{(item) => (
 						<TableRow key={item.id}>
 							<TableCell>{item.name}</TableCell>
+							<TableCell>{item.bookmark.length}</TableCell>
 							<TableCell>
 								<div className='relative flex items-center gap-2'>
 									<Tooltip content='Edit Category'>