lytedev/homeman-deno
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Lots of cleanup

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

16
components/Nav.tsx
View file

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

16
components/TodoList.tsx
View file

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

1
deno.json
View file

@ -29,6 +29,7 @@
"tailwindcss": "npm:tailwindcss@3.3.5", "tailwindcss": "npm:tailwindcss@3.3.5",
"tailwindcss/": "npm:/tailwindcss@3.3.5/", "tailwindcss/": "npm:/tailwindcss@3.3.5/",
"tailwindcss/plugin": "npm:/tailwindcss@3.3.5/plugin.js", "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/", "$std/": "https://deno.land/std@0.208.0/",
"@homeman/": "./" "@homeman/": "./"
}, },

170
islands/Admin.tsx
View file

@ -1,13 +1,15 @@
import { createRef } from 'preact' import { JSX } from 'preact'
import { type Signal, useSignal } from '@preact/signals' import { type Signal, useSignal } from '@preact/signals'
import { Todo, User } from '@homeman/models.ts' import { Todo, User } from '@homeman/models.ts'
import { Button } from '@homeman/components/Button.tsx' import { Button } from '@homeman/components/Button.tsx'
import { Input } from '@homeman/components/Input.tsx' import { Input } from '@homeman/components/Input.tsx'
import { Label } from '@homeman/components/Label.tsx' import { Label } from '@homeman/components/Label.tsx'
import { Dialog } from '@homeman/components/Dialog.tsx'
import { PencilSquareOutline, TrashOutline } from 'preact-heroicons'
export interface Props { export interface Props {
users: User[] users: Record<string, User>
todos: Todo[] todos: Record<string, Todo>
} }
async function promptDeleteUser(id: string, name: string) { async function promptDeleteUser(id: string, name: string) {
@ -17,39 +19,26 @@ async function promptDeleteUser(id: string, name: string) {
} }
} }
export function Admin({ users, todos }: Props) { interface UserFormProps extends JSX.HTMLAttributes<HTMLFormElement> {
const editUser: Signal<User | null> = useSignal(null) onCancelButtonClicked: JSX.MouseEventHandler<HTMLButtonElement>
const addUserDialog = createRef<HTMLDialogElement>() userData: User | null
const editUserDialog = createRef<HTMLDialogElement>()
const usersById: Record<string, User> = {}
for (const u of users) {
usersById[u.id] = u
} }
function UserForm(
{ onCancelButtonClicked, userData, ...props }: UserFormProps,
) {
return ( 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 <form
{...props}
class='p-4 gap-4 flex flex-col' class='p-4 gap-4 flex flex-col'
action='/api/user' action='/api/user'
method='post' method='post'
encType='multipart/form-data' encType='multipart/form-data'
onSubmit={() => console.log('Submitting new user...')}
> >
{userData ? <Input type='hidden' name='id' value={userData.id} /> : <></>}
<Label for='name'> <Label for='name'>
Name Name
<Input autofocus name='name' /> <Input autofocus name='name' value={userData?.name} />
</Label> </Label>
<Label for='avatar'> <Label for='avatar'>
Avatar Avatar
@ -57,74 +46,51 @@ export function Admin({ users, todos }: Props) {
</Label> </Label>
<Label for='color'> <Label for='color'>
Color Color
<Input type='color' name='color' /> <Input type='color' name='color' value={`#${userData?.color}`} />
</Label> </Label>
<footer class='flex justify-end gap-2'> <footer class='flex justify-end gap-2'>
<Button <Button type='button' onClick={onCancelButtonClicked}>
onClick={() => addUserDialog.current?.close()}
>
Cancel Cancel
</Button> </Button>
<Input type='submit' value='Save' /> <Input type='submit' value='Save' />
</footer> </footer>
</form> </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' 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'> <UserForm
<h1 class='text-xl grow'>{`Edit '${editUser.value?.name}'`}</h1> onCancelButtonClicked={() => showAddUserDialog.value = false}
<Button userData={null}
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}`}
/> />
</Label> </Dialog>
<footer class='flex justify-end gap-2'> <Dialog
<Button headerTitle={`Edit '${editUser.value?.name}'`}
onClick={() => editUserDialog.current?.close()} class='rounded drop-shadow-lg backdrop:bg-stone-500/90'
show={!!editUser.value}
onClose={() => editUser.value = null}
> >
Cancel <UserForm
</Button> userData={editUser.value}
<Input type='submit' value='Save' /> onCancelButtonClicked={() => editUser.value = null}
</footer> />
</form> </Dialog>
</dialog>
<header class='flex items-center border-b-2 border-stone-500/20 '> <header class='flex items-center border-b-2 border-stone-500/20 '>
<h1 class='p-5 text-2xl'> <h1 class='p-5 text-2xl'>
Users ({users.length}) Users ({users.length})
</h1> </h1>
<Button onClick={() => addUserDialog.current?.showModal()}> <Button onClick={() => showAddUserDialog.value = true}>
Add User Add User
</Button> </Button>
</header> </header>
@ -138,8 +104,8 @@ export function Admin({ users, todos }: Props) {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{users.map((user) => { {Object.entries(users).map(([id, user]) => {
const { id, name, avatarUrl, color } = user const { name, avatarUrl, color } = user
return ( return (
<tr> <tr>
<td>{name}</td> <td>{name}</td>
@ -157,43 +123,14 @@ export function Admin({ users, todos }: Props) {
className='py-2 mr-2' className='py-2 mr-2'
onClick={() => promptDeleteUser(id, name)} 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>
<Button <Button
title='Edit' title='Edit'
className='py-2' 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> </Button>
</td> </td>
</tr> </tr>
@ -205,7 +142,6 @@ export function Admin({ users, todos }: Props) {
<h1 class='p-5 text-2xl'> <h1 class='p-5 text-2xl'>
Todos ({todos.length}) Todos ({todos.length})
</h1> </h1>
<Button>+</Button>
</header> </header>
<table class='border-separate [border-spacing:1.25rem] text-left'> <table class='border-separate [border-spacing:1.25rem] text-left'>
<thead> <thead>
@ -215,13 +151,15 @@ export function Admin({ users, todos }: Props) {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{todos.map(({ description, assigneeUserId }) => ( {Object.entries(todos).map((
[_id, { description, assigneeUserId }],
) => (
<tr> <tr>
<td>{description}</td> <td>{description}</td>
<td> <td>
{assigneeUserId == null {assigneeUserId == null
? 'Unassigned' ? 'Unassigned'
: usersById[assigneeUserId]?.name} : users[assigneeUserId]?.name}
</td> </td>
</tr> </tr>
))} ))}

57
routes/api/todo.ts
View file

@ -1,27 +1,64 @@
import { Handlers } from '$fresh/server.ts' import { Handlers } from '$fresh/server.ts'
import { db, Todo, TodoModel } from '@homeman/models.ts' import { db, Todo, TodoModel } from '@homeman/models.ts'
import { ulid } from 'https://deno.land/x/ulid@v0.3.0/mod.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> = { export const handler: Handlers<Todo | null> = {
async POST(req, _ctx) { 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))
},
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)) 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) { 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 }) const result = await db.todos.delete({ where: todoData })
return new Response(JSON.stringify(result)) return new Response(JSON.stringify(result))
}, },
async GET(req, _ctx) { async GET(req, _ctx) {
// TODO: json or query params
const data = await req.json().catch(() => {}) const data = await req.json().catch(() => {})
const todoData = TodoModel.pick({ id: true }).safeParse(data) const todoData = TodoModel.pick({ id: true }).safeParse(data)
if (todoData.success) { if (todoData.success) {

109
routes/api/user.ts
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 { 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' 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>
export const handler: Handlers<User | null> = { async function createOrUpdate(user: UserPayload) {
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
if (user.color && user.color[0] == '#') { if (user.color && user.color[0] == '#') {
user.color = user.color.substring(1) user.color = user.color.substring(1)
} }
if (!user.id) {
const newUser: User = { ...user, id: newId, createdAt: new Date() } const newUser: User = { ...user, id: ulid(), createdAt: new Date() }
const result = await db.users.create({ data: newUser }) return await db.users.create({ data: newUser })
if (redirectInstead) {
const url = new URL(req.url)
url.pathname = '/admin'
return Response.redirect(url, 303)
} else { } 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 export const handler: Handlers<User | null> = {
const model = UserModel.omit({ createdAt: true }).partial({ async POST(req, _ctx) {
avatarUrl: true,
})
let user: z.infer<typeof model>
let redirectInstead = false
if (req.headers.get('content-type')?.includes('json')) { if (req.headers.get('content-type')?.includes('json')) {
// TODO: ensure missing fields don't get set to null? const result = await createOrUpdate(UserPayload.parse(await req.json()))
user = model.parse(req.json()) return new Response(JSON.stringify(result))
} else { } else {
redirectInstead = true
const form = await req.formData() const form = await req.formData()
user = model.parse({ const id = form.get('id')?.toString()
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) 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? // 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 }) 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}`, { const localAvatarFile = await Deno.open(`./static/uploads/${name}`, {
create: true, create: true,
write: true, write: true,
}) })
await avatarFile.stream().pipeTo(localAvatarFile.writable) 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) const url = new URL(req.url)
url.pathname = '/admin' url.pathname = '/admin'
return Response.redirect(url, 303) return Response.redirect(url, 303)
} else {
return new Response(JSON.stringify(result))
} }
}, },
async DELETE(req, _ctx) { async DELETE(req, _ctx) {