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

Merge remote-tracking branch 'origin/master'

Browse source
This commit is contained in:
Daniel Flanagan 2024-01-16 19:20:59 -06:00
parent 5e79a4cebf bdb444328b
commit 871472deff
Signed by: lytedev
GPG key ID: 5B2020A0F9921EF4
14 changed files with 209 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
components/Nav.tsx
View file

@ -1,19 +0,0 @@
// 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'>
<Bars3Outline class='h-6 w-6' />
</button>
<a class='p-4 hover:bg-stone-500/20' href='/'>
Flanagan Family
</a>
<Clock class='ml-auto pr-4 text-2xl' />
</nav>
)
}

26
deno.json
View file

@ -9,19 +9,10 @@
"preview": "deno run -A main.ts",
"update": "deno run -A -r https://fresh.deno.dev/update ."
},
"lint": {
"rules": {
"tags": [
"fresh",
"recommended"
]
}
},
"exclude": [
"**/_fresh/*"
],
"lint": { "rules": { "tags": ["fresh", "recommended"] } },
"exclude": ["**/_fresh/*"],
"imports": {
"$fresh/": "https://deno.land/x/fresh@1.6.1/",
"$fresh/": "https://deno.land/x/fresh@1.6.3/",
"preact": "https://esm.sh/preact@10.19.2",
"preact/": "https://esm.sh/preact@10.19.2/",
"@preact/signals": "https://esm.sh/*@preact/signals@1.2.1",
@ -33,15 +24,8 @@
"$std/": "https://deno.land/std@0.208.0/",
"@homeman/": "./"
},
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "preact"
},
"fmt": {
"useTabs": true,
"semiColons": false,
"singleQuote": true
},
"compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" },
"fmt": { "useTabs": true, "semiColons": false, "singleQuote": true },
"unstable": ["kv"],
"nodeModulesDir": true
}

8
flake.lock
View file

