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,9 +76,27 @@ export default function TableComponent({
 					)}
 				</TableHeader>
 				<TableBody items={bookmarkCategories}>
-					{(item) => (
+					{(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'>
@@ -77,7 +119,8 @@ export default function TableComponent({
 									</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(),
 })