/** @jsxImportSource https://esm.sh/react */ import React from "https://esm.sh/react"; import { renderToString } from "https://esm.sh/react-dom@18.2.0/server"; import { sqlite } from "https://esm.town/v/std/sqlite?v=4"; import { html } from "https://esm.town/v/stevekrouse/html"; sqlite.execute(`CREATE TABLE IF NOT EXISTS tasks ( id INTEGER PRIMARY KEY AUTOINCREMENT, description TEXT NOT NULL, completed BOOLEAN NOT NULL DEFAULT 0 )`); async function addTask(description: string) { await sqlite.execute({ sql: `INSERT INTO tasks (description) VALUES (?)`, args: [description], }); } async function getTasks() { const { columns, rows } = await sqlite.execute(`SELECT id, description, completed FROM tasks`); return rows.map((row) => { const task: { [key: string]: any } = {}; columns.forEach((col, index) => { if (col === "completed") { task[col] = Boolean(row[index]); } else { task[col] = row[index]; } }); return task; }); } async function toggleTaskCompletion(id: number, completed: boolean) { await sqlite.execute({ sql: `UPDATE tasks SET completed = ? WHERE id = ?`, args: [completed ? 1 : 0, id], }); } async function removeTask(id: number) { await sqlite.execute({ sql: `DELETE FROM tasks WHERE id = ?`, args: [id], }); } export let tasks = async (req: Request): Promise => { if (req.method === "POST") { const formData = await req.formData(); const action = formData.get("action"); if (action === "add") { const description = formData.get("description"); if (typeof description === "string") { await addTask(description); } } else if (action === "toggle") { const id = formData.get("id"); const completed = formData.get("completed") === "on"; if (typeof id === "string") { await toggleTaskCompletion(parseInt(id), completed); } } if (action === "remove") { const id = formData.get("id"); if (typeof id === "string") { await removeTask(parseInt(id)); } } // Redirect to refresh the page and show the updated task list return new Response(null, { status: 303, headers: { Location: req.url, }, }); } const tasks = await getTasks(); return html( renderToString( Tasks

Tasks

{tasks.map((task) => (

{" "}

))}

, ), { status: 200, headers: { "Content-Type": "text/html", }, }, ); };

todo_demo

Versions

v0