Week 13 "complated"

package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@hookform/resolvers": "^3.3.4",
+    "@hookform/resolvers": "^3.10.0",
     "axios": "^1.9.0",
     "lucide-react": "^0.344.0",
     "react": "^18.3.1",

src/App.jsx

@@ -11,7 +11,7 @@ function App() {
         <main className="container mx-auto px-4 py-8">
           <Routes>
             <Route path="/" element={<CreateNote />} />
-            <Route path="/notes" element={<ViewNotes />} />
+            <Route path='/ViewNotes' element={<ViewNotes />} />
           </Routes>
         </main>
       </div>

src/components/CreateNoteForm.jsx

@@ -1,25 +1,108 @@
 // TODO: Import useForm, zodResolver, axios, useNavigate, useState, and noteSchema
 
+import { useForm } from "react-hook-form";
+import axios  from "axios"
+import { useState } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useNavigate } from "react-router-dom";
+import noteSchema from "../schema/notes";
 
 import { Save } from "lucide-react";
 
 const CreateNoteForm = () => {
   // TODO: Setup isSubmitting state with useState
-  // TODO: create navigate variable and set to useNavigate()
+  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
+
+      // TODO: Send the data to the server
     // TODO: Use axios to create a new note in the server using the endpoint http://localhost:3001/api/notes
+
+  const sendToTheServer = async (data) => {
+    setIsSubmitting(true);
+     try {
+      await axios.post("http://localhost:3001/api/notes", data, 
+       { headers: {
+        "Content-Type": "application/json"
+       }}
+      )
+      reset()
+      setTimeout(() => {
+        navigate("/ViewNotes")
+      }, 2000);
+
+     } catch (err) {
+      console.log({"Error": err})
+     }
+
   };
+
 
   return (
-    <>
-    <h1>Create Note</h1>
-    {/* TODO: Setup the form with TailwindCSS, create a form with the following fields: title, content, and submit button */}
-    </>
+    <div className="bg-white rounded-x1 shadow-md p-6 md:p-8 max-w-2xl mx-auto">
+      <h1 className="text-2xl mb-6">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="space-y-6" onSubmit={handleSubmit(sendToTheServer)}>
+        <div>
+          <label
+            htmlFor="title"
+            className="block text-sm font-medium text-gray-700 mb-1"
+          >
+            Title
+          </label>
+          <input
+            type="text"
+            id="title"
+            {...register("title")}
+            placeholder="Note Title"
+            className="w-full p-2 border border-gray-300 rounded-md"
+          />
+        </div>
+        {errors.title && (
+          <p className="text-red-600 text-sm mt-1">{errors.title.message}</p>
+        )}
+        <div>
+          <label
+            htmlFor="content"
+            className="block text-sm font-medium text-gray-700 mb-1"
+          >
+            Content
+          </label>
+          <textarea
+            type="text"
+            id="content"
+            {...register("content")}
+            className="w-full p-4 border border-gray-300 rounded-md"
+            placeholder="Write your note here..."
+          ></textarea>
+        </div>
+        {errors.content && (
+          <p className="text-red-600 text-sm mt-1">{errors.content.message}</p>
+        )}
+        <div>
+          <button
+            type="submit"
+            className="w-full bg-yellow-500 flex  align-center justify-center text-white p-2 rounded-md hover:bg-yellow-600 cursor-pointer"
+          >
+            <Save size={20} className="mr-1"/>
+            Save Note
+          </button>
+        </div>
+      </form>
+    </div>
   );
 };
 

src/pages/CreateNote.jsx

@@ -3,14 +3,14 @@ import CreateNoteForm from "../components/CreateNoteForm";
 const CreateNote = () => {
   return (
     <div className="max-w-4xl mx-auto">
-      <div className="mb-8 text-center">
+       <div className="mb-8 text-center">
         <h1 className="text-2xl font-bold text-gray-800 mb-2">
           Create a New Sticky Note
         </h1>
         <p className="text-gray-600">
           Jot down your thoughts, ideas, or reminders
         </p>
-      </div>
+      </div> 
 
       <CreateNoteForm />
     </div>

src/schema/notes.js

@@ -1,8 +1,22 @@
 import { z } from "zod";
-
-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
 
-  });
+
+
+ const noteSchema = z.object({
+  title: z
+       .string()
+       .min(2, "Make sure the title is required")
+       .max(50, "Title cannot be longer then 50 characters"),
+
+       content: z
+          .string()
+          .min(2, "Make sure the content is required")
+          .max(500, "content cannot be longer then 500 characters")
+
+
+  });
+
+ export default noteSchema;