Lots of cleanup

components/Dialog.tsx

@@ -0,0 +1,44 @@
+import { createRef, JSX } from 'preact'
+import { Button } from '@homeman/components/Button.tsx'
+import { useEffect } from 'preact/hooks'
+
+interface Props extends JSX.HTMLAttributes<HTMLDialogElement> {
+	headerTitle: string
+	show?: boolean
+}
+
+export function Dialog(
+	{ show, headerTitle, children, className, ...props }: Props,
+) {
+	const self = createRef<HTMLDialogElement>()
+
+	useEffect(() => {
+		if (show) {
+			self.current?.showModal()
+		} else {
+			self.current?.close()
+		}
+		return () => {
+			// cleanup
+		}
+	}, [show])
+
+	return (
+		<dialog
+			{...props}
+			class={`rounded drop-shadow-lg backdrop:bg-stone-500/90 ${className}`}
+			ref={self}
+		>
+			<header class='p-4 flex w-full items-center border-b-2 border-stone-500/20'>
+				<h1 class='text-xl grow'>{headerTitle}</h1>
+				<Button
+					onClick={() => self.current?.close()}
+					class='text-xl p-4 border-b-2 mr-4'
+				>
+					✕
+				</Button>
+			</header>
+			{children}
+		</dialog>
+	)
+}

components/Nav.tsx

@@ -1,26 +1,14 @@
 // import { JSX } from 'preact'
 // import { IS_BROWSER } from '$fresh/runtime.ts'
 
