implemented task adding

JVGS1111 · Jul 29, 2024 · 0497792 · 0497792
1 parent 8808e9e
commit 0497792
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 9 deletions.
diff --git 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
@@ -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 <Component {...pageProps} />
+  return (
+    <>
+      <Component {...pageProps} />
+      <ToastContainer />
+    </>
+  )
 }
diff --git a/src/pages/_document.page.tsx b/src/pages/_document.page.tsx
@@ -18,7 +18,6 @@ export default function Document() {
       </Head>
       <body>
         <main className="min-h-screen bg-app-bg">
-          <ToastContainer />
           <Main />
           <NextScript />
         </main>

diff --git 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<typeof addTaskFormSchema>
 
 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() {
       <div className="mx-auto max-w-app p-6">
         <label className="flex flex-col gap-2.5 pb-4 text-xl font-medium text-title">
           {`What’s`} the name of the task?
-          <InputText placeholder="Groceries" {...register('task')} />
-          {errors.task?.message && <ErrorMessage error={errors.task.message} />}
+          <InputText placeholder="Groceries" {...register('title')} />
+          {errors.title?.message && (
+            <ErrorMessage error={errors.title.message} />
+          )}
         </label>
         <label className="flex flex-col gap-2.5 pb-4 text-xl font-medium text-title">
           What sort of task is it?

diff --git a/src/pages/completed/index.page.tsx b/src/pages/completed/index.page.tsx
@@ -11,7 +11,7 @@ export default function Completed() {
       />
       <div className="mx-auto max-w-app">
         <NavigationBar checked="completed" />
-        <TaskList listTitle="Completed" />
+        {/* <TaskList listTitle="Completed" /> */}
       </div>
     </>
   )

diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
@@ -4,6 +4,7 @@ import { TaskList } from '../../components/TaskList/TaskList'
 import { useEffect, useState } from 'react'
 import { List } from '@/models/List'
 import { createList, getStorageList } from '@/services/storage'
+import { toast } from 'react-toastify'
 
 export default function Home() {
   const [listArray, setListArray] = useState<List[]>([])

diff --git a/src/services/storage.test.ts b/src/services/storage.test.ts
@@ -43,6 +43,7 @@ describe('storage', () => {
       completed: false,
       icon: 'test',
       title: 'task title',
+      color: 'test',
     }
     addTaskToList({
       listId: list[0].id,

diff --git a/src/services/storage.ts b/src/services/storage.ts
@@ -52,6 +52,7 @@ function _createTaskObject(task: Task): Task {
     completed: false,
     icon: task.icon,
     title: task.title,
+    color: task.color,
   }
   return newTask
 }