From 9a8c9011302986be684ad18c95ce33d2b92bab14 Mon Sep 17 00:00:00 2001 From: Andres Date: Sun, 20 Nov 2022 13:42:48 +0100 Subject: [PATCH] add create task functionality, refactor, styling --- src/components/todolist.tsx | 105 ++++++++++++++++++++++++++++++++++++ src/pages/index.tsx | 68 ++++------------------- src/services/hooks.ts | 46 ++++++++-------- src/services/index.ts | 4 ++ 4 files changed, 143 insertions(+), 80 deletions(-) create mode 100644 src/components/todolist.tsx diff --git a/src/components/todolist.tsx b/src/components/todolist.tsx new file mode 100644 index 0000000..080e8be --- /dev/null +++ b/src/components/todolist.tsx @@ -0,0 +1,105 @@ +import type { ChangeEvent, FC, MouseEventHandler } from "react"; +import { + useCreateTaskMutation, + useDeleteTaskMutation, + useDeleteTodolistMutation, + useGetTasksQuery, + usePutTaskMutation, +} from "../services/hooks"; +import { memo, useState } from "react"; +import { Input } from "./Input"; +import { Button } from "./Button"; + +type Props = { + todolist: any; +}; + +type Filter = "all" | "active" | "completed"; + +const Todolist: FC = ({ todolist }) => { + const { data: tasks, isLoading } = useGetTasksQuery(todolist.id); + const { mutate: putTask } = usePutTaskMutation(); + const { mutate: deleteTask } = useDeleteTaskMutation(); + const { mutate: deleteTodolist } = useDeleteTodolistMutation(); + const { mutateAsync: createTask } = useCreateTaskMutation(); + const [newTaskTitle, setNewTaskTitle] = useState(""); + const [filter, setFilter] = useState("all"); + console.log(newTaskTitle); + 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 handleDeleteTodolist = (todolistId: string) => { + deleteTodolist(todolistId); + }; + const handleAddTask = () => { + createTask({ todolistId: todolist.id, title: newTaskTitle }).then((res) => { + if (res.data.resultCode === 0) setNewTaskTitle(""); + }); + }; + const handleNewTaskTitleChange = (e: ChangeEvent) => { + setNewTaskTitle(e.target.value); + }; + + const handleFilterChange: MouseEventHandler = (e) => { + setFilter(e.currentTarget.value as Filter); + }; + + if (isLoading) return
loading...
; + const filteredTasks = tasks?.data?.items?.filter((task: any) => { + switch (filter) { + case "active": + return task.status === 0; + case "completed": + return task.status === 2; + default: + return true; + } + }); + return ( +
+
+

{todolist.title}

+ +
+
+ + +
+ {filteredTasks.map((task: any) => ( +
+ handleChangeStatus(todolist.id, task)} + type={"checkbox"} + checked={[0, 1, 3].includes(task.status)} + /> +
{task.title}
+ +
+ ))} +
+ + + +
+
+ ); +}; + +export default memo(Todolist); diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 1da3062..a7fb0f0 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -3,58 +3,38 @@ 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"; +import Todolist from "../components/todolist"; 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) + if (isTodolistsLoading) return (
@@ -82,39 +62,11 @@ const Home: NextPage = () => {
- {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}
- -
- ))} -
- ); - })} +
+ {todolists?.map((todolist) => { + return ; + })} +
); diff --git a/src/services/hooks.ts b/src/services/hooks.ts index 46a70c1..ca958d1 100644 --- a/src/services/hooks.ts +++ b/src/services/hooks.ts @@ -1,11 +1,7 @@ -import { - useMutation, - useQueries, - useQuery, - useQueryClient, -} from "@tanstack/react-query"; +import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import type { PostLoginArgs } from "./index"; import { + createTask, createTodolist, deleteMe, deleteTask, @@ -62,22 +58,16 @@ export const useTodolistsQuery = () => { }); }; -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 useGetTasksQuery = (todolistId: string) => { + return useQuery({ + queryKey: ["tasks", todolistId], + queryFn: () => + getTask(todolistId).then((res) => { + return { + data: res.data, + todolistId, + }; + }), }); }; @@ -122,3 +112,15 @@ export const useDeleteTodolistMutation = () => { }, }); }; + +export const useCreateTaskMutation = () => { + const queryClient = useQueryClient(); + return useMutation({ + mutationFn: (args: { todolistId: string; title: string }) => + createTask(args.todolistId, args.title), + onSuccess: (res) => { + const todolistId = res.data.data.item.todoListId; + queryClient.invalidateQueries(["tasks", todolistId]); + }, + }); +}; diff --git a/src/services/index.ts b/src/services/index.ts index ddbe2d6..4df9529 100644 --- a/src/services/index.ts +++ b/src/services/index.ts @@ -59,3 +59,7 @@ export const createTodolist = (title: string) => { export const deleteTodolist = (todolistId: string) => { return instance.delete(`todo-lists/${todolistId}`); }; + +export const createTask = (todolistId: string, title: string) => { + return instance.post(`todo-lists/${todolistId}/tasks`, { title }); +};