diff --git a/.idea/git_toolbox_prj.xml b/.idea/git_toolbox_prj.xml new file mode 100644 index 0000000..02b915b --- /dev/null +++ b/.idea/git_toolbox_prj.xml @@ -0,0 +1,15 @@ + + + + + + + \ No newline at end of file diff --git a/src/components/AuthRedirect.tsx b/src/components/AuthRedirect.tsx index f3719dc..f87b3a1 100644 --- a/src/components/AuthRedirect.tsx +++ b/src/components/AuthRedirect.tsx @@ -7,13 +7,10 @@ import { Loader } from "./loader"; export const AuthRedirect: FC<{ children: ReactNode }> = ({ children }) => { const router = useRouter(); const { data: user, isLoading, isError } = useMeQuery(); - console.log(user); const isAuthPage = router.pathname === "/login"; useEffect(() => { - console.log("here"); if (!isLoading && !user && !isAuthPage) { - console.log("here"); router.push("/login"); } }, [user, isError, isLoading, isAuthPage, router]); diff --git a/src/pages/index.tsx b/src/pages/index.tsx index e869cb0..c7e87a1 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,13 +1,44 @@ import { type NextPage } from "next"; import Head from "next/head"; import { Button } from "../components/Button"; -import { useLogoutMutation } from "../services/hooks"; +import { + useDeleteTaskMutation, + useGetTasksQuery, + useLogoutMutation, + usePutTaskMutation, + useTodolistsQuery, +} from "../services/hooks"; +import { Loader } from "../components/loader"; const Home: NextPage = () => { 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 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 }); + }; + + if (isTodolistsLoading || isLoadingTasks) + return ( +
+ +
+ ); return ( <> @@ -15,11 +46,40 @@ const Home: NextPage = () => { -
-

Todolist

+
+

Todolist

-
Hello
+
+ {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}
+ +
+ ))} +
+ ); + })} +
); }; diff --git a/src/services/hooks.ts b/src/services/hooks.ts index 9035466..f6f1a05 100644 --- a/src/services/hooks.ts +++ b/src/services/hooks.ts @@ -1,6 +1,19 @@ -import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; +import { + useMutation, + useQueries, + useQuery, + useQueryClient, +} from "@tanstack/react-query"; import type { PostLoginArgs } from "./index"; -import { deleteMe, getMe, postLogin } from "./index"; +import { + deleteMe, + deleteTask, + getMe, + getTask, + getTodolists, + postLogin, + putTask, +} from "./index"; import { useRouter } from "next/router"; export const useLoginMutation = () => { @@ -33,3 +46,57 @@ export const useLogoutMutation = () => { }, }); }; + +export const useTodolistsQuery = () => { + return useQuery({ + queryFn: () => getTodolists().then((res) => res.data), + queryKey: ["todolists"], + refetchInterval: 1000 * 60 * 60, + refetchOnWindowFocus: false, + refetchOnReconnect: false, + refetchOnMount: false, + refetchIntervalInBackground: false, + retry: false, + }); +}; + +export const useGetTasksQuery = (todolistIds: string[]) => { + const enabled = todolistIds && todolistIds.length > 0; + return useQueries({ + queries: todolistIds.map((todolistId) => { + return { + queryKey: ["tasks", todolistId], + queryFn: () => + getTask(todolistId).then((res) => { + return { + data: res.data, + todolistId, + }; + }), + enabled: enabled, + }; + }), + }); +}; + +export const usePutTaskMutation = () => { + const queryClient = useQueryClient(); + return useMutation({ + mutationFn: (args: any) => putTask(args.todolistId, args.task), + onSuccess: (res) => { + const todolistId = res.data.data.item.todoListId; + queryClient.invalidateQueries(["tasks", todolistId]); + }, + }); +}; + +export const useDeleteTaskMutation = () => { + const queryClient = useQueryClient(); + return useMutation({ + mutationFn: (args: any) => deleteTask(args.todolistId, args.taskId), + onSuccess: (_, variables) => { + const todolistId = variables.todolistId; + queryClient.invalidateQueries(["tasks", todolistId]); + }, + }); +}; diff --git a/src/services/index.ts b/src/services/index.ts index 5740b80..56474a3 100644 --- a/src/services/index.ts +++ b/src/services/index.ts @@ -8,6 +8,12 @@ const handleError = (data: any) => { } }; +export interface Todolist { + id: string; + title: string; + addedDate: Date; + order: number; +} export type PostLoginArgs = { email: string; password: string; @@ -28,3 +34,19 @@ export const deleteMe = async () => { const data = await instance.delete("auth/login"); return handleError(data.data); }; + +export const getTodolists = () => { + return instance.get("todo-lists"); +}; + +export const getTask = (todolistId: string) => { + return instance.get(`todo-lists/${todolistId}/tasks`); +}; + +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}`); +};