format

pages/todo/+data.ts

@@ -6,6 +6,8 @@ export type Data = {
   todo: { text: string }[];
 };
 
-export default async function data(_pageContext: PageContextServer): Promise<Data> {
+export default async function data(
+  _pageContext: PageContextServer,
+): Promise<Data> {
   return { todo: todos };
 }

pages/todo/TodoList.tsx

@@ -1,7 +1,11 @@
 import { trpc } from "../../trpc/client";
 import { useState } from "react";
 
-export function TodoList({ initialTodoItems }: { initialTodoItems: { text: string }[] }) {
+export function TodoList({
+  initialTodoItems,
+}: {
+  initialTodoItems: { text: string }[];
+}) {
   const [todoItems, setTodoItems] = useState(initialTodoItems);
   const [newTodo, setNewTodo] = useState("");
   return (
@@ -16,6 +20,7 @@ export function TodoList({ initialTodoItems }: { initialTodoItems: { text: strin
         <form
           onSubmit={async (ev) => {
             ev.preventDefault();
+            if (newTodo.trim() === "") return;
 
             // Optimistic UI update
             setTodoItems((prev) => [...prev, { text: newTodo }]);
@@ -29,7 +34,11 @@ export function TodoList({ initialTodoItems }: { initialTodoItems: { text: strin
             }
           }}
         >
-          <input type="text" onChange={(ev) => setNewTodo(ev.target.value)} value={newTodo} />
+          <input
+            type="text"
+            onChange={(ev) => setNewTodo(ev.target.value)}
+            value={newTodo}
+          />
           <button type="submit">Add to-do</button>
         </form>
       </div>