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(); 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) => { setNewTodolistTitle(e.target.value); }; if (isTodolistsLoading || isLoadingTasks) return (
); return ( <> Todolist

Todolist

{todolists?.map((todolist) => { const tasksForTodolist = tasks?.find((t) => { return t?.todolistId === todolist.id; })?.data.items; return (

{todolist.title}

{tasksForTodolist?.map((task: any) => (
handleChangeStatus(todolist.id, task)} type={"checkbox"} checked={[0, 1, 3].includes(task.status)} />
{task.title}
))}
); })}
); }; export default Home;