Initial commit

pages/todo/TodoList.tsx

@@ -0,0 +1,38 @@
+import type { TodoItem } from "../../database/todoItems";
+import React, { useState } from "react";
+import { onNewTodo } from "./TodoList.telefunc.js";
+
+export function TodoList({
+  todoItemsInitial,
+}: {
+  todoItemsInitial: TodoItem[];
+}) {
+  const [todoItems, setTodoItems] = useState(todoItemsInitial);
+  const [draft, setDraft] = useState("");
+  return (
+    <>
+      <ul>
+        {todoItems.map((todoItem, i) => (
+          <li key={i}>{todoItem.text}</li>
+        ))}
+        <li>
+          <form
+            onSubmit={async (ev) => {
+              ev.preventDefault();
+              const { todoItems } = await onNewTodo({ text: draft });
+              setDraft("");
+              setTodoItems(todoItems);
+            }}
+          >
+            <input
+              type="text"
+              onChange={(ev) => setDraft(ev.target.value)}
+              value={draft}
+            />{" "}
+            <button type="submit">Add to-do</button>
+          </form>
+        </li>
+      </ul>
+    </>
+  );
+}