wip

src/pages/index.tsx

@@ -1,4 +1,4 @@
-import type { ChangeEvent } from "react";
+import type { ChangeEvent, FormEvent } from "react";
 import { useState } from "react";
 
 import { type NextPage } from "next";
@@ -23,7 +23,8 @@ const Home: NextPage = () => {
 
   const { mutate: createTodolist } = useCreateTodolistMutation();
 
-  const handleAddTodolist = () => {
+  const handleAddTodolist = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
     createTodolist({ title: newTodolistTitle });
     setNewTodolistTitle("");
   };
@@ -46,7 +47,7 @@ const Home: NextPage = () => {
         <Button onClick={handleLogout}>Logout</Button>
       </header>
       <main className={"flex flex-col gap-4 p-4"}>
-        <div className={"flex items-end gap-2.5"}>
+        <form onSubmit={handleAddTodolist} className={"flex items-end gap-2.5"}>
           <label className={"flex w-52 flex-col gap-0.5"}>
             new todolist
             <Input
@@ -54,8 +55,8 @@ const Home: NextPage = () => {
               onChange={handleNewTodolistTitleChange}
             />
           </label>
-          <Button onClick={handleAddTodolist}>+</Button>
-        </div>
+          <Button type={"submit"}>+</Button>
+        </form>
         <div className={"flex flex-wrap gap-4"}>
           {todolists?.map((todolist) => {
             return <Todolist todolist={todolist} key={todolist.id} />;