CRUD

.gitignore

@@ -11,3 +11,7 @@
 _fresh/
 # npm dependencies
 node_modules/
+
+*.db
+*.db-wal
+*.db-shm

components/Button.tsx

@@ -1,12 +1,14 @@
 import { JSX } from 'preact'
 import { IS_BROWSER } from '$fresh/runtime.ts'
 
-export function Button(props: JSX.HTMLAttributes<HTMLButtonElement>) {
+export function Button(
+	{ disabled, className, ...props }: JSX.HTMLAttributes<HTMLButtonElement>,
+) {
 	return (
 		<button
 			{...props}
-			disabled={!IS_BROWSER || props.disabled}
-			class='px-2 py-1 bg-gray-500/20 rounded hover:bg-gray-500/25 cursor-pointer transition-colors'
+			disabled={!IS_BROWSER || disabled}
+			class={`px-2 py-1 bg-gray-500/20 rounded hover:bg-gray-500/25 cursor-pointer transition-colors ${className}`}
 		/>
 	)
 }

components/Input.tsx

@@ -0,0 +1,24 @@
+import { JSX } from 'preact'
+
+export function Input(
+	{ className, ...props }: JSX.HTMLAttributes<HTMLInputElement>,
+) {
+	if (!props.id && props.name) {
+		props.id = props.name
+	} else if (!props.name && props.id) {
+		props.name = props.id
+	}
+	let defaultClassName =
+		'border-2 bg-stone-500/20 border-stone-500/20 px-2 py-1 rounded'
+	if (props.type == 'submit') {
+		defaultClassName =
+			'px-2 py-1 bg-emerald-500/20 rounded hover:bg-gray-500/25 cursor-pointer transition-colors'
+	}
+
+	return (
+		<input
+			{...props}
+			class={`${defaultClassName} ${className}`}
+		/>
+	)
+}

components/Label.tsx

@@ -0,0 +1,11 @@
+import { JSX } from 'preact'
+
+export function Label(
+	{ children, className, ...props }: JSX.HTMLAttributes<HTMLLabelElement>,
+) {
+	return (
+		<label {...props} class={`flex flex-col ${className}`} for='name'>
+			{children}
+		</label>
+	)
+}

components/TodoList.tsx

@@ -1,37 +1,44 @@
 import { Todo, UserWithTodos } from '@homeman/models.ts'
+import { Button } from '@homeman/components/Button.tsx'
 
 export interface Props {
 	user: UserWithTodos
 }
 
-export function TodoList({ user: { avatarUrl, assignedTodos, name } }: Props) {
-	const todoItem = ({ description }: Todo) => (
-		<li class='bg-white dark:bg-black drop-shadow-xl'>{description}</li>
+export function TodoList(
+	{ user: { avatarUrl, assignedTodos, name, color } }: Props,
+) {
+	const todoItem = (
+		{ classList, description }: Pick<Todo, 'description'> & {
+			classList?: string
+		},
+	) => (
+		<li
+			style={`border-color: #${color}`}
+			class={`${
+				classList || ''
+			} border-l-4 p-4 rounded drop-shadow-lg bg-white dark:bg-stone-900 flex flex-col`}
+		>
+			<span class='text-xl'>{description}</span>
+			<Button class='mt-2'>Done</Button>
+		</li>
 	)
 	return (
-		<div class='p-2 w-1/4 min-w-[10rem] relative flex flex-col grow-0'>
-			{avatarUrl != null
-				? (
-					<img
-						class='rounded-full w-full mb-2'
-						src={avatarUrl}
-						title={`${name}'s avatar`}
-					/>
-				)
-				: null}
+		<div class='p-2 w-1/4 min-w-[15rem] relative flex flex-col grow-0'>
+			<img
+				class='rounded-full w-full mb-2'
+				src={avatarUrl != null ? avatarUrl : 'https://placehold.co/512x512'}
+				title={`${name}'s avatar`}
+			/>
 			<span class='text-sky-800 dark:text-sky-200 font-semibold text-center'>
 				{name}
 			</span>
 			<button class='mt-4 mb-4 text-left w-full px-2 py-1 rounded-lg border-[1px] text-stone-500 border-stone-500 opacity-50 hover:opacity-100'>
 				+ New
 			</button>
-			<ul class=''>
+			<ul class='flex flex-col gap-y-4'>
 				{assignedTodos.length < 1
-					? (
-						<li class='p-4 rounded-lg text-center drop-shadow-xl bg-white dark:bg-stone-900'>
-							All clear! 🎉
-						</li>
-					)
+					? todoItem({ description: 'All clear! 🎉', classList: 'text-center' })
 					: assignedTodos.map(todoItem)}
 			</ul>
 		</div>

crud.ts

@@ -0,0 +1,47 @@
+import { Handlers } from '$fresh/server.ts'
+import { ulid } from 'https://deno.land/x/ulid@v0.3.0/mod.ts'
+import { type AnyZodObject } from 'https://deno.land/x/zod@v3.21.4/mod.ts'
+import { db } from '@homeman/models.ts'
+
+export function crudHandler<
+	SchemaName extends keyof typeof db,
+	Schema = db[SchemaName
+	CreateSchema extends AnyZodObject,
+	Creator extends (s: CreateSchema) => Promise<Schema>,
+>(
+	schema: SchemaName,
+	createModel: CreateSchema,
+	creator: Creator,
+): Handlers<typeof db[SchemaName]Schema | null> {
+	return {
+		async POST(req, _ctx) {
+			const data = createModel.parse(await req.json())
+			const newModel: typeof db[SchemaName] = await creator(
+				data as CreateSchema,
+			)
+			const result = await db[schema].create({ data: newModel })
+			return new Response(JSON.stringify(result))
+		},
+		async PUT(req, _ctx) {
+			const user = UserModel.parse(await req.json())
+			const result = await db.users.update({ data: user })
+			return new Response(JSON.stringify(result))
+		},
+		async DELETE(req, _ctx) {
+			const userData = UserModel.pick({ id: true }).parse(await req.json())
+			const result = await db.users.delete({ where: userData })
+			return new Response(JSON.stringify(result))
+		},
+		async GET(req, _ctx) {
+			const data = await req.json().catch(() => {})
+			const userData = UserModel.pick({ id: true }).safeParse(data)
+			if (userData.success) {
+				return new Response(
+					JSON.stringify(await db.users.findFirst({ where: userData.data })),
+				)
+			} else {
+				return new Response(JSON.stringify(await db.users.findMany({})))
+			}
+		},
+	}
+}

flake.nix

@@ -14,6 +14,7 @@
       deno-dev = pkgs.mkShell {
         buildInputs = with pkgs; [
           deno
+          xh
         ];
       };
 

fresh.gen.ts

@@ -6,6 +6,8 @@ import * as $_404 from './routes/_404.tsx'
 import * as $_app from './routes/_app.tsx'
 import * as $admin from './routes/admin.tsx'
 import * as $api_joke from './routes/api/joke.ts'
+import * as $api_todo from './routes/api/todo.ts'
+import * as $api_user from './routes/api/user.ts'
 import * as $greet_name_ from './routes/greet/[name].tsx'
 import * as $index from './routes/index.tsx'
 import * as $Admin from './islands/Admin.tsx'
@@ -19,6 +21,8 @@ const manifest = {
 		'./routes/_app.tsx': $_app,
 		'./routes/admin.tsx': $admin,
 		'./routes/api/joke.ts': $api_joke,
+		'./routes/api/todo.ts': $api_todo,
+		'./routes/api/user.ts': $api_user,
 		'./routes/greet/[name].tsx': $greet_name_,
 		'./routes/index.tsx': $index,
 	},

islands/Admin.tsx

@@ -1,6 +1,8 @@
 import { createRef } from 'preact'
 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'
 
 export interface Props {
 	users: User[]
@@ -15,7 +17,42 @@ export function Admin({ users, todos }: Props) {
 	}
 	return (
 		<main class='flex flex-col'>
-			<dialog ref={addUserDialog}>sup</dialog>
+			<dialog
+				class='rounded drop-shadow-lg backdrop:bg-stone-500/90'
+				ref={addUserDialog}
+			>
+				<header class='p-4 flex w-full items-center border-b-2 border-stone-500/20'>
+					<h1 class='text-xl grow'>Add user</h1>
+					<Button
+						onClick={() => addUserDialog.current?.close()}
+						class='text-xl p-4 border-b-2 mr-4'
+					>
+						✕
+					</Button>
+				</header>
+				<form class='p-4 gap-4 flex flex-col' action='/api/user' method='post'>
+					<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>
 			<header class='flex items-center border-b-2 border-stone-500/20 '>
 				<h1 class='p-5 text-2xl'>
 					Users ({users.length})
@@ -37,9 +74,11 @@ export function Admin({ users, todos }: Props) {
 						<tr>
 							<td>{name}</td>
 							<td>
-								{avatarUrl == null ? 'None' : <img class='' src={avatarUrl} />}
+								{avatarUrl == null
+									? 'None'
+									: <img class='h-16 w-16' src={avatarUrl} />}
 							</td>
-							<td>
+							<td style={`color: #${color}`}>
 								#{color}
 							</td>
 						</tr>

models.ts

@@ -2,7 +2,7 @@ import { z } from 'https://deno.land/x/zod@v3.21.4/mod.ts'
 import { createPentagon } from 'https://deno.land/x/pentagon@v0.1.5/mod.ts'
 // import { ulid } from 'https://deno.land/x/ulid@v0.3.0/mod.ts'
 
-const kv = await Deno.openKv()
+const kv = await Deno.openKv('homeman.db')
 
 // const todos = kv.list({ prefix: ['todos'] })
 // const deleteme = []
@@ -22,6 +22,7 @@ const User = z.object({
 	avatarUrl: z.string().nullable(),
 	color: z.string().nullable(),
 })
+export const UserModel = User
 export type User = z.infer<typeof User>
 export type UserWithTodos = User & {
 	assignedTodos: Todo[]
@@ -37,6 +38,7 @@ const Todo = z.object({
 	doneAt: z.date().nullable(),
 	assigneeUserId: z.string().ulid().nullable(),
 })
+export const TodoModel = Todo
 export type Todo = z.infer<typeof Todo>
 
 export const db = createPentagon(kv, {

routes/api/todo.ts

@@ -0,0 +1,35 @@
+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'
+
+const TodoCreate = TodoModel.omit({ id: true, createdAt: true })
+
+export const handler: Handlers<Todo | null> = {
+	async POST(req, _ctx) {
+		const todo = TodoCreate.parse(await req.json())
+		const newTodo: Todo = { ...todo, id: ulid(), createdAt: new Date() }
+		const result = await db.todos.create({ data: newTodo })
+		return new Response(JSON.stringify(result))
+	},
+	async PUT(req, _ctx) {
+		const todo = TodoModel.parse(await req.json())
+		const result = await db.todos.update({ data: todo })
+		return new Response(JSON.stringify(result))
+	},
+	async DELETE(req, _ctx) {
+		const todoData = TodoModel.pick({ id: true }).parse(await req.json())
+		const result = await db.todos.delete({ where: todoData })
+		return new Response(JSON.stringify(result))
+	},
+	async GET(req, _ctx) {
+		const data = await req.json().catch(() => {})
+		const todoData = TodoModel.pick({ id: true }).safeParse(data)
+		if (todoData.success) {
+			return new Response(
+				JSON.stringify(await db.todos.findFirst({ where: todoData.data })),
+			)
+		} else {
+			return new Response(JSON.stringify(await db.todos.findMany({})))
+		}
+	},
+}

routes/api/user.ts

@@ -0,0 +1,37 @@
+import { Handlers } from '$fresh/server.ts'
+import { db, User, UserModel } from '@homeman/models.ts'
+import { ulid } from 'https://deno.land/x/ulid@v0.3.0/mod.ts'
+
+const UserCreate = UserModel.omit({ id: true, createdAt: true })
+
+export const handler: Handlers<User | null> = {
+	async POST(req, _ctx) {
+		const formData = await req.formData()
+		console.log('user form data POSTed', formData)
+		const user = UserCreate.parse(formData)
+		const newUser: User = { ...user, id: ulid(), createdAt: new Date() }
+		const result = await db.users.create({ data: newUser })
+		return new Response(JSON.stringify(result))
+	},
+	async PUT(req, _ctx) {
+		const user = UserModel.parse(await req.json())
+		const result = await db.users.update({ data: user })
+		return new Response(JSON.stringify(result))
+	},
+	async DELETE(req, _ctx) {
+		const userData = UserModel.pick({ id: true }).parse(await req.json())
+		const result = await db.users.delete({ where: userData })
+		return new Response(JSON.stringify(result))
+	},
+	async GET(req, _ctx) {
+		const data = await req.json().catch(() => {})
+		const userData = UserModel.pick({ id: true }).safeParse(data)
+		if (userData.success) {
+			return new Response(
+				JSON.stringify(await db.users.findFirst({ where: userData.data })),
+			)
+		} else {
+			return new Response(JSON.stringify(await db.users.findMany({})))
+		}
+	},
+}

routes/index.tsx

@@ -37,7 +37,7 @@ export default function Home(
 			<h1 class='p-5 border-b-2 border-stone-500/20 text-2xl'>
 				Todos
 			</h1>
-			<ul class='p-4 relative'>
+			<ul class='p-4 relative flex'>
 				<li>
 					<TodoList user={unassignedUser} />
 				</li>

static/styles.css

@@ -2,5 +2,9 @@
 @tailwind components;
 @tailwind utilities;
 
+dialog {
+  @apply bg-stone-100 text-stone-950 dark:bg-stone-950 dark:text-stone-100;
+}
+
 body {
 }