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) => (
+					{(item) => {
-						<TableRow key={item.id}>
+						const { bookmark: _, ...category } = item
-							<TableCell>{item.name}</TableCell>
+						return (
-							<TableCell>{item.bookmark.length}</TableCell>
+							<TableRow key={item.id}>
-							<TableCell>
+								<TableCell>{item.name}</TableCell>
-								<div className='relative flex items-center gap-2'>
+								<TableCell>
-									<Tooltip content='Edit Category'>
+									<Select
-										<span className='cursor-pointer text-lg text-default-400 active:opacity-50'>
+										placeholder='Select position'
-											<EditIcon />
+										selectedKeys={item.position.toString()}
-										</span>
+										onSelectionChange={(key) => {
-									</Tooltip>
+											updateCategory(category, key)
-									<Tooltip
+										}}>
-										color='danger'
+										{bookmarkCategories.map((_, index) => (
-										content='Delete Category'>
+											<SelectItem
-										<span
+												key={index + 1}
-											className='cursor-pointer text-lg text-danger active:opacity-50'
+												value={index + 1}>
-											onClick={() =>
+												{(index + 1).toString()}
-												deleteCategory(item.id)
+											</SelectItem>
-											}>
+										))}
-											<DeleteIcon />
+									</Select>
-										</span>
+								</TableCell>
-									</Tooltip>
+								<TableCell>{item.bookmark.length}</TableCell>
-								</div>
+								<TableCell>
-							</TableCell>
+									<div className='relative flex items-center gap-2'>
-						</TableRow>
+										<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>
 		</>

app/dashboard/page.tsx

@@ -19,6 +19,7 @@ export default async function DashboardPage() {
 		with: {
 			bookmark: true,
 		},
+		orderBy: (bookmark, { asc }) => [asc(bookmark.position)],
 	})
 
 	const bookmarkCategoryWithBookmarks = bookmarkCategoryWithBookmarksSchema

drizzle/0004_majestic_vivisector.sql

@@ -0,0 +1 @@
+ALTER TABLE "bookmark_categories" ADD COLUMN "position" integer;

drizzle/meta/0004_snapshot.json

@@ -0,0 +1,220 @@
+{
+  "version": "5",
+  "dialect": "pg",
+  "id": "b830bd5b-b143-444a-87e6-c36a918276e7",
+  "prevId": "8ee9d2e6-45d6-45ac-8552-b3e40c39b90e",
+  "tables": {
+    "bookmarks": {
+      "name": "bookmarks",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "category_id": {
+          "name": "category_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "link": {
+          "name": "link",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "bookmarks_user_id_users_id_fk": {
+          "name": "bookmarks_user_id_users_id_fk",
+          "tableFrom": "bookmarks",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "bookmark_categories": {
+      "name": "bookmark_categories",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "position": {
+          "name": "position",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "default": 0
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'Other'"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "bookmark_categories_user_id_users_id_fk": {
+          "name": "bookmark_categories_user_id_users_id_fk",
+          "tableFrom": "bookmark_categories",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "session": {
+      "name": "session",
+      "schema": "",
+      "columns": {
+        "sessionToken": {
+          "name": "sessionToken",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "expires": {
+          "name": "expires",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "session_user_id_users_id_fk": {
+          "name": "session_user_id_users_id_fk",
+          "tableFrom": "session",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "users": {
+      "name": "users",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "password": {
+          "name": "password",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "''"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    }
+  },
+  "enums": {},
+  "schemas": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  }
+}

drizzle/meta/_journal.json

@@ -29,6 +29,13 @@
       "when": 1693043001584,
       "tag": "0003_same_texas_twister",
       "breakpoints": true
+    },
+    {
+      "idx": 4,
+      "version": "5",
+      "when": 1694384709378,
+      "tag": "0004_majestic_vivisector",
+      "breakpoints": true
     }
   ]
 }

lib/schema.ts

@@ -38,6 +38,7 @@ export const bookmarkRelations = relations(bookmark, ({ one }) => ({
 
 export const bookmarkCategory = pgTable('bookmark_categories', {
 	id: serial('id').primaryKey(),
+	position: integer('position'),
 	userId: integer('user_id')
 		.references(() => user.id)
 		.notNull()

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(),
 })