mirror of
https://github.com/ershisan99/todolist_next.git
synced 2025-12-16 12:33:57 +00:00
add delete and change status functionalities
This commit is contained in:
15
.idea/git_toolbox_prj.xml
generated
Normal file
15
.idea/git_toolbox_prj.xml
generated
Normal 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>
|
||||
@@ -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]);
|
||||
|
||||
@@ -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 (
|
||||
<div className={"flex h-screen items-center justify-center"}>
|
||||
<Loader />
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
@@ -15,11 +46,40 @@ const Home: NextPage = () => {
|
||||
<meta name="description" content="Incubator todolist" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<header>
|
||||
<h1>Todolist</h1>
|
||||
<header className={"flex justify-between p-4"}>
|
||||
<h1 className={"text-3xl"}>Todolist</h1>
|
||||
<Button onClick={handleLogout}>Logout</Button>
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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]);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
@@ -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<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}`);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user