/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import { blob } from "https://esm.town/v/std/blob?v=10"; function App({ initialTodos }: { initialTodos: { text: string; }[]; }) { const [todos, setTodos] = useState<{ text: string; }[]>(Array.isArray(initialTodos) ? initialTodos : []); const [newTodo, setNewTodo] = useState(""); const addTodo = async () => { if (!newTodo.trim()) return; // Prevent adding blank todos const updatedTodos = [...todos, { text: newTodo }]; setTodos(updatedTodos); setNewTodo(""); // Sending new todo to server await fetch('/add-todo', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ text: newTodo }), }); }; const deleteTodo = async (index: number) => { const updatedTodos = todos.filter((_, i) => i !== index); setTodos(updatedTodos); // Optionally, update server await fetch('/delete-todo', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ index }), }); }; return (

Todo List

setNewTodo(e.target.value)} placeholder="Add a new todo" style={{ flex: 1, padding: '10px', marginRight: '8px', border: '1px solid #ccc', borderRadius: '4px' }} />

(e.currentTarget.querySelector('button').style.opacity = '1')} onMouseLeave={e => (e.currentTarget.querySelector('button').style.opacity = '0')} > {todo.text}

); } function client() { const fetchTodos = async () => { const response = await fetch('/todos'); const todos = await response.json(); return todos; }; fetchTodos().then(initialTodos => { createRoot(document.getElementById("root")).render(); }); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request) { if (request.method === 'POST' && request.url.endsWith('/add-todo')) { const body = await request.json(); const savedTodos = await blob.getJSON('todos') || []; const updatedTodos = [...savedTodos, { text: body.text }]; await blob.setJSON('todos', updatedTodos); return new Response('Todo added', { status: 200 }); } if (request.url.endsWith('/todos')) { const savedTodos = await blob.getJSON('todos') || []; return new Response(JSON.stringify(savedTodos), { headers: { 'Content-Type': 'application/json' }, }); } if (request.method === 'POST' && request.url.endsWith('/delete-todo')) { const body = await request.json(); const savedTodos = await blob.getJSON('todos') || []; const updatedTodos = savedTodos.filter((_, i) => i !== body.index); await blob.setJSON('todos', updatedTodos); return new Response('Todo deleted', { status: 200 }); } return new Response(` Todo List

`, { headers: { "content-type": "text/html" } }); }

react_client_fork