assignment 13 or week 3 react

src/components/CreateNoteForm.jsx

@@ -1,25 +1,98 @@
 // TODO: Import useForm, zodResolver, axios, useNavigate, useState, and noteSchema
 
 
+import {useForm} from "react-hook-form"
+import axios from "axios"
+import {zodResolver} from "@hookform/resolvers/zod"
+import { useState } from "react";
+import {noteSchema} from "../schema/notes"
+import {useNavigate} from "react-router-dom"
+
+
+
+
 import { Save } from "lucide-react";
 
 const CreateNoteForm = () => {
+
+
+
   // TODO: Setup isSubmitting state with useState
+
+   const [isSubmitting, setIsSubmitting] = useState(false)
   // TODO: create navigate variable and set to useNavigate()
 
+  const navigate = useNavigate ()
+
 
   // TODO: Set up the form with useForm from react-hook-form and zodResolver from @hookform/resolvers/zod
 
+  const {
+    register,
+     handleSubmit,
+      formState: {errors},
+       reset} = useForm ({
+        resolver: zodResolver(noteSchema),
+
+        defaultValues: {title: "", content: ""}
+       })
+
   const sendToTheServer = async (data) => {
     // TODO: Send the data to the server
+ setIsSubmitting(true)
+    try {
+  await axios.post("http://localhost:3001/api/notes", data, 
+
+        {headers: {
+          "content-type": "application/json"
+        }}
+      )
+
+      reset()
+    setTimeout (() => {
+     navigate("/notes")
+    }, 3000)
+
+
+    }catch(err) {
+      console.log(err)
+
+    }finally {
+    setIsSubmitting(false)
+    }
+
+
     // TODO: Use axios to create a new note in the server using the endpoint http://localhost:3001/api/notes
+
+
   };
 
   return (
-    <>
-    <h1>Create Note</h1>
+    <div  className="text-bold border p-4  mb-2 max-w-xl mx-auto">
+    <h1>Create a New Note</h1>
     {/* TODO: Setup the form with TailwindCSS, create a form with the following fields: title, content, and submit button */}
-    </>
+    <form className="" onSubmit={handleSubmit(sendToTheServer)}>
+
+
+    <label htmlFor="title" className="mt-5 block">Title</label>
+    <input type="text" {...register("title")} className="outline-none border p-2 w-full rounded-md" placeholder="Note Title" id="title"></input>
+    {errors.title && <p className="text-red-500 text-sm">{errors.title.message}</p>}
+
+
+     <label htmlFor="content" className="mt-5 block">Content</label>
+    <textarea className="outline-none border p-2 pb-20 w-full rounded-md" {...register("content")} placeholder="Write your note here..." id="content"></textarea>
+        {errors.content && <p className="text-red-500 text-sm">{errors.content.message}</p>}
+    <button    disabled={isSubmitting} type="submit" className={`flex rounded-md w-full justify-center items-center gap-1 py-1 mt-5  ${isSubmitting ? "bg-red-600" : " bg-yellow-500 text-white "}`}>
+    <Save size={15}/> <span>{isSubmitting ? "loading..."  : "Save Note"}</span>
+
+    </button>
+
+
+
+    </form>
+
+    </div>
+
   );
 };
 

src/schema/notes.js

@@ -4,5 +4,14 @@ export const noteSchema = z.object({
   //TODO: create the title and content schema, 
   // Make sure the title is required and the content is required
   // Make sure the title is max 50 characters and the content is max 500 characters
+  title: z
+  .string().min(10, "Title must be at least 10 characters")
+  .max(50, "Title must be less than 50 characters"),
+  content: z
+  .string()
+  .min(50, "Content must be at least 50 characters")
+  .max(500, "Content must be less than  500 characters")
 
-  });
+  });
+
+  export default noteSchema