created add list and add task functions

JVGS1111 · Jul 29, 2024 · 2569250 · 2569250
1 parent b9231d8
commit 2569250
Show file tree

Hide file tree

Showing 11 changed files with 342 additions and 33 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,14 +10,19 @@
     "test": "jest --watch"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.9.0",
     "@phosphor-icons/react": "^2.1.7",
     "@radix-ui/react-radio-group": "^1.2.0",
     "@radix-ui/react-select": "^2.1.1",
     "classnames": "^2.5.1",
     "next": "14.2.5",
     "react": "^18",
     "react-dom": "^18",
-    "tailwind-merge": "^2.4.0"
+    "react-hook-form": "^7.52.1",
+    "react-toastify": "^10.0.5",
+    "tailwind-merge": "^2.4.0",
+    "uuid": "^10.0.0",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@rocketseat/eslint-config": "^2.2.2",
@@ -28,6 +33,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/uuid": "^10.0.0",
     "eslint": "^8",
     "eslint-config-next": "14.2.5",
     "jest": "^29.7.0",

diff --git a/src/components/form/Input/ErrorMessage.tsx b/src/components/form/Input/ErrorMessage.tsx
@@ -0,0 +1,6 @@
+interface ErrorMessageProps {
+  error: string
+}
+export function ErrorMessage({ error }: ErrorMessageProps) {
+  return <div className="text-sm text-red">{error}</div>
+}
diff --git a/src/models/List.ts b/src/models/List.ts
@@ -0,0 +1,7 @@
+import { Task } from './Task'
+
+export interface List {
+  id: string
+  title: string
+  tasks: Task[]
+}
diff --git a/src/models/Task.tsx b/src/models/Task.tsx
@@ -9,3 +9,11 @@ export const taskBgColorArray = [
   'bg-card08',
   'bg-card09',
 ]
+
+export interface Task {
+  id?: string
+  title: string
+  completed: boolean
+  arquived: boolean
+  icon: string
+}
diff --git a/src/pages/_app.page.tsx b/src/pages/_app.page.tsx
@@ -1,5 +1,6 @@
 import '@/styles/globals.css'
 import type { AppProps } from 'next/app'
+import 'react-toastify/dist/ReactToastify.css'
 
 export default function App({ Component, pageProps }: AppProps) {
   return <Component {...pageProps} />

diff --git a/src/pages/_document.page.tsx b/src/pages/_document.page.tsx
@@ -1,4 +1,5 @@
 import { Html, Head, Main, NextScript } from 'next/document'
+import { ToastContainer } from 'react-toastify'
 
 export default function Document() {
   return (
@@ -17,6 +18,7 @@ export default function Document() {
       </Head>
       <body>
         <main className="min-h-screen bg-app-bg">
+          <ToastContainer />
           <Main />
           <NextScript />
         </main>

diff --git a/src/pages/add-list/index.page.tsx b/src/pages/add-list/index.page.tsx
@@ -1,15 +1,39 @@
+import { ErrorMessage } from '@/components/form/Input/ErrorMessage'
 import { InputText } from '@/components/form/Input/TextInput'
 import { Header } from '@/components/Header'
+import { createList } from '@/services/storage'
+import { zodResolver } from '@hookform/resolvers/zod'
 import { useRouter } from 'next/router'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+const addListFormSchema = z.object({
+  listName: z.string().min(3, { message: 'The name of the list is too short' }),
+})
+
+type AddListForm = z.infer<typeof addListFormSchema>
 
 export default function AddList() {
   const router = useRouter()
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<AddListForm>({
+    resolver: zodResolver(addListFormSchema),
+  })
+
+  function handleCreateList(data: AddListForm) {
+    createList(data.listName)
+  }
+
   function goBack() {
     router.push('/')
   }
 
   return (
-    <form>
+    <form onSubmit={handleSubmit(handleCreateList)}>
       <Header
         title="Create a list for better organization"
         variante="create"
@@ -18,7 +42,10 @@ export default function AddList() {
       <div className="mx-auto max-w-app p-6">
         <label className="flex flex-col gap-2.5 text-xl font-medium text-title">
           What’s the name of the list?
-          <InputText placeholder="Groceries" />
+          <InputText placeholder="Groceries" {...register('listName')} />
+          {errors.listName?.message && (
+            <ErrorMessage error={errors.listName.message} />
+          )}
         </label>
       </div>
     </form>