From 04977923fe32f986e2231af66c8453ec5ca40c46 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Vin=C3=ADcius=20Guerber=20de=20Souza?= Date: Mon, 29 Jul 2024 16:08:00 -0300 Subject: [PATCH] implemented task adding --- src/models/Task.tsx | 1 + src/pages/_app.page.tsx | 10 +++++-- src/pages/_document.page.tsx | 1 - src/pages/add-task/index.page.tsx | 45 ++++++++++++++++++++++++++---- src/pages/completed/index.page.tsx | 2 +- src/pages/home/index.tsx | 1 + src/services/storage.test.ts | 1 + src/services/storage.ts | 1 + 8 files changed, 53 insertions(+), 9 deletions(-) diff --git a/src/models/Task.tsx b/src/models/Task.tsx index 45d3449..0467a09 100644 --- a/src/models/Task.tsx +++ b/src/models/Task.tsx @@ -16,4 +16,5 @@ export interface Task { completed: boolean arquived: boolean icon: string + color: string } diff --git a/src/pages/_app.page.tsx b/src/pages/_app.page.tsx index 5d72b2b..25a92b0 100644 --- a/src/pages/_app.page.tsx +++ b/src/pages/_app.page.tsx @@ -1,7 +1,13 @@ +import 'react-toastify/dist/ReactToastify.css' import '@/styles/globals.css' import type { AppProps } from 'next/app' -import 'react-toastify/dist/ReactToastify.css' +import { ToastContainer } from 'react-toastify' export default function App({ Component, pageProps }: AppProps) { - return + return ( + <> + + + + ) } diff --git a/src/pages/_document.page.tsx b/src/pages/_document.page.tsx index 0d274f4..52a34a0 100644 --- a/src/pages/_document.page.tsx +++ b/src/pages/_document.page.tsx @@ -18,7 +18,6 @@ export default function Document() {
-
diff --git a/src/pages/add-task/index.page.tsx b/src/pages/add-task/index.page.tsx index 0878c41..1a5eebd 100644 --- a/src/pages/add-task/index.page.tsx +++ b/src/pages/add-task/index.page.tsx @@ -1,3 +1,4 @@ +'use client' import { Select, SelectContent, @@ -10,15 +11,18 @@ import { Header } from '@/components/Header' import { taskOptionsArray } from '@/services/task-options' import { useRouter } from 'next/router' import { ColorRadioGroup, ColorRadioItem } from './components/ColorSelect' -import { taskBgColorArray } from '@/models/Task' +import { Task, taskBgColorArray } from '@/models/Task' import { twMerge } from 'tailwind-merge' import { z } from 'zod' import { Controller, useForm } from 'react-hook-form' import { zodResolver } from '@hookform/resolvers/zod' import { ErrorMessage } from '@/components/form/Input/ErrorMessage' +import { useSearchParams } from 'next/navigation' +import { toast } from 'react-toastify' +import { addTaskToList } from '@/services/storage' const addTaskFormSchema = z.object({ - task: z + title: z .string({ required_error: 'Type the name of the task' }) .min(3, { message: 'The task name is too short' }), icon: z.string({ required_error: 'Select an icon' }), @@ -29,6 +33,8 @@ type AddTaskForm = z.infer export default function AddTask() { const router = useRouter() + const params = useSearchParams() + const { register, handleSubmit, @@ -43,7 +49,34 @@ export default function AddTask() { }) function handleCreateTask(data: AddTaskForm) { - console.log(data) + const id = params.get('id') + if (!id) { + toast.error('ID not found') + return + } + try { + const newTask = createTaskObject(data) + addTaskToList({ + listId: id, + task: newTask, + }) + toast.success('The task has been added!') + router.push('/') + } catch (error) { + toast.error('An error has occurred') + } + } + + function createTaskObject(data: AddTaskForm): Task { + const task = { + arquived: false, + completed: false, + icon: data.icon, + title: data.title, + color: data.color, + } + + return task } function renderSelectOptions() { @@ -86,8 +119,10 @@ export default function AddTask() {