+import { Bars3Outline } from 'preact-heroicons'
 import { Clock } from '@homeman/islands/Clock.tsx'
 
 export function Nav(/* props: {} */) {
 	return (
 		<nav class='bg-stone-200 dark:bg-stone-800 flex justify-items-start items-center'>
 			<button class='p-4 hover:bg-stone-500/20'>
-				<svg
+				<Bars3Outline class='h-6 w-6' />
-					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='M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5'
-					/>
-				</svg>
 			</button>
 			<a class='p-4 hover:bg-stone-500/20' href='/'>
 				Flanagan Family

components/TodoList.tsx

@@ -1,5 +1,7 @@
 import { Todo, UserWithTodos } from '@homeman/models.ts'
 import { Button } from '@homeman/components/Button.tsx'
+import { Dialog } from '@homeman/components/Dialog.tsx'
+import { createRef } from 'preact'
 
 export interface Props {
 	user: UserWithTodos
@@ -8,6 +10,7 @@ export interface Props {
 export function TodoList(
 	{ user: { avatarUrl, assignedTodos, name, color } }: Props,
 ) {
+	const addTodoDialog = createRef<HTMLDialogElement>()
 	const todoItem = (
 		{ className, description, hideDone }: Pick<Todo, 'description'> & {
 			className?: string
@@ -16,9 +19,9 @@ export function TodoList(
 	) => (
 		<li
 			style={`border-color: #${color}`}
-			class={`${
+			class={`${className || ''} ${
-				className || ''
+				hideDone ? '' : 'border-l-4'
-			} border-l-4 p-4 rounded drop-shadow-lg bg-white dark:bg-stone-900 flex flex-col`}
+			} p-4 rounded drop-shadow-lg bg-white dark:bg-stone-900 flex flex-col`}
 		>
 			<span class='text-xl'>{description}</span>
 			{hideDone ? '' : <Button class='mt-2'>Done</Button>}
@@ -26,6 +29,13 @@ export function TodoList(
 	)
 	return (
 		<div class='p-2 w-1/4 min-w-[15rem] relative flex flex-col grow-0'>
+			<Dialog
+				headerTitle='Add todo'
+				class='rounded drop-shadow-lg backdrop:bg-stone-500/90'
+				ref={addTodoDialog}
+			>
+				sup
+			</Dialog>
 			<img
 				class='rounded-full w-[15rem] h-[15rem] mb-2 object-cover'
 				src={avatarUrl != null ? avatarUrl : 'https://placehold.co/512x512'}

deno.json

@@ -29,6 +29,7 @@
 		"tailwindcss": "npm:tailwindcss@3.3.5",
 		"tailwindcss/": "npm:/tailwindcss@3.3.5/",
 		"tailwindcss/plugin": "npm:/tailwindcss@3.3.5/plugin.js",
+		"preact-heroicons": "https://esm.sh/preact-heroicons@2.1.1",
 		"$std/": "https://deno.land/std@0.208.0/",
 		"@homeman/": "./"
 	},

islands/Admin.tsx

@@ -1,13 +1,15 @@
-import { createRef } from 'preact'
+import { JSX } from 'preact'
 import { type Signal, useSignal } from '@preact/signals'
 import { Todo, User } from '@homeman/models.ts'
 import { Button } from '@homeman/components/Button.tsx'
 import { Input } from '@homeman/components/Input.tsx'
 import { Label } from '@homeman/components/Label.tsx'
+import { Dialog } from '@homeman/components/Dialog.tsx'
+import { PencilSquareOutline, TrashOutline } from 'preact-heroicons'
 
 export interface Props {
-	users: User[]
+	users: Record<string, User>
-	todos: Todo[]
+	todos: Record<string, Todo>
 }
 
 async function promptDeleteUser(id: string, name: string) {
@@ -17,114 +19,78 @@ async function promptDeleteUser(id: string, name: string) {
 	}
 }
 
+interface UserFormProps extends JSX.HTMLAttributes<HTMLFormElement> {
+	onCancelButtonClicked: JSX.MouseEventHandler<HTMLButtonElement>
+	userData: User | null
+}
+
+function UserForm(
+	{ onCancelButtonClicked, userData, ...props }: UserFormProps,
+) {
+	return (
+		<form
+			{...props}
+			class='p-4 gap-4 flex flex-col'
+			action='/api/user'
+			method='post'
+			encType='multipart/form-data'
+		>
+			{userData ? <Input type='hidden' name='id' value={userData.id} /> : <></>}
+			<Label for='name'>
+				Name
+				<Input autofocus name='name' value={userData?.name} />
+			</Label>
+			<Label for='avatar'>
+				Avatar
+				<Input type='file' name='avatar' />
+			</Label>
+			<Label for='color'>
+				Color
+				<Input type='color' name='color' value={`#${userData?.color}`} />
+			</Label>
+			<footer class='flex justify-end gap-2'>
+				<Button type='button' onClick={onCancelButtonClicked}>
+					Cancel
+				</Button>
+				<Input type='submit' value='Save' />
+			</footer>
+		</form>
+	)
+}
+
 export function Admin({ users, todos }: Props) {
+	const showAddUserDialog = useSignal(false)
 	const editUser: Signal<User | null> = useSignal(null)
-	const addUserDialog = createRef<HTMLDialogElement>()
+
-	const editUserDialog = createRef<HTMLDialogElement>()
-	const usersById: Record<string, User> = {}
-	for (const u of users) {
-		usersById[u.id] = u
-	}
 	return (
 		<main class='flex flex-col'>
-			<dialog
+			<Dialog
+				headerTitle='Add user'
 				class='rounded drop-shadow-lg backdrop:bg-stone-500/90'
-				ref={addUserDialog}
+				show={showAddUserDialog.value}
+				onClose={() => showAddUserDialog.value = false}
 			>
-				<header class='p-4 flex w-full items-center border-b-2 border-stone-500/20'>
+				<UserForm
-					<h1 class='text-xl grow'>Add user</h1>
+					onCancelButtonClicked={() => showAddUserDialog.value = false}
-					<Button
+					userData={null}
-						onClick={() => addUserDialog.current?.close()}
+				/>
-						class='text-xl p-4 border-b-2 mr-4'
+			</Dialog>
-					>
+			<Dialog
-						✕
+				headerTitle={`Edit '${editUser.value?.name}'`}
-					</Button>
-				</header>
-				<form
-					class='p-4 gap-4 flex flex-col'
-					action='/api/user'
-					method='post'
-					encType='multipart/form-data'
-					onSubmit={() => console.log('Submitting new user...')}
-				>
-					<Label for='name'>
-						Name
-						<Input autofocus name='name' />
-					</Label>
-					<Label for='avatar'>
-						Avatar
-						<Input type='file' name='avatar' />
-					</Label>
-					<Label for='color'>
-						Color
-						<Input type='color' name='color' />
-					</Label>
-					<footer class='flex justify-end gap-2'>
-						<Button
-							onClick={() => addUserDialog.current?.close()}
-						>
-							Cancel
-						</Button>
-						<Input type='submit' value='Save' />
-					</footer>
-				</form>
-			</dialog>
-			<dialog
 				class='rounded drop-shadow-lg backdrop:bg-stone-500/90'
-				ref={editUserDialog}
+				show={!!editUser.value}
+				onClose={() => editUser.value = null}
 			>
-				<header class='p-4 flex w-full items-center border-b-2 border-stone-500/20'>
+				<UserForm
-					<h1 class='text-xl grow'>{`Edit '${editUser.value?.name}'`}</h1>
+					userData={editUser.value}
-					<Button
+					onCancelButtonClicked={() => editUser.value = null}
-						onClick={() => editUserDialog.current?.close()}
+				/>
-						class='text-xl p-4 border-b-2 mr-4'
+			</Dialog>
-					>
-						✕
-					</Button>
-				</header>
-				<form
-					class='p-4 gap-4 flex flex-col'
-					action='/api/user'
-					// TODO:
-					// Form contains enctype=multipart/form-data, but does not contain method=post.
-					// Submitting normally with method=GET and no enctype instead.
-					// possible workaround? https://stackoverflow.com/questions/50691938/patch-and-put-request-does-not-working-with-form-data
-					method='put'
-					encType='multipart/form-data'
-					onSubmit={() => console.log('Submitting edit user...')}
-				>
-					<Input type='hidden' name='id' value={editUser.value?.id} />
-					<Label for='name'>
-						Name
-						<Input autofocus name='name' value={editUser.value?.name} />
-					</Label>
-					<Label for='avatar'>
-						Avatar
-						<Input type='file' name='avatar' />
-					</Label>
-					<Label for='color'>
-						Color
-						<Input
-							type='color'
-							name='color'
-							value={`#${editUser.value?.color}`}
-						/>
-					</Label>
-					<footer class='flex justify-end gap-2'>
-						<Button
-							onClick={() => editUserDialog.current?.close()}
-						>
-							Cancel
-						</Button>
-						<Input type='submit' value='Save' />
-					</footer>
-				</form>
-			</dialog>
 			<header class='flex items-center border-b-2 border-stone-500/20 '>
 				<h1 class='p-5 text-2xl'>
 					Users ({users.length})
 				</h1>
-				<Button onClick={() => addUserDialog.current?.showModal()}>
+				<Button onClick={() => showAddUserDialog.value = true}>
 					Add User
 				</Button>
 			</header>
@@ -138,8 +104,8 @@ export function Admin({ users, todos }: Props) {
 					</tr>
 				</thead>
 				<tbody>
-					{users.map((user) => {
+					{Object.entries(users).map(([id, user]) => {
-						const { id, name, avatarUrl, color } = user
+						const { name, avatarUrl, color } = user
 						return (
 							<tr>
 								<td>{name}</td>
@@ -157,43 +123,14 @@ export function Admin({ users, todos }: Props) {
 										className='py-2 mr-2'
 										onClick={() => promptDeleteUser(id, name)}
 									>
-										<svg
+										<TrashOutline class='w-6 h-6' />
-											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>
 									<Button
 										title='Edit'
 										className='py-2'
-										onClick={() => {
+										onClick={() => editUser.value = user}
-											editUser.value = user
-											editUserDialog.current?.showModal()
-										}}
 									>
-										<svg
+										<PencilSquareOutline class='w-6 h-6' />
-											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='m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10'
-											/>
-										</svg>
 									</Button>
 								</td>
 							</tr>
@@ -205,7 +142,6 @@ export function Admin({ users, todos }: Props) {
 				<h1 class='p-5 text-2xl'>
 					Todos ({todos.length})
 				</h1>
-				<Button>+</Button>
 			</header>
 			<table class='border-separate [border-spacing:1.25rem] text-left'>
 				<thead>
@@ -215,13 +151,15 @@ export function Admin({ users, todos }: Props) {
 					</tr>
 				</thead>
 				<tbody>
-					{todos.map(({ description, assigneeUserId }) => (
+					{Object.entries(todos).map((
+						[_id, { description, assigneeUserId }],
+					) => (
 						<tr>
 							<td>{description}</td>
 							<td>
 								{assigneeUserId == null
 									? 'Unassigned'
-									: usersById[assigneeUserId]?.name}
+									: users[assigneeUserId]?.name}
 							</td>
 						</tr>
 					))}

routes/api/todo.ts

@@ -1,27 +1,64 @@
 import { Handlers } from '$fresh/server.ts'
 import { db, Todo, TodoModel } from '@homeman/models.ts'
 import { ulid } from 'https://deno.land/x/ulid@v0.3.0/mod.ts'
+import { z } from 'https://deno.land/x/zod@v3.21.4/mod.ts'
 
-const TodoCreate = TodoModel.omit({ id: true, createdAt: true })
+const TodoPayload = TodoModel.partial({ id: true }).omit({ createdAt: true })
+type TodoPayload = z.infer<typeof TodoPayload>
+
+async function createOrUpdate(todo: TodoPayload) {
+	if (!todo.id) {
+		const newTodo: Todo = { ...todo, id: ulid(), createdAt: new Date() }
+		return await db.todos.create({ data: newTodo })
+	} else {
+		return await db.todos.update({ where: { id: todo.id }, data: todo })
+	}
+}
 
 export const handler: Handlers<Todo | null> = {
 	async POST(req, _ctx) {
-		const todo = TodoCreate.parse(await req.json())
+		if (req.headers.get('content-type')?.includes('json')) {
-		const newTodo: Todo = { ...todo, id: ulid(), createdAt: new Date() }
+			const result = await createOrUpdate(TodoPayload.parse(await req.json()))
-		const result = await db.todos.create({ data: newTodo })
+			return new Response(JSON.stringify(result))
-		return new Response(JSON.stringify(result))
+		} else {
-	},
+			const form = await req.formData()
-	async PUT(req, _ctx) {
+			const id = form.get('id')?.toString()
-		const todo = TodoModel.parse(await req.json())
+
-		const result = await db.todos.update({ data: todo })
+			const doneAt = form.get('doneAt')
-		return new Response(JSON.stringify(result))
+			console.log('todo POST doneAt:', doneAt)
+
+			const todo = TodoPayload.parse({
+				id: id,
+				emoji: form.get('emoji')?.toString(),
+				description: form.get('description')?.toString(),
+				assigneeUserId: form.get('assigneeUserId')?.toString(),
+			})
+
+			if (!id) {
+				delete todo.id
+			}
+
+			await createOrUpdate(todo)
+
+			const url = new URL(req.url)
+			url.pathname = '/admin'
+			return Response.redirect(url, 303)
+		}
 	},
 	async DELETE(req, _ctx) {
-		const todoData = TodoModel.pick({ id: true }).parse(await req.json())
+		// TODO: form or query params or 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 todoData = TodoModel.pick({ id: true }).parse(data)
 		const result = await db.todos.delete({ where: todoData })
 		return new Response(JSON.stringify(result))
 	},
 	async GET(req, _ctx) {
+		// TODO: json or query params
 		const data = await req.json().catch(() => {})
 		const todoData = TodoModel.pick({ id: true }).safeParse(data)
 		if (todoData.success) {

routes/api/user.ts

@@ -3,100 +3,65 @@ import { db, User, UserModel } from '@homeman/models.ts'
 import { ulid } from 'https://deno.land/x/ulid@v0.3.0/mod.ts'
 import { z } from 'https://deno.land/x/zod@v3.21.4/mod.ts'
 
-const UserCreate = UserModel.omit({ id: true, createdAt: true })
+const UserPayload = UserModel.partial({ id: true }).omit({ createdAt: true })
-type UserCreate = z.infer<typeof UserCreate>
+type UserPayload = z.infer<typeof UserPayload>
+
+async function createOrUpdate(user: UserPayload) {
+	if (user.color && user.color[0] == '#') {
+		user.color = user.color.substring(1)
+	}
+	if (!user.id) {
+		const newUser: User = { ...user, id: ulid(), createdAt: new Date() }
+		return await db.users.create({ data: newUser })
+	} else {
+		return await db.users.update({ where: { id: user.id }, data: user })
+	}
+}
 
 export const handler: Handlers<User | null> = {
 	async POST(req, _ctx) {
-		// handle json or form posts
-		let user: UserCreate
-		let redirectInstead = false
-		const newId = ulid()
 		if (req.headers.get('content-type')?.includes('json')) {
-			user = UserCreate.parse(req.json())
+			const result = await createOrUpdate(UserPayload.parse(await req.json()))
+			return new Response(JSON.stringify(result))
 		} else {
-			redirectInstead = true
 			const form = await req.formData()
-			const avatarFile = form.get('avatar') as File
+			const id = form.get('id')?.toString()
-			if (!avatarFile) {
+
+			const avatarFile = form.get('avatar') as (File | null)
+			// validate png/jpg/webp?
+			if (!avatarFile && !id) {
 				throw new Error('invalid avatar file')
 			}
 
-			// validate png/jpg/webp?
+			const user = UserPayload.parse({
-			console.log(avatarFile.type)
+				id: id,
-			await Deno.mkdir('./static/uploads', { recursive: true })
-			const name = `${newId}-${avatarFile.name.replaceAll('/', '')}`
-			const localAvatarFile = await Deno.open(`./static/uploads/${name}`, {
-				create: true,
-				write: true,
-			})
-			await avatarFile.stream().pipeTo(localAvatarFile.writable)
-
-			user = UserCreate.parse({
 				name: form.get('name')?.toString(),
-				avatarUrl: `/uploads/${name}`,
 				color: form.get('color')?.toString(),
+				avatarUrl: '',
 			})
-		}
+			if (!id) {
-
+				delete user.id
-		// post processing
-		if (user.color && user.color[0] == '#') {
-			user.color = user.color.substring(1)
-		}
-
-		const newUser: User = { ...user, id: newId, createdAt: new Date() }
-		const result = await db.users.create({ data: newUser })
-		if (redirectInstead) {
-			const url = new URL(req.url)
-			url.pathname = '/admin'
-			return Response.redirect(url, 303)
-		} else {
-			return new Response(JSON.stringify(result))
-		}
-	},
-	async PUT(req, _ctx) {
-		// TODO: form or json
-		const model = UserModel.omit({ createdAt: true }).partial({
-			avatarUrl: true,
-		})
-		let user: z.infer<typeof model>
-		let redirectInstead = false
-		if (req.headers.get('content-type')?.includes('json')) {
-			// TODO: ensure missing fields don't get set to null?
-			user = model.parse(req.json())
-		} else {
-			redirectInstead = true
-			const form = await req.formData()
-			user = model.parse({
-				id: form.get('id')?.toString(),
-				name: form.get('name')?.toString(),
-				avatarUrl: null,
-				color: form.get('color')?.toString(),
-			})
-			const avatarFile = form.get('avatar') as (File | null)
-			if (!avatarFile) {
-				user.avatarUrl =
-					(await db.users.findFirst({ where: { id: user.id } })).avatarUrl
 			} else {
-				// validate png/jpg/webp?
+				const curUser = await db.users.findFirst({ where: { id: id } })
-				console.log(avatarFile.type)
+				user.avatarUrl = curUser.avatarUrl
+			}
+
+			if (avatarFile) {
 				await Deno.mkdir('./static/uploads', { recursive: true })
-				const name = `${user.id}-${avatarFile.name.replaceAll('/', '')}`
+				const name = `${id}-${avatarFile.name.replaceAll('/', '')}`
 				const localAvatarFile = await Deno.open(`./static/uploads/${name}`, {
 					create: true,
 					write: true,
 				})
 				await avatarFile.stream().pipeTo(localAvatarFile.writable)
+				user.avatarUrl = `/uploads/${name}`
 			}
-		}
 
-		const result = await db.users.update({ data: user })
+			await createOrUpdate(user)
-		if (redirectInstead) {
+
 			const url = new URL(req.url)
 			url.pathname = '/admin'
 			return Response.redirect(url, 303)
-		} else {
-			return new Response(JSON.stringify(result))
 		}
 	},
 	async DELETE(req, _ctx) {