@ -2,17 +2,17 @@
"nodes": {
"nixpkgs": {
"locked": {
"lastModified": 1701718080,
"narHash": "sha256-6ovz0pG76dE0P170pmmZex1wWcQoeiomUZGggfH9XPs=",
"lastModified": 1705316053,
"narHash": "sha256-J2Ey5mPFT8gdfL2XC0JTZvKaBw/b2pnyudEXFvl+dQM=",
"owner": "NixOS",
"repo": "nixpkgs",
"rev": "2c7f3c0fb7c08a0814627611d9d7d45ab6d75335",
"rev": "c3e128f3c0ecc1fb04aef9f72b3dcc2f6cecf370",
"type": "github"
},
"original": {
"owner": "NixOS",
"ref": "nixos-unstable",
"repo": "nixpkgs",
"rev": "2c7f3c0fb7c08a0814627611d9d7d45ab6d75335",
"type": "github"
}
},

2
flake.nix
View file

@ -1,5 +1,5 @@
{
inputs.nixpkgs.url = "github:NixOS/nixpkgs?rev=2c7f3c0fb7c08a0814627611d9d7d45ab6d75335";
inputs.nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
outputs = {
self,
nixpkgs,

2
fresh.gen.ts
View file

@ -15,6 +15,7 @@ import * as $Admin from './islands/Admin.tsx'
import * as $Clock from './islands/Clock.tsx'
import * as $Counter from './islands/Counter.tsx'
import * as $Dashboard from './islands/Dashboard.tsx'
import * as $Nav from './islands/Nav.tsx'
import * as $TodoList from './islands/TodoList.tsx'
import { type Manifest } from '$fresh/server.ts'
@ -35,6 +36,7 @@ const manifest = {
'./islands/Clock.tsx': $Clock,
'./islands/Counter.tsx': $Counter,
'./islands/Dashboard.tsx': $Dashboard,
'./islands/Nav.tsx': $Nav,
'./islands/TodoList.tsx': $TodoList,
},
baseUrl: import.meta.url,

35
islands/Admin.tsx
View file

@ -21,12 +21,23 @@ export interface Props {
}
async function promptDeleteUser(id: string, name: string) {
if (confirm(`Are you sure you want to delete ${name} (${id})?`)) {
if (confirm(`Are you sure you want to delete '${name}' (${id})?`)) {
await fetch(`/api/user?id=${id}`, { method: 'DELETE' })
location.reload()
}
}
async function promptDeleteTodo(id: string, description: string) {
if (confirm(`Are you sure you want to delete '${description}' (${id})?`)) {
await fetch(`/api/todo`, {
method: 'DELETE',
headers: { 'content-type': 'application/json' },
body: JSON.stringify({ id }),
})
location.reload()
}
}
interface UserFormProps extends JSX.HTMLAttributes<HTMLFormElement> {
onCancelButtonClicked: JSX.MouseEventHandler<HTMLButtonElement>
userData: User | null
@ -128,7 +139,7 @@ export function Admin({ users, todos }: Props) {
<td class=''>
<Button
title='Delete'
className='py-2 mr-2'
className='py-2 mr-2 hover:bg-rose-500'
onClick={() => promptDeleteUser(id, name)}
>
<TrashOutline class='w-6 h-6' />
@ -152,19 +163,35 @@ export function Admin({ users, todos }: Props) {
<tr>
<th>Description</th>
<th>Assignee</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{Object.entries(todos).map((
[_id, { description, assigneeUserId }],
[_index, { id, description, assigneeUserId }],
) => (
<tr>
<td>{description}</td>
<td>
<td
style={`color: #${
assigneeUserId == null
? 'ffffff'
: users[assigneeUserId]?.color
}`}
>
{assigneeUserId == null
? 'Unassigned'
: users[assigneeUserId]?.name}
</td>
<td>
<Button
title='Delete'
className='py-2 mr-2 hover:bg-rose-500'
onClick={() => promptDeleteTodo(id, description)}
>
<TrashOutline class='w-6 h-6' />
</Button>
</td>
</tr>
))}
</tbody>

37
islands/Nav.tsx Normal file
View file

@ -0,0 +1,37 @@
// import { JSX } from 'preact'
// import { IS_BROWSER } from '$fresh/runtime.ts'
import { Bars3Outline } from 'preact-heroicons'
import { Clock } from '@homeman/islands/Clock.tsx'
import { Dialog } from '@homeman/components/Dialog.tsx'
import { useSignal } from '@preact/signals'
export function Nav(/* props: {} */) {
const showMenu = useSignal(false)
return (
<>
<Dialog
headerTitle='Main Menu'
show={showMenu.value}
onClose={() => {
showMenu.value = false
}}
>
</Dialog>
<nav class='bg-stone-200 dark:bg-stone-800 flex justify-items-start items-center'>
<button
class='p-4 hover:bg-stone-500/20'
onClick={() => {
showMenu.value = true
}}
>
<Bars3Outline class='h-6 w-6' />
</button>
<a class='p-4 hover:bg-stone-500/20' href='/'>
Flanagan Family
</a>
<Clock class='ml-auto pr-4 text-2xl' />
</nav>
</>
)
}

98
islands/TodoList.tsx
View file

@ -2,46 +2,84 @@ import { Todo, UserWithTodos } from '@homeman/models.ts'
import { JSX } from 'preact'
import { Button } from '@homeman/components/Button.tsx'
import { Avatar } from '@homeman/components/Avatar.tsx'
import { TrashSolid } from 'preact-heroicons'
export interface Props {
user: UserWithTodos
onNewButtonClicked: JSX.MouseEventHandler<HTMLButtonElement>
onTodoDone: (id: string) => Promise<void>
}
export function TodoList(
{ onNewButtonClicked, user: { avatarUrl, assignedTodos, name, color } }:
{ onTodoDone, onNewButtonClicked, user: { avatarUrl, name, color, ...user } }:
Props,
) {
const doneTodos = user.assignedTodos.filter((t) => t.doneAt != null)
const inProgressTodos = user.assignedTodos.filter((t) => t.doneAt == null)
const todoItem = (
{ id, doneAt, className, description, hideDone }:
{ id, doneAt, className, description, virtual }:
& Pick<Todo, 'description' | 'id' | 'doneAt'>
& {
className?: string
hideDone?: boolean
virtual?: boolean
},
) => (
<li
style={`border-color: #${color}`}
title={doneAt != null ? `Completed at ${doneAt}` : ''}
class={`${className || ''} ${
hideDone ? '' : 'border-l-4'
} p-4 rounded drop-shadow-lg bg-white dark:bg-stone-900 flex flex-col gap-2`}
virtual ? '' : 'border-l-4'
} p-4 text-black cursor-auto dark:text-white rounded drop-shadow-lg bg-white dark:bg-stone-900 flex flex-col gap-2`}
>
{JSON.stringify(doneAt)}
<span class='text-xl'>{description}</span>
{(hideDone || doneAt != null) ? '' : (
<Button
onClick={async () => {
await fetch('/api/todo/done', {
method: 'POST',
body: JSON.stringify({ id }),
})
// TODO: remove the todoitem?
// TODO: confetti
}}
>
Done
</Button>
)}
<footer class='flex gap-2'>
{(virtual || doneAt != null) ? '' : (
<Button
className='grow'
onClick={async () => {
await fetch('/api/todo/done', {
method: 'PUT',
body: JSON.stringify({ id }),
})
await onTodoDone(id)
}}
>
Done
</Button>
)}
{(!virtual && doneAt != null)
? (
<Button
className='grow'
onClick={async () => {
await fetch('/api/todo/done', {
method: 'DELETE',
body: JSON.stringify({ id }),
})
await onTodoDone(id)
}}
>
Not Done
</Button>
)
: ''}
{virtual ? '' : (
<Button
className='hover:bg-rose-500'
onClick={async () => {
if (confirm(`Are you sure you want to delete '${description}'`)) {
await fetch('/api/todo', {
method: 'DELETE',
headers: { 'content-type': 'application/json' },
body: JSON.stringify({ id }),
})
}
}}
>
<TrashSolid className='w-6 h-6' />
</Button>
)}
</footer>
</li>
)
return (
@ -61,14 +99,28 @@ export function TodoList(
+ New
</button>
<ul class='flex flex-col gap-y-4'>
{assignedTodos.length < 1
{inProgressTodos.length < 1
? todoItem({
id: '',
doneAt: null,
description: 'All clear! 🎉',
className: 'text-center',
hideDone: true,
virtual: true,
})
: assignedTodos.map(todoItem)}
: inProgressTodos.map(todoItem)}
</ul>
{doneTodos.length > 0
? (
<summary class='text-gray-500 mt-4'>
+{doneTodos.length} completed todos
<details class='cursor-pointer'>
<ul class='flex flex-col gap-y-4 mt-4'>
{doneTodos.map(todoItem)}
</ul>
</details>
</summary>
)
: ''}
</div>
)
}

13
models.ts
View file

@ -1,8 +1,11 @@
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 {
createPentagon,
TableDefinition,
} 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('homeman.db')
export const kv = await Deno.openKv('homeman.db')
// const todos = kv.list({ prefix: ['todos'] })
// const deleteme = []
@ -41,7 +44,7 @@ const Todo = z.object({
export const TodoModel = Todo
export type Todo = z.infer<typeof Todo>
export const db = createPentagon(kv, {
export const schema: Record<string, TableDefinition> = {
users: {
schema: User,
relations: {
@ -54,7 +57,9 @@ export const db = createPentagon(kv, {
assignee: ['users', User, 'assigneeUserId', 'id'],
},
},
})
}
export const db = createPentagon(kv, schema)
// const daddy: User = {
// id: ulid(),

2
routes/_app.tsx
View file

@ -1,5 +1,5 @@
import { type PageProps } from '$fresh/server.ts'
import { Nav } from '@homeman/components/Nav.tsx'
import { Nav } from '@homeman/islands/Nav.tsx'
export default function App({ Component }: PageProps) {
return (

4
routes/admin.tsx
View file

@ -4,7 +4,9 @@ import { Admin, Props } from '@homeman/islands/Admin.tsx'
export const handler: Handlers = {
async GET(_req, ctx) {
const users = await db.users.findMany({})
const users = Object.fromEntries((await db.users.findMany({})).map(
(u) => [u.id, u],
))
const todos = await db.todos.findMany({})
return ctx.render({ users, todos })
},

1
routes/api/todo.ts
View file

@ -60,6 +60,7 @@ export const handler: Handlers<Todo | null> = {
} else {
data = { id: new URL(req.url).searchParams.get('id') }
}
console.log('delete todo data:', data)
const todoData = TodoModel.pick({ id: true }).parse(data)
const result = await db.todos.delete({ where: todoData })
return new Response(JSON.stringify(result))

21
routes/api/todo/done.ts
View file

@ -3,12 +3,23 @@ import { db, TodoModel } from '@homeman/models.ts'
const Model = TodoModel.pick({ id: true })
async function markDone(id: string) {
const todo = await db.todos.findFirst({ where: { id } })
todo.doneAt = new Date()
return await db.todos.update({ where: { id }, data: todo })
}
async function markNotDone(id: string) {
return await db.todos.update({ where: { id }, data: { doneAt: null } })
}
export const handler: Handlers = {
async POST(req, _ctx) {
async PUT(req, _ctx) {
const { id } = Model.parse(await req.json())
const todo = await db.todos.findFirst({ where: { id } })
todo.doneAt = new Date()
const newTodo = await db.todos.update({ where: { id }, data: todo })
return new Response(JSON.stringify(newTodo))
return new Response(JSON.stringify(await markDone(id)))
},
async DELETE(req, _ctx) {
const { id } = Model.parse(await req.json())
return new Response(JSON.stringify(await markNotDone(id)))
},
}

26
routes/index.tsx
View file

@ -1,12 +1,23 @@
import { Handlers, PageProps } from '$fresh/server.ts'
import { db, Todo, UserWithTodos } from '@homeman/models.ts'
import { db, kv, schema, Todo, UserWithTodos } from '@homeman/models.ts'
import Dashboard from '@homeman/islands/Dashboard.tsx'
import { useSignal } from '@preact/signals'
import { useEffect } from 'preact/hooks'
interface Data {
users: Record<string, UserWithTodos>
unassignedTodos: Todo[]
}
const allTableNames = Object.keys(schema).map((s) => [s])
async function watcher() {
console.log('watching:', allTableNames)
for await (const entry of kv.watch(allTableNames)) {
console.log('entry:', entry)
}
}
watcher()
export const handler: Handlers = {
async GET(_req, ctx) {
const users = Object.fromEntries(
@ -22,5 +33,16 @@ export const handler: Handlers = {
}
export default function Home({ data }: PageProps<Data>) {
return <Dashboard {...data} />
const rdata = useSignal(data)
useEffect(() => {
async function watcher() {
console.log('watcher watching...')
for await (const entry of kv.watch(allTableNames)) {
console.log('entry:', entry)
}
}
watcher().catch(console.error)
}, [rdata])
console.log('Home rendered')
return <Dashboard {...rdata.value} />
}