Todo List

/** @jsxImportSource https://esm.sh/react */ import { zip } from "https://esm.sh/lodash-es"; import { useEffect, useState } from "https://esm.sh/react@18.2.0"; import codeOnValTown from "https://esm.town/v/andreterron/codeOnValTown?v=46"; import { Form, hydrate } from "https://esm.town/v/stevekrouse/ssr_react_mini?v=75"; export async function loader(req: Request) { const { sqlite } = await import("https://esm.town/v/std/sqlite?v=4"); const [, { columns, rows }] = await sqlite.batch([ `CREATE TABLE IF NOT EXISTS todos2 ( id INTEGER PRIMARY KEY AUTOINCREMENT, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, completed_at TIMESTAMP, text TEXT NOT NULL )`, `select * from todos2`, ]); const initialTodos = rows.map(row => Object.fromEntries(zip(columns, row))); return { initialTodos, initialLogs: [`Server rendered`] }; } export async function action(req: Request) { const { sqlite } = await import("https://esm.town/v/std/sqlite?v=4"); const formData = await req.formData(); if (req.method === "POST") { const text = formData.get("text") as string; const [, { rows }] = await sqlite.batch([{ sql: `insert into todos2(text) values (?)`, args: [text], }, "select last_insert_rowid()"]); return Response.json({ id: rows[0][0], text }); } else if (req.method === "PUT") { const id = formData.get("id") as string; // TODO handle no id (clicked too fast) const { rows } = await sqlite.execute({ sql: `select completed_at from todos2 where id = ?`, args: [id] }); const completed_at = rows[0][0]; const new_completed_at = completed_at ? null : new Date() as any; await sqlite.execute({ sql: `update todos2 set completed_at = ? where id = ?`, args: [new_completed_at, id] }); } else if (req.method === "DELETE") { const id = formData.get("id") as string; // TODO handle no id (clicked too fast) await sqlite.execute({ sql: `delete from todos2 where id = ?`, args: [id] }); } return Response.json("OK"); } export function Component({ initialTodos, initialLogs }) { const [todos, setTodos] = useState(initialTodos); const [logs, setLogs] = useState(initialLogs); const [newTodo, setNewTodo] = useState(""); const addLog = log => setLogs([...logs, log]); useEffect(() => addLog(`Client rendered`), []); function addTodo() { setTodos([...todos, { text: newTodo }]); setNewTodo(""); return async (resp: Response) => { const { text, id } = await resp.json(); setTodos([...todos, { text, id }]); // ok to add again because todos is stale addLog(`Got ${resp.ok ? "OK" : "Error"} from server for adding todo`); }; } function toggleTodo(e) { const formData = new FormData(e.target); const id = parseInt(formData.get("id") as string); setTodos(todos.map(t => t.id === id ? { ...t, completed_at: t.completed_at ? null : Date.now() } : t)); return (resp: Response) => addLog(`Got ${resp.ok ? "OK" : "Error"} from server for toggling todo`); } function deleteTodo(e) { const formData = new FormData(e.target); const id = parseInt(formData.get("id") as string); setTodos(todos.filter(t => t.id !== id)); return (resp: Response) => addLog(`Got ${resp.ok ? "OK" : "Error"} from server for deleting todo`); } return ( Todo List

TodoApp