Lots of cleanup

This commit is contained in:
Daniel Flanagan 2024-01-09 21:52:47 -06:00
parent 041fd8bb21
commit 86ecb24eec
Signed by: lytedev
GPG key ID: 5B2020A0F9921EF4
7 changed files with 217 additions and 234 deletions

44
components/Dialog.tsx Normal file
View file

@ -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>
)
}

View file

@ -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
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>
<Bars3Outline class='h-6 w-6' />
</button>
<a class='p-4 hover:bg-stone-500/20' href='/'>
Flanagan Family

View file

@ -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={`${
className || ''
} border-l-4 p-4 rounded drop-shadow-lg bg-white dark:bg-stone-900 flex flex-col`}
class={`${className || ''} ${
hideDone ? '' : 'border-l-4'
} 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'}

View file

@ -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/": "./"
},

View file

@ -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[]
todos: Todo[]
users: Record<string, User>
todos: Record<string, Todo>
}
async function promptDeleteUser(id: string, name: string) {
@ -17,39 +19,26 @@ async function promptDeleteUser(id: string, name: string) {
}
}
export function Admin({ users, todos }: Props) {
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
interface UserFormProps extends JSX.HTMLAttributes<HTMLFormElement> {
onCancelButtonClicked: JSX.MouseEventHandler<HTMLButtonElement>
userData: User | null
}
function UserForm(
{ onCancelButtonClicked, userData, ...props }: UserFormProps,
) {
return (
<main class='flex flex-col'>
<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
{...props}
class='p-4 gap-4 flex flex-col'
action='/api/user'
method='post'
encType='multipart/form-data'
onSubmit={() => console.log('Submitting new user...')}
>
{userData ? <Input type='hidden' name='id' value={userData.id} /> : <></>}
<Label for='name'>
Name
<Input autofocus name='name' />
<Input autofocus name='name' value={userData?.name} />
</Label>
<Label for='avatar'>
Avatar
@ -57,74 +46,51 @@ export function Admin({ users, todos }: Props) {
</Label>
<Label for='color'>
Color
<Input type='color' name='color' />
<Input type='color' name='color' value={`#${userData?.color}`} />
</Label>
<footer class='flex justify-end gap-2'>
<Button
onClick={() => addUserDialog.current?.close()}
>
<Button type='button' onClick={onCancelButtonClicked}>
Cancel
</Button>
<Input type='submit' value='Save' />
</footer>
</form>
</dialog>
<dialog
)
}
export function Admin({ users, todos }: Props) {
const showAddUserDialog = useSignal(false)
const editUser: Signal<User | null> = useSignal(null)
return (
<main class='flex flex-col'>
<Dialog
headerTitle='Add user'
class='rounded drop-shadow-lg backdrop:bg-stone-500/90'
ref={editUserDialog}
show={showAddUserDialog.value}
onClose={() => showAddUserDialog.value = false}
>
<header class='p-4 flex w-full items-center border-b-2 border-stone-500/20'>
<h1 class='text-xl grow'>{`Edit '${editUser.value?.name}'`}</h1>
<Button
onClick={() => editUserDialog.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'
// 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}`}
<UserForm
onCancelButtonClicked={() => showAddUserDialog.value = false}
userData={null}
/>
</Label>
<footer class='flex justify-end gap-2'>
<Button
onClick={() => editUserDialog.current?.close()}
</Dialog>
<Dialog
headerTitle={`Edit '${editUser.value?.name}'`}
class='rounded drop-shadow-lg backdrop:bg-stone-500/90'
show={!!editUser.value}
onClose={() => editUser.value = null}
>
Cancel
</Button>
<Input type='submit' value='Save' />
</footer>
</form>
</dialog>
<UserForm
userData={editUser.value}
onCancelButtonClicked={() => editUser.value = null}
/>
</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) => {
const { id, name, avatarUrl, color } = user
{Object.entries(users).map(([id, 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
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>
<TrashOutline class='w-6 h-6' />
</Button>
<Button
title='Edit'
className='py-2'
onClick={() => {
editUser.value = user
editUserDialog.current?.showModal()
}}
onClick={() => editUser.value = user}
>
<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='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>
<PencilSquareOutline class='w-6 h-6' />
</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>
))}

View file

@ -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())
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 })
if (req.headers.get('content-type')?.includes('json')) {
const result = await createOrUpdate(TodoPayload.parse(await req.json()))
return new Response(JSON.stringify(result))
} else {
const form = await req.formData()
const id = form.get('id')?.toString()
const doneAt = form.get('doneAt')
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) {

View file

@ -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 })
type UserCreate = z.infer<typeof UserCreate>
const UserPayload = UserModel.partial({ id: true }).omit({ createdAt: true })
type UserPayload = z.infer<typeof UserPayload>
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())
} else {
redirectInstead = true
const form = await req.formData()
const avatarFile = form.get('avatar') as File
if (!avatarFile) {
throw new Error('invalid avatar file')
}
// validate png/jpg/webp?
console.log(avatarFile.type)
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(),
})
}
// post processing
async function createOrUpdate(user: UserPayload) {
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)
if (!user.id) {
const newUser: User = { ...user, id: ulid(), createdAt: new Date() }
return await db.users.create({ data: newUser })
} else {
return new Response(JSON.stringify(result))
return await db.users.update({ where: { id: user.id }, data: user })
}
},
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
}
export const handler: Handlers<User | null> = {
async POST(req, _ctx) {
if (req.headers.get('content-type')?.includes('json')) {
// TODO: ensure missing fields don't get set to null?
user = model.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()
user = model.parse({
id: form.get('id')?.toString(),
name: form.get('name')?.toString(),
avatarUrl: null,
color: form.get('color')?.toString(),
})
const id = form.get('id')?.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?
console.log(avatarFile.type)
if (!avatarFile && !id) {
throw new Error('invalid avatar file')
}
const user = UserPayload.parse({
id: id,
name: form.get('name')?.toString(),
color: form.get('color')?.toString(),
avatarUrl: '',
})
if (!id) {
delete user.id
} else {
const curUser = await db.users.findFirst({ where: { id: id } })
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 })
if (redirectInstead) {
await createOrUpdate(user)
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) {