refactor

src/components/auth-redirect/index.tsx

@@ -1,8 +1,11 @@
 import type { FC, ReactNode } from "react";
 import { useEffect } from "react";
+
 import { useRouter } from "next/router";
-import { useMeQuery } from "../services/hooks";
-import { Loader } from "./loader";
+
+import { Loader } from "../loader";
+
+import { useMeQuery } from "@/services";
 
 export const AuthRedirect: FC<{ children: ReactNode }> = ({ children }) => {
   const router = useRouter();
@@ -22,5 +25,6 @@ export const AuthRedirect: FC<{ children: ReactNode }> = ({ children }) => {
       </div>
     );
   }
+
   return <>{children}</>;
 };

src/components/fullscreen-loader/index.tsx

@@ -0,0 +1,9 @@
+import { Loader } from "../loader";
+
+export const FullscreenLoader = () => {
+  return (
+    <div className={"flex h-screen items-center justify-center"}>
+      <Loader />
+    </div>
+  );
+};

src/components/index.ts

@@ -0,0 +1,6 @@
+export * from "./todolist";
+export * from "./auth-redirect";
+export * from "./button";
+export * from "./input";
+export * from "./loader";
+export * from "./fullscreen-loader";

src/components/input/index.tsx

@@ -9,7 +9,7 @@ export const Input: FC<Props> = ({ className, ...rest }) => {
   return (
     <div>
       <input
-        className={` w-full rounded-md border border-gray-300 px-4 py-2 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-600 ${className}`}
+        className={`w-full rounded-md border border-gray-300 px-4 py-2 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-600 ${className}`}
         {...rest}
       />
     </div>

src/components/loader/index.tsx

@@ -1,7 +1,7 @@
 export const Loader = () => {
   return (
     <div className={"flex h-full w-full items-center justify-center"}>
-      <span className="loader"></span>
+      <span className="loader" />
     </div>
   );
 };

src/components/todolist/index.tsx

@@ -1,44 +1,47 @@
 import type { ChangeEvent, FC, MouseEventHandler } from "react";
+import { memo, useState } from "react";
+
+import type { Task, Todolist as TodolistType } from "../../services/todolists";
+import { Button } from "../button";
+import { Input } from "../input";
+
 import {
   useCreateTaskMutation,
   useDeleteTaskMutation,
   useDeleteTodolistMutation,
   useGetTasksQuery,
-  usePutTaskMutation,
-} from "../services/hooks";
-import { memo, useState } from "react";
-import { Input } from "./Input";
-import { Button } from "./Button";
+  useUpdateTaskMutation,
+} from "@/services";
 
 type Props = {
-  todolist: any;
+  todolist: TodolistType;
 };
 
 type Filter = "all" | "active" | "completed";
 
-const Todolist: FC<Props> = ({ todolist }) => {
+export const Todolist: FC<Props> = memo(({ todolist }) => {
   const { data: tasks, isLoading } = useGetTasksQuery(todolist.id);
-  const { mutate: putTask } = usePutTaskMutation();
+  const { mutate: putTask } = useUpdateTaskMutation();
   const { mutate: deleteTask } = useDeleteTaskMutation();
   const { mutate: deleteTodolist } = useDeleteTodolistMutation();
-  const { mutateAsync: createTask } = useCreateTaskMutation();
+  const { mutate: createTask } = useCreateTaskMutation();
   const [newTaskTitle, setNewTaskTitle] = useState("");
   const [filter, setFilter] = useState("all");
-  console.log(newTaskTitle);
-  const handleChangeStatus = (todolistId: string, task: any) => {
+
+  const handleChangeStatus = (todolistId: string, task: Task) => {
     const newTask = { ...task, status: task.status === 0 ? 2 : 0 };
+
     putTask({ todolistId, task: newTask });
   };
   const handleDeleteTask = (todolistId: string, taskId: string) => {
     deleteTask({ todolistId, taskId });
   };
   const handleDeleteTodolist = (todolistId: string) => {
-    deleteTodolist(todolistId);
+    deleteTodolist({ todolistId });
   };
   const handleAddTask = () => {
-    createTask({ todolistId: todolist.id, title: newTaskTitle }).then((res) => {
-      if (res.data.resultCode === 0) setNewTaskTitle("");
-    });
+    createTask({ todolistId: todolist.id, title: newTaskTitle });
+    setNewTaskTitle("");
   };
   const handleNewTaskTitleChange = (e: ChangeEvent<HTMLInputElement>) => {
     setNewTaskTitle(e.target.value);
@@ -49,7 +52,7 @@ const Todolist: FC<Props> = ({ todolist }) => {
   };
 
   if (isLoading) return <div>loading...</div>;
-  const filteredTasks = tasks?.data?.items?.filter((task: any) => {
+  const filteredTasks = tasks?.items?.filter((task) => {
     switch (filter) {
       case "active":
         return task.status === 0;
@@ -59,6 +62,7 @@ const Todolist: FC<Props> = ({ todolist }) => {
         return true;
     }
   });
+
   return (
     <div
       key={todolist.id}
@@ -74,7 +78,7 @@ const Todolist: FC<Props> = ({ todolist }) => {
         <Input value={newTaskTitle} onChange={handleNewTaskTitleChange} />
         <Button onClick={handleAddTask}>+</Button>
       </div>
-      {filteredTasks.map((task: any) => (
+      {filteredTasks?.map((task) => (
         <div className={"flex items-center gap-2"} key={task.id}>
           <input
             onChange={() => handleChangeStatus(todolist.id, task)}
@@ -100,6 +104,4 @@ const Todolist: FC<Props> = ({ todolist }) => {
       </div>
     </div>
   );
-};
-
-export default memo(Todolist);
+});