New feature: Delete bookmark

app/api/bookmark/route.ts

@@ -1,6 +1,7 @@
 import { bookmarkSchema } from '@/types'
 import { NextRequest, NextResponse } from 'next/server'
 import { db, bookmark } from '@/lib/schema'
+import { eq } from 'drizzle-orm'
 
 export const GET = async () => {
 	const bookmarks = await db.select().from(bookmark)
@@ -21,3 +22,13 @@ export const POST = async (request: NextRequest) => {
 
 	return NextResponse.json(newBookmark.error)
 }
+
+export const DELETE = async (request: NextRequest) => {
+	const body = await request.json()
+
+	const bookmarkId = body.bookmarkId
+
+	await db.delete(bookmark).where(eq(bookmark.id, bookmarkId))
+
+	return NextResponse.json({ message: 'Bookmark Deleted' })
+}

components/bookmarkCard.tsx

@@ -4,16 +4,27 @@ import { Card, CardHeader, CardBody, CardFooter } from '@nextui-org/card'
 import { Link } from '@nextui-org/link'
 import { Divider } from '@nextui-org/divider'
 import { Image } from '@nextui-org/image'
+import { Icon } from '@iconify/react'
+import { useRouter } from 'next/navigation'
 
 import { type Bookmark } from '@/types'
 
 export const BookmarkCard = ({ data }: { data: Bookmark }) => {
+	const router = useRouter()
+	const deleteBookmark = async (event: React.MouseEvent, id: Number) => {
+		event.stopPropagation()
+		await fetch('/api/bookmark', {
+			method: 'DELETE',
+			body: JSON.stringify({ bookmarkId: id }),
+		})
+		router.refresh()
+	}
 	return (
 		<>
 			<Card
 				className='w-96'
 				isPressable
-				onPress={() => open(data.url, '_blank')}>
+				onPress={() => {}}>
 				<CardHeader className='flex gap-3'>
 					<Image
 						alt='nextui logo'
@@ -22,12 +33,20 @@ export const BookmarkCard = ({ data }: { data: Bookmark }) => {
 						src='https://avatars.githubusercontent.com/u/86160567?s=200&v=4'
 						width={40}
 					/>
-					<div className='flex flex-col items-start'>
+					<div className='flex grow flex-col items-start'>
 						<p className='text-md'>{data.name}</p>
 						<p className='text-small text-default-500'>
 							{data.link}
 						</p>
 					</div>
+					<div>
+						<Icon
+							icon='mdi:delete'
+							fontSize={24}
+							className='text-red-500'
+							onClick={(event) => deleteBookmark(event, data.id)}
+						/>
+					</div>
 				</CardHeader>
 				<Divider />
 				<CardBody>

types/index.ts

@@ -6,6 +6,7 @@ export type IconSvgProps = SVGProps<SVGSVGElement> & {
 }
 
 export const bookmarkSchema = z.object({
+	id: z.number(),
 	name: z.string(),
 	link: z.string(),
 	description: z.string(),