ershisan99/todolist_next
1
0
Fork 0
mirror of https://github.com/ershisan99/todolist_next.git synced 2025-12-16 20:59:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

add delete and change status functionalities

Browse Source
This commit is contained in:
Andres
2022-11-19 18:36:35 +01:00
parent 41b49d6306
commit be69a55fea
5 changed files with 170 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
.idea/git_toolbox_prj.xml generated Normal file
View File

@@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="GitToolBoxProjectSettings">
<option name="commitMessageIssueKeyValidationOverride">
<BoolValueOverride>
<option name="enabled" value="true" />
</BoolValueOverride>
</option>
<option name="commitMessageValidationEnabledOverride">
<BoolValueOverride>
<option name="enabled" value="true" />
</BoolValueOverride>
</option>
</component>
</project>

3
src/components/AuthRedirect.tsx
View File

@@ -7,13 +7,10 @@ import { Loader } from "./loader";
export const AuthRedirect: FC<{ children: ReactNode }> = ({ children }) => { export const AuthRedirect: FC<{ children: ReactNode }> = ({ children }) => {
const router = useRouter(); const router = useRouter();
const { data: user, isLoading, isError } = useMeQuery(); const { data: user, isLoading, isError } = useMeQuery();
console.log(user);
const isAuthPage = router.pathname === "/login"; const isAuthPage = router.pathname === "/login";
useEffect(() => { useEffect(() => {
console.log("here");
if (!isLoading && !user && !isAuthPage) { if (!isLoading && !user && !isAuthPage) {
console.log("here");
router.push("/login"); router.push("/login");
} }
}, [user, isError, isLoading, isAuthPage, router]); }, [user, isError, isLoading, isAuthPage, router]);

68
src/pages/index.tsx
View File

@@ -1,13 +1,44 @@
import { type NextPage } from "next"; import { type NextPage } from "next";
import Head from "next/head"; import Head from "next/head";
import { Button } from "../components/Button"; 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 Home: NextPage = () => {
const { mutate: logout } = useLogoutMutation(); 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 = () => { const handleLogout = () => {
logout(); 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 (
<div className={"flex h-screen items-center justify-center"}>
<Loader />
</div>
);
return ( return (
<> <>
<Head> <Head>
@@ -15,11 +46,40 @@ const Home: NextPage = () => {
<meta name="description" content="Incubator todolist" /> <meta name="description" content="Incubator todolist" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<header> <header className={"flex justify-between p-4"}>
<h1>Todolist</h1> <h1 className={"text-3xl"}>Todolist</h1>
<Button onClick={handleLogout}>Logout</Button> <Button onClick={handleLogout}>Logout</Button>
</header> </header>
<main>Hello</main> <main className={"p-4"}>
{todolists?.map((todolist) => {
const tasksForTodolist = tasks?.find((t) => {
return t?.todolistId === todolist.id;
})?.data.items;
return (
<div
key={todolist.id}
className={"mb-4 rounded-md border border-gray-300 p-4"}
>
<h2 className={"text-xl"}>{todolist.title}</h2>
{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>
);
})}
</main>
</> </>
); );
}; };

71
src/services/hooks.ts
View File

@@ -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 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"; import { useRouter } from "next/router";
export const useLoginMutation = () => { 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]);
},
});
};

22
src/services/index.ts
View File

@@ -8,6 +8,12 @@ const handleError = (data: any) => {
} }
}; };
export interface Todolist {
id: string;
title: string;
addedDate: Date;
order: number;
}
export type PostLoginArgs = { export type PostLoginArgs = {
email: string; email: string;
password: string; password: string;
@@ -28,3 +34,19 @@ export const deleteMe = async () => {
const data = await instance.delete("auth/login"); const data = await instance.delete("auth/login");
return handleError(data.data); return handleError(data.data);
}; };
export const getTodolists = () => {
return instance.get<Todolist[]>("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}`);
};