add create task functionality, refactor, styling

src/pages/index.tsx

@@ -3,58 +3,38 @@ 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";
+import Todolist from "../components/todolist";
 
 const Home: NextPage = () => {
   const [newTodolistTitle, setNewTodolistTitle] = useState("");
   const { mutate: logout } = useLogoutMutation();
   const { data: todolists, isLoading: isTodolistsLoading } =
     useTodolistsQuery();
-  let isLoadingTasks;
-  const results = useGetTasksQuery(todolists?.map((t) => t.id) || []);
-  const tasks = results.map((r) => {
-    if (r.isLoading) isLoadingTasks = true;
-    return r?.data;
-  });
+
   const handleLogout = () => {
     logout();
   };
-  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 });
-  };
-  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)
+  if (isTodolistsLoading)
     return (
       <div className={"flex h-screen items-center justify-center"}>
         <Loader />
@@ -82,39 +62,11 @@ const Home: NextPage = () => {
           </label>
           <Button onClick={handleAddTodolist}>+</Button>
         </div>
-        {todolists?.map((todolist) => {
-          const tasksForTodolist = tasks?.find((t) => {
-            return t?.todolistId === todolist.id;
-          })?.data.items;
-          return (
-            <div
-              key={todolist.id}
-              className={"rounded-md border border-gray-300 p-4"}
-            >
-              <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
-                    onChange={() => handleChangeStatus(todolist.id, task)}
-                    type={"checkbox"}
-                    checked={[0, 1, 3].includes(task.status)}
-                  />
-                  <div key={task.id}>{task.title}</div>
-                  <button
-                    onClick={() => handleDeleteTask(todolist.id, task.id)}
-                  >
-                    X
-                  </button>
-                </div>
-              ))}
-            </div>
-          );
-        })}
+        <div className={"flex flex-wrap gap-4"}>
+          {todolists?.map((todolist) => {
+            return <Todolist todolist={todolist} key={todolist.id} />;
+          })}
+        </div>
       </main>
     </>
   );