add create and deelte todolist functionalities

src/pages/index.tsx

@@ -2,15 +2,21 @@ import { type NextPage } from "next";
 import Head from "next/head";
 import { Button } from "../components/Button";
 import {
+  useCreateTodolistMutation,
   useDeleteTaskMutation,
+  useDeleteTodolistMutation,
   useGetTasksQuery,
   useLogoutMutation,
   usePutTaskMutation,
   useTodolistsQuery,
 } from "../services/hooks";
 import { Loader } from "../components/loader";
+import { Input } from "../components/Input";
+import type { ChangeEvent } from "react";
+import { useState } from "react";
 
 const Home: NextPage = () => {
+  const [newTodolistTitle, setNewTodolistTitle] = useState("");
   const { mutate: logout } = useLogoutMutation();
   const { data: todolists, isLoading: isTodolistsLoading } =
     useTodolistsQuery();
@@ -25,6 +31,8 @@ const Home: NextPage = () => {
   };
   const { mutate: putTask } = usePutTaskMutation();
   const { mutate: deleteTask } = useDeleteTaskMutation();
+  const { mutateAsync: createTodolist } = useCreateTodolistMutation();
+  const { mutate: deleteTodolist } = useDeleteTodolistMutation();
   const handleChangeStatus = (todolistId: string, task: any) => {
     const newTask = { ...task, status: task.status === 0 ? 2 : 0 };
     putTask({ todolistId, task: newTask });
@@ -32,6 +40,19 @@ const Home: NextPage = () => {
   const handleDeleteTask = (todolistId: string, taskId: string) => {
     deleteTask({ todolistId, taskId });
   };
+  const handleAddTodolist = () => {
+    createTodolist(newTodolistTitle).then((res) => {
+      if (res.data.resultCode === 0) setNewTodolistTitle("");
+    });
+  };
+
+  const handleDeleteTodolist = (todolistId: string) => {
+    deleteTodolist(todolistId);
+  };
+
+  const handleNewTodolistTitleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setNewTodolistTitle(e.target.value);
+  };
 
   if (isTodolistsLoading || isLoadingTasks)
     return (
@@ -50,7 +71,17 @@ const Home: NextPage = () => {
         <h1 className={"text-3xl"}>Todolist</h1>
         <Button onClick={handleLogout}>Logout</Button>
       </header>
-      <main className={"p-4"}>
+      <main className={"flex flex-col gap-4 p-4"}>
+        <div className={"flex items-end gap-2.5"}>
+          <label className={"flex w-52 flex-col gap-0.5"}>
+            new todolist
+            <Input
+              value={newTodolistTitle}
+              onChange={handleNewTodolistTitleChange}
+            />
+          </label>
+          <Button onClick={handleAddTodolist}>+</Button>
+        </div>
         {todolists?.map((todolist) => {
           const tasksForTodolist = tasks?.find((t) => {
             return t?.todolistId === todolist.id;
@@ -58,9 +89,14 @@ const Home: NextPage = () => {
           return (
             <div
               key={todolist.id}
-              className={"mb-4 rounded-md border border-gray-300 p-4"}
+              className={"rounded-md border border-gray-300 p-4"}
             >
-              <h2 className={"text-xl"}>{todolist.title}</h2>
+              <div className={"flex items-center justify-between "}>
+                <h2 className={"text-xl"}>{todolist.title}</h2>
+                <button onClick={() => handleDeleteTodolist(todolist.id)}>
+                  x
+                </button>
+              </div>
               {tasksForTodolist?.map((task: any) => (
                 <div className={"flex items-center gap-2"} key={task.id}>
                   <input

src/services/hooks.ts

@@ -6,8 +6,10 @@ import {
 } from "@tanstack/react-query";
 import type { PostLoginArgs } from "./index";
 import {
+  createTodolist,
   deleteMe,
   deleteTask,
+  deleteTodolist,
   getMe,
   getTask,
   getTodolists,
@@ -100,3 +102,23 @@ export const useDeleteTaskMutation = () => {
     },
   });
 };
+
+export const useCreateTodolistMutation = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (title: string) => createTodolist(title),
+    onSuccess: () => {
+      queryClient.invalidateQueries(["todolists"]);
+    },
+  });
+};
+
+export const useDeleteTodolistMutation = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (todolistId: string) => deleteTodolist(todolistId),
+    onSuccess: () => {
+      queryClient.invalidateQueries(["todolists"]);
+    },
+  });
+};

src/services/index.ts

@@ -47,6 +47,15 @@ export const putTask = (todolistId: string, task: any) => {
   const { id, ...rest } = task;
   return instance.put(`todo-lists/${todolistId}/tasks/${id}`, rest);
 };
+
 export const deleteTask = (todolistId: string, taskId: string) => {
   return instance.delete(`todo-lists/${todolistId}/tasks/${taskId}`);
 };
+
+export const createTodolist = (title: string) => {
+  return instance.post(`todo-lists`, { title });
+};
+
+export const deleteTodolist = (todolistId: string) => {
+  return instance.delete(`todo-lists/${todolistId}`);
+};