Todo List

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_169":170,"_171":172},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_128":-5,"_20":129,"_22":130,"_131":132,"_133":134,"_25":135,"_24":-5,"_136":-5,"_137":-5,"_138":54,"_139":140,"_141":45,"_142":-5,"_143":-5,"_144":145},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","stevekrouse","name","TodoApp","branchName","main","version","path","","project",{"_34":74,"_13":14,"_46":75,"_76":-5,"_77":45,"_78":79,"_80":79,"_81":-5,"_82":-5,"_83":84,"_85":38,"_86":45,"_87":-5,"_88":-5,"_89":90,"_91":92,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":98,"_99":98,"_100":101,"_102":101,"_103":101,"_104":98,"_105":98,"_106":107,"_108":109,"_110":111,"_112":54},"tree",[65,66],"file","contents",[32,33],"upstream","pull","ahead","behind","envVars",{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":60,"_44":45,"_46":61,"_17":62,"_49":24,"_51":63,"_53":54,"_55":-5,"_18":64},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_18":56},"id","b287a104-2540-11f0-a4ea-569c3dd06744","main.tsx","fileId","acc0e802-2540-11f0-a4ea-569c3dd06744","parentId","branchId","acbe095c-2540-11f0-a4ea-569c3dd06744","branchVersion",283,"latest",true,"createdAt",["D",1742640822328],282,"fileType","http","content","// /** @jsxImportSource https://esm.sh/react@18.2.0 */\n// import { zip } from \"https://esm.sh/lodash-es\";\n// import { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n// import { Form, hydrate } from \"https://esm.town/v/stevekrouse/ssr_react_mini?v=75\";\n\n// export async function loader(req: Request) {\n// const { sqlite } = await import(\"https://esm.town/v/std/sqlite?v=4\");\n// const [, { columns, rows }] = await sqlite.batch([\n// `CREATE TABLE IF NOT EXISTS todos2 (\n// id INTEGER PRIMARY KEY AUTOINCREMENT,\n// created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,\n// completed_at TIMESTAMP,\n// text TEXT NOT NULL\n// )`,\n// `select * from todos2`,\n// ]);\n// const initialTodos = rows.map(row => Object.fromEntries(zip(columns, row)));\n// return { initialTodos, initialLogs: [`Server rendered`] };\n// }\n\n// export async function action(req: Request) {\n// const { sqlite } = await import(\"https://esm.town/v/std/sqlite?v=4\");\n// const formData = await req.formData();\n// if (req.method === \"POST\") {\n// const text = formData.get(\"text\") as string;\n// const [, { rows }] = await sqlite.batch([{\n// sql: `insert into todos2(text) values (?)`,\n// args: [text],\n// }, \"select last_insert_rowid()\"]);\n// return Response.json({ id: rows[0][0], text });\n// }\n// else if (req.method === \"PUT\") {\n// const id = formData.get(\"id\") as string;\n// // TODO handle no id (clicked too fast)\n// const { rows } = await sqlite.execute({ sql: `select completed_at from todos2 where id = ?`, args: [id] });\n// const completed_at = rows[0][0];\n// const new_completed_at = completed_at ? null : new Date() as any;\n// await sqlite.execute({ sql: `update todos2 set completed_at = ? where id = ?`, args: [new_completed_at, id] });\n// }\n// else if (req.method === \"DELETE\") {\n// const id = formData.get(\"id\") as string;\n// // TODO handle no id (clicked too fast)\n// await sqlite.execute({ sql: `delete from todos2 where id = ?`, args: [id] });\n// }\n// return Response.json(\"OK\");\n// }\n\n// export function Component({ initialTodos, initialLogs }) {\n// const [todos, setTodos] = useState(initialTodos);\n// const [logs, setLogs] = useState(initialLogs);\n// const [newTodo, setNewTodo] = useState(\"\");\n// const addLog = log => setLogs([...logs, log]);\n// useEffect(() => addLog(`Client rendered`), []);\n\n// function addTodo() {\n// setTodos([...todos, { text: newTodo }]);\n// setNewTodo(\"\");\n// return async (resp: Response) => {\n// const { text, id } = await resp.json();\n// setTodos([...todos, { text, id }]); // ok to add again because todos is stale\n// addLog(`Got ${resp.ok ? \"OK\" : \"Error\"} from server for adding todo`);\n// };\n// }\n\n// function toggleTodo(e) {\n// const formData = new FormData(e.target);\n// const id = parseInt(formData.get(\"id\") as string);\n// setTodos(todos.map(t => t.id === id ? { ...t, completed_at: t.completed_at ? null : Date.now() } : t));\n// return (resp: Response) => addLog(`Got ${resp.ok ? \"OK\" : \"Error\"} from server for toggling todo`);\n// }\n\n// function deleteTodo(e) {\n// const formData = new FormData(e.target);\n// const id = parseInt(formData.get(\"id\") as string);\n// setTodos(todos.filter(t => t.id !== id));\n// return (resp: Response) => addLog(`Got ${resp.ok ? \"OK\" : \"Error\"} from server for deleting todo`);\n// }\n\n// return (\n// \n// \n// Todo List\n// \n//

Code