Just U is left...

islands/Admin.tsx

@@ -9,6 +9,13 @@ export interface Props {
 	todos: Todo[]
 }
 
+async function promptDeleteUser(id: string, name: string) {
+	if (confirm(`Are you sure you want to delete ${name} (${id})?`)) {
+		await fetch(`/api/user?id=${id}`, { method: 'DELETE' })
+		location.reload()
+	}
+}
+
 export function Admin({ users, todos }: Props) {
 	const addUserDialog = createRef<HTMLDialogElement>()
 	const usersById: Record<string, User> = {}
@@ -35,6 +42,7 @@ export function Admin({ users, todos }: Props) {
 					action='/api/user'
 					method='post'
 					encType='multipart/form-data'
+					onSubmit={() => console.log('Submitting...')}
 				>
 					<Label for='name'>
 						Name
@@ -72,10 +80,11 @@ export function Admin({ users, todos }: Props) {
 						<th>Name</th>
 						<th>Avatar</th>
 						<th>Color</th>
+						<th>Actions</th>
 					</tr>
 				</thead>
 				<tbody>
-					{users.map(({ name, avatarUrl, color }) => (
+					{users.map(({ id, name, avatarUrl, color }) => (
 						<tr>
 							<td>{name}</td>
 							<td>
@@ -86,6 +95,28 @@ export function Admin({ users, todos }: Props) {
 							<td style={`color: #${color}`}>
 								#{color}
 							</td>
+							<td>
+								<Button
+									title='Delete'
+									className='py-2'
+									onClick={() => promptDeleteUser(id, name)}
+								>
+									<svg
+										xmlns='http://www.w3.org/2000/svg'
+										fill='none'
+										viewBox='0 0 24 24'
+										stroke-width='1.5'
+										stroke='currentColor'
+										class='w-6 h-6'
+									>
+										<path
+											stroke-linecap='round'
+											stroke-linejoin='round'
+											d='m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0'
+										/>
+									</svg>
+								</Button>
+							</td>
 						</tr>
 					))}
 				</tbody>

routes/api/user.ts

@@ -53,7 +53,13 @@ export const handler: Handlers<User | null> = {
 	},
 	async DELETE(req, _ctx) {
 		// TODO: form or query params or json
-		const userData = UserModel.pick({ id: true }).parse(await req.json())
+		let data
+		if (req.headers.get('content-type')?.includes('json')) {
+			data = await req.json()
+		} else {
+			data = { id: new URL(req.url).searchParams.get('id') }
+		}
+		const userData = UserModel.pick({ id: true }).parse(data)
 		const result = await db.users.delete({ where: userData })
 		return new Response(JSON.stringify(result))
 	},