/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function App() { const [birthdays, setBirthdays] = useState([]); const [name, setName] = useState(''); const [date, setDate] = useState(''); useEffect(() => { fetchBirthdays(); }, []); const fetchBirthdays = async () => { const response = await fetch('/birthdays'); const data = await response.json(); setBirthdays(data); }; const handleSubmit = async (e) => { e.preventDefault(); await fetch('/birthdays', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name, date }) }); setName(''); setDate(''); fetchBirthdays(); }; const deleteBirthday = async (id) => { await fetch(`/birthdays/${id}`, { method: 'DELETE' }); fetchBirthdays(); }; return (

🎂 Birthday Alerts

Upcoming Birthdays

{birthdays.map((birthday) => (

{birthday.name} - {new Date(birthday.date).toLocaleDateString()}

))}

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const KEY = new URL(import.meta.url).pathname.split("/").at(-1); const SCHEMA_VERSION = 1; await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_birthdays_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, date TEXT NOT NULL ) `); if (request.method === 'GET' && new URL(request.url).pathname === '/birthdays') { const result = await sqlite.execute(` SELECT * FROM ${KEY}_birthdays_${SCHEMA_VERSION} ORDER BY date `); return new Response(JSON.stringify(result.rows), { headers: { 'Content-Type': 'application/json' } }); } if (request.method === 'POST' && new URL(request.url).pathname === '/birthdays') { const { name, date } = await request.json(); await sqlite.execute(` INSERT INTO ${KEY}_birthdays_${SCHEMA_VERSION} (name, date) VALUES (?, ?) `, [name, date]); return new Response('Birthday added', { status: 201 }); } if (request.method === 'DELETE' && /^\/birthdays\/\d+$/.test(new URL(request.url).pathname)) { const id = new URL(request.url).pathname.split('/').pop(); await sqlite.execute(` DELETE FROM ${KEY}_birthdays_${SCHEMA_VERSION} WHERE id = ? `, [id]); return new Response('Birthday deleted', { status: 200 }); } return new Response(` Birthday Alerts

`, { headers: { 'Content-Type': 'text/html' } }); }

birthdayAlertsApp