New feature: category table

app/api/bookmark_category/route.ts

@@ -2,7 +2,7 @@ import { bookmarkCategorySchema, newBookmarkCategorySchema } from '@/types'
 import { NextRequest, NextResponse } from 'next/server'
 import { bookmarkCategory } from '@/lib/schema'
 import { db } from '@/lib/db'
-import { eq } from 'drizzle-orm'
+import { eq, and } from 'drizzle-orm'
 import { cookies } from 'next/headers'
 import { getUser } from '@/lib/auth'
 
@@ -45,10 +45,20 @@ export const PATCH = async (request: NextRequest) => {
 
 export const DELETE = async (request: NextRequest) => {
 	const body = await request.json()
+	const token = cookies().get('token')
+
+	const session_user = await getUser(token)
 
 	const bookmarkId = body.bookmarkCategoryId
 
-	await db.delete(bookmarkCategory).where(eq(bookmarkCategory.id, bookmarkId))
+	await db
+		.delete(bookmarkCategory)
+		.where(
+			and(
+				eq(bookmarkCategory.id, bookmarkId),
+				eq(bookmarkCategory.userId, session_user ? session_user.id : 0)
+			)
+		)
 
-	return NextResponse.json({ message: 'Bookmark Deleted' })
+	return NextResponse.json({ message: 'Bookmark Category Deleted' })
 }

app/categories/layout.tsx

@@ -0,0 +1,11 @@
+export default function DashboardLayout({
+	children,
+}: {
+	children: React.ReactNode
+}) {
+	return (
+		<section className='flex flex-col items-center justify-center gap-4 pt-10 sm:pt-16'>
+			{children}
+		</section>
+	)
+}

app/categories/page.tsx

@@ -0,0 +1,29 @@
+import {
+	bookmarkCategorySchema,
+} from '@/types'
+import { db } from '@/lib/db'
+import { cookies } from 'next/headers'
+import { getUser } from '@/lib/auth'
+import TableComponent from './table'
+
+export const dynamic = 'force-dynamic'
+export const fetchCache = 'force-no-store'
+
+export default async function CategoriesPage() {
+	const token = cookies().get('token')
+
+	const session_user = await getUser(token)
+
+	const data = await db.query.bookmarkCategory.findMany({
+		where: (bookmarkCategory, { eq }) =>
+			eq(bookmarkCategory.userId, session_user ? session_user.id : 0),
+	})
+
+	const bookmarkCategories = bookmarkCategorySchema.array().parse(data)
+
+	return (
+		<div className='flex w-full max-w-4xl flex-row flex-wrap justify-start gap-6'>
+			<TableComponent bookmarkCategories={bookmarkCategories} />
+		</div>
+	)
+}

app/categories/table.tsx

@@ -0,0 +1,83 @@
+'use client'
+
+import {
+	Table,
+	TableHeader,
+	TableColumn,
+	TableBody,
+	TableRow,
+	TableCell,
+	Tooltip,
+} from '@nextui-org/react'
+import { DeleteIcon, EditIcon } from '@/components/icons'
+import { BookmarkCategory } from '@/types'
+
+import { useRouter } from 'next/navigation'
+
+const columns = [
+	{ name: 'NAME', uid: 'name' },
+	{ name: 'ACTIONS', uid: 'actions' },
+]
+
+export default function TableComponent({
+	bookmarkCategories,
+}: {
+	bookmarkCategories: BookmarkCategory[]
+}) {
+	const router = useRouter()
+
+	const deleteCategory = async (id: number) => {
+		if (!confirm('Do you want to delete this category?')) return
+		const body = {
+			bookmarkCategoryId: id,
+		}
+		await fetch('/api/bookmark_category', {
+			method: 'DELETE',
+			body: JSON.stringify(body),
+		})
+
+		router.refresh()
+		return
+	}
+
+	return (
+		<>
+			<Table>
+				<TableHeader columns={columns}>
+					{(column) => (
+						<TableColumn key={column.uid}>
+							{column.name}
+						</TableColumn>
+					)}
+				</TableHeader>
+				<TableBody items={bookmarkCategories}>
+					{(item) => (
+						<TableRow key={item.id}>
+							<TableCell>{item.name}</TableCell>
+							<TableCell>
+								<div className='relative flex items-center gap-2'>
+									<Tooltip content='Edit user'>
+										<span className='cursor-pointer text-lg text-default-400 active:opacity-50'>
+											<EditIcon />
+										</span>
+									</Tooltip>
+									<Tooltip
+										color='danger'
+										content='Delete user'>
+										<span
+											className='cursor-pointer text-lg text-danger active:opacity-50'
+											onClick={() =>
+												deleteCategory(item.id)
+											}>
+											<DeleteIcon />
+										</span>
+									</Tooltip>
+								</div>
+							</TableCell>
+						</TableRow>
+					)}
+				</TableBody>
+			</Table>
+		</>
+	)
+}

components/icons.tsx

@@ -230,3 +230,88 @@ export const ChevronDown: React.FC<IconSvgProps> = ({
 		</svg>
 	)
 }
+
+export const EditIcon: React.FC<IconSvgProps> = (props) => (
+	<svg
+		aria-hidden='true'
+		fill='none'
+		focusable='false'
+		height='1em'
+		role='presentation'
+		viewBox='0 0 20 20'
+		width='1em'
+		{...props}>
+		<path
+			d='M11.05 3.00002L4.20835 10.2417C3.95002 10.5167 3.70002 11.0584 3.65002 11.4334L3.34169 14.1334C3.23335 15.1084 3.93335 15.775 4.90002 15.6084L7.58335 15.15C7.95835 15.0834 8.48335 14.8084 8.74168 14.525L15.5834 7.28335C16.7667 6.03335 17.3 4.60835 15.4583 2.86668C13.625 1.14168 12.2334 1.75002 11.05 3.00002Z'
+			stroke='currentColor'
+			strokeLinecap='round'
+			strokeLinejoin='round'
+			strokeMiterlimit={10}
+			strokeWidth={1.5}
+		/>
+		<path
+			d='M9.90833 4.20831C10.2667 6.50831 12.1333 8.26665 14.45 8.49998'
+			stroke='currentColor'
+			strokeLinecap='round'
+			strokeLinejoin='round'
+			strokeMiterlimit={10}
+			strokeWidth={1.5}
+		/>
+		<path
+			d='M2.5 18.3333H17.5'
+			stroke='currentColor'
+			strokeLinecap='round'
+			strokeLinejoin='round'
+			strokeMiterlimit={10}
+			strokeWidth={1.5}
+		/>
+	</svg>
+)
+
+export const DeleteIcon: React.FC<IconSvgProps> = (props) => (
+	<svg
+		aria-hidden='true'
+		fill='none'
+		focusable='false'
+		height='1em'
+		role='presentation'
+		viewBox='0 0 20 20'
+		width='1em'
+		{...props}>
+		<path
+			d='M17.5 4.98332C14.725 4.70832 11.9333 4.56665 9.15 4.56665C7.5 4.56665 5.85 4.64998 4.2 4.81665L2.5 4.98332'
+			stroke='currentColor'
+			strokeLinecap='round'
+			strokeLinejoin='round'
+			strokeWidth={1.5}
+		/>
+		<path
+			d='M7.08331 4.14169L7.26665 3.05002C7.39998 2.25835 7.49998 1.66669 8.90831 1.66669H11.0916C12.5 1.66669 12.6083 2.29169 12.7333 3.05835L12.9166 4.14169'
+			stroke='currentColor'
+			strokeLinecap='round'
+			strokeLinejoin='round'
+			strokeWidth={1.5}
+		/>
+		<path
+			d='M15.7084 7.61664L15.1667 16.0083C15.075 17.3166 15 18.3333 12.675 18.3333H7.32502C5.00002 18.3333 4.92502 17.3166 4.83335 16.0083L4.29169 7.61664'
+			stroke='currentColor'
+			strokeLinecap='round'
+			strokeLinejoin='round'
+			strokeWidth={1.5}
+		/>
+		<path
+			d='M8.60834 13.75H11.3833'
+			stroke='currentColor'
+			strokeLinecap='round'
+			strokeLinejoin='round'
+			strokeWidth={1.5}
+		/>
+		<path
+			d='M7.91669 10.4167H12.0834'
+			stroke='currentColor'
+			strokeLinecap='round'
+			strokeLinejoin='round'
+			strokeWidth={1.5}
+		/>
+	</svg>
+)

config/site.ts

@@ -12,6 +12,10 @@ export const siteConfig = {
 			label: 'Dashboard',
 			href: '/dashboard',
 		},
+		{
+			label: 'Categories',
+			href: '/categories',
+		},
 	],
 	navMenuItems: [
 		{
@@ -22,6 +26,10 @@ export const siteConfig = {
 			label: 'Dashboard',
 			href: '/dashboard',
 		},
+		{
+			label: 'Categories',
+			href: '/categories',
+		},
 	],
 	links: {
 		github: 'https://github.com/TZGyn/',