New feature: edit bookmark category position in category table

app/categories/table.tsx

@@ -8,14 +8,18 @@ import {
 	TableRow,
 	TableCell,
 	Tooltip,
+	Select,
+	SelectItem,
+	Selection,
 } from '@nextui-org/react'
 import { DeleteIcon, EditIcon } from '@/components/icons'
-import { BookmarkCategoryWithBookmarks } from '@/types'
+import { BookmarkCategory, BookmarkCategoryWithBookmarks } from '@/types'
 
 import { useRouter } from 'next/navigation'
 
 const columns = [
 	{ name: 'NAME', uid: 'name' },
+	{ name: 'POSITION', uid: 'position' },
 	{ name: 'BOOKMARK COUNT', uid: 'bookmarkcount' },
 	{ name: 'ACTIONS', uid: 'actions' },
 ]
@@ -41,6 +45,26 @@ export default function TableComponent({
 		return
 	}
 
+	const updateCategory = async (
+		bookmark_category: BookmarkCategory,
+		position: Selection
+	) => {
+		if (position === 'all') return
+
+		const body = {
+			...bookmark_category,
+			position: parseInt(position.values().next().value),
+		}
+
+		await fetch('/api/bookmark_category', {
+			method: 'PATCH',
+			body: JSON.stringify(body),
+		})
+
+		router.refresh()
+		return
+	}
+
 	return (
 		<>
 			<Table>
@@ -52,32 +76,51 @@ export default function TableComponent({
 					)}
 				</TableHeader>
 				<TableBody items={bookmarkCategories}>
-					{(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'>
-										<span className='cursor-pointer text-lg text-default-400 active:opacity-50'>
-											<EditIcon />
-										</span>
-									</Tooltip>
-									<Tooltip
-										color='danger'
-										content='Delete Category'>
-										<span
-											className='cursor-pointer text-lg text-danger active:opacity-50'
-											onClick={() =>
-												deleteCategory(item.id)
-											}>
-											<DeleteIcon />
-										</span>
-									</Tooltip>
-								</div>
-							</TableCell>
-						</TableRow>
-					)}
+					{(item) => {
+						const { bookmark: _, ...category } = item
+						return (
+							<TableRow key={item.id}>
+								<TableCell>{item.name}</TableCell>
+								<TableCell>
+									<Select
+										placeholder='Select position'
+										selectedKeys={item.position.toString()}
+										onSelectionChange={(key) => {
+											updateCategory(category, key)
+										}}>
+										{bookmarkCategories.map((_, index) => (
+											<SelectItem
+												key={index + 1}
+												value={index + 1}>
+												{(index + 1).toString()}
+											</SelectItem>
+										))}
+									</Select>
+								</TableCell>
+								<TableCell>{item.bookmark.length}</TableCell>
+								<TableCell>
+									<div className='relative flex items-center gap-2'>
+										<Tooltip content='Edit Category'>
+											<span className='cursor-pointer text-lg text-default-400 active:opacity-50'>
+												<EditIcon />
+											</span>
+										</Tooltip>
+										<Tooltip
+											color='danger'
+											content='Delete Category'>
+											<span
+												className='cursor-pointer text-lg text-danger active:opacity-50'
+												onClick={() =>
+													deleteCategory(item.id)
+												}>
+												<DeleteIcon />
+											</span>
+										</Tooltip>
+									</div>
+								</TableCell>
+							</TableRow>
+						)
+					}}
 				</TableBody>
 			</Table>
 		</>

types/index.ts

@@ -26,6 +26,7 @@ export type Bookmark = z.infer<typeof bookmarkSchema>
 
 const bookmarkCategory = {
 	name: z.string().nonempty(),
+	position: z.number(),
 }
 
 export const newBookmarkCategorySchema = z.object({
@@ -42,6 +43,7 @@ export type BookmarkCategory = z.infer<typeof bookmarkCategorySchema>
 
 export const bookmarkCategoryWithBookmarksSchema = z.object({
 	id: z.number(),
+	userId: z.number(),
 	...bookmarkCategory,
 	bookmark: bookmarkSchema.array(),
 })