week 13 partcially done

src/components/CreateNoteForm.jsx

@@ -1,26 +1,71 @@
-// TODO: Import useForm, zodResolver, axios, useNavigate, useState, and noteSchema
-
-
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import axios from "axios";
 import { Save } from "lucide-react";
+import { noteSchema } from "../schema/notes";
 
 const CreateNoteForm = () => {
-  // TODO: Setup isSubmitting state with useState
-  // TODO: create navigate variable and set to useNavigate()
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  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 },
+  } = useForm({
+    resolver: zodResolver(noteSchema),
+  });
 
   const sendToTheServer = async (data) => {
-    // 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
+    setIsSubmitting(true);
+    try {
+      await axios.post("http://localhost:3001/api/notes", data);
+      navigate("/notes");
+    } catch (error) {
+      console.error("Error creating note:", error);
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
   return (
-    <>
-    <h1>Create Note</h1>
-    {/* TODO: Setup the form with TailwindCSS, create a form with the following fields: title, content, and submit button */}
-    </>
+    <form
+      onSubmit={handleSubmit(sendToTheServer)}
+      className="max-w-md mx-auto p-4 bg-white shadow rounded"
+    >
+      <h1 className="text-xl font-bold mb-4">Create Note</h1>
+
+      {/* Title field */}
+      <input
+        type="text"
+        placeholder="Title"
+        {...register("title")}
+        className="border p-2 w-full"
+      />
+      {errors.title && <p className="text-red-500">{errors.title.message}</p>}
+
+      {/* Content field */}
+      <textarea
+        placeholder="Content"
+        {...register("content")}
+        className="border p-2 w-full mt-2"
+      />
+      {errors.content && <p className="text-red-500">{errors.content.message}</p>}
+
+      {/* Submit button */}
+      <button
+        type="submit"
+        disabled={isSubmitting}
+        className="mt-4 bg-blue-500 text-white p-2 rounded flex items-center justify-center"
+      >
+        <Save className="mr-2" />
+        {isSubmitting ? "Saving..." : "Save Note"}
+      </button>
+    </form>
   );
 };
 
 export default CreateNoteForm;
+

src/schema/notes.js

@@ -1,8 +1,6 @@
 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
-
-  });
+  title: z.string().max(50, "Title must be 50 characters or fewer").min(1, "Title is required"),
+  content: z.string().max(500, "Content must be 500 characters or fewer").min(1, "Content is required"),
+});