From 747f92a2543e4cf699ebd8d0ff00a3dbc265a1f9 Mon Sep 17 00:00:00 2001
From: alqazimi <alqazimi@example.com>
Date: Sun, 28 Sep 2025 18:33:34 +0100
Subject: [PATCH 1/3] finisheed alqazimi

---
 README.md                         |   2 +-
 server/notes.db                   | Bin 16384 -> 16384 bytes
 src/components/CreateNoteForm.jsx | 132 ++++++++++++++++++++++++++++--
 src/schema/notes.js               |  16 ++++
 4 files changed, 142 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 71843a6..cfa2ed5 100644
--- a/README.md
+++ b/README.md
@@ -26,7 +26,7 @@
    npm install
    npm run dev
    ```
-6. Create a new branch: git checkout -b `<firstName-lastName>`. Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly.
+6. Create a new branch: . Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly.
 7. Push commits: git push origin `<firstName-lastName>`.
 
 ### Task 2: MVP
diff --git a/server/notes.db b/server/notes.db
index 9fb91df1bfcf0c2fe714e14a2690badbfe389499..4d1cf6dc88c13b222e91e5956cd68e05ca39b533 100644
GIT binary patch
delta 684
zcmZ`%ze~eF6uxK)Qkz~&C@r*7Q5+ktcTJic91adTiy&sQHorg{k+xu`#Jz*!WH(30
z(*L2e|AY8fbnzlsFF|?S8@_k%d-r|s;#i7f>9H==o*G9|ZGQO*D@6)&%4!47U`bgO
zm&z)M`NO9Yv4RZL3S(Dcc<s6qjIiE9RtuYFZG#enVoM{YVgHB23oup7j0Ij01mYz^
zb(3O4GjO_D#Cdb{qShJnJjZv2K2I46MD@0&lTK<rr&!~h;+zxk`A*=SC^D$;Gj`{?
zH^abn?gxH<H1YgFDAIN*>QZ89R)^R)67-6NV_62(1IGH}aCG~fb_czFuO~7gL`jEY
ztm$S~d|(O(030U%PR8S`zl0LBM-kSLk@bk6AKbPVv!+|BDtUMca!?2G1HM5WPWj=n
zD3_WrYHTt|lqhbl0GEJ@MR5b$e-zi==Cib-L5ff$$#+SqmbvVm^w3{PTS@Eld$T6x
Fz5t~@pHKh*

delta 67
zcmZo@U~Fh$oFL7}IZ?)$k#l3hLVivL1_nm{Sq%KMHVZ0D;NLt;K2?C5g$peDn1TN>
TQ1m80iwv_Z<KzqS5{xVWGldWR

diff --git a/src/components/CreateNoteForm.jsx b/src/components/CreateNoteForm.jsx
index ffb1252..9bf8fdf 100644
--- a/src/components/CreateNoteForm.jsx
+++ b/src/components/CreateNoteForm.jsx
@@ -1,25 +1,143 @@
 // TODO: Import useForm, zodResolver, axios, useNavigate, useState, and noteSchema
 
+import React, { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import axios from "axios";
+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()
+// TODO: Setup isSubmitting state with useState
+// TODO: create navigate variable and set to useNavigate()
 
+const CreateNoteForm = ({ onSubmitSuccess }) => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitSuccess, setSubmitSuccess] = useState(false);
+  const [submitError, setSubmitError] = useState("");
 
   // TODO: Set up the form with useForm from react-hook-form and zodResolver from @hookform/resolvers/zod
 
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid, isDirty },
+    reset,
+  } = useForm({
+    mode: "onChange",
+    resolver: zodResolver(noteSchema),
+    defaultValues: {
+      title: "",
+      content: "",
+    },
+  });
+
   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);
+    setSubmitSuccess(false);
+    setSubmitError("");
+
+    try {
+      await axios.post("http://localhost:3001/api/notes", data, {
+        headers: { "Content-Type": "application/json" },
+      });
+      setSubmitSuccess(true);
+      reset();
+      onSubmitSuccess?.();
+      setTimeout(() => {
+        setSubmitSuccess(false);
+      }, 5000);
+    } catch (error) {
+      setSubmitError(
+        "There was an error submitting your form. Please try again."
+      );
+      console.error("Form submission error:", 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 */}
-    </>
+    /* TODO: Setup the form with TailwindCSS, create a form with the following fields: title, content, and submit button */
+    <div className="bg-white rounded-xl shadow-md p-6 md:p-8 max-w-4xl mx-auto">
+      <h1 className="text-2xl font-bold mb-2">Create a New Note</h1>
+
+      {submitSuccess && (
+        <div className="bg-green-50 border border-green-200 text-green-800 rounded-md p-1 mb-6">
+          Note created successfully!
+        </div>
+      )}
+
+      {submitError && (
+        <div className="bg-red-50 border border-red-200 text-red-800 rounded-md p-4 mb-6">
+          {submitError}
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit(sendToTheServer)} className="space-y-6">
+        <div>
+          <label
+            htmlFor="title"
+            className="form-label block mb-1 font-semibold"
+          >
+            Note Title
+          </label>
+          <input
+            id="title"
+            type="text"
+            className={`input-field w-full border p-2 rounded ${
+              errors.title ? "border-red-500" : "border-gray-300"
+            }`}
+            {...register("title")}
+          />
+          {errors.title && (
+            <p className="text-red-500 text-sm mt-1">{errors.title.message}</p>
+          )}
+        </div>
+
+        <div>
+          <label
+            htmlFor="content"
+            className="form-label block mb-1 font-semibold"
+          >
+            content
+          </label>
+          <textarea
+            id="content"
+            rows={5}
+            className={`input-field w-full border p-2 rounded ${
+              errors.content ? "border-red-500" : "border-gray-300"
+            }`}
+            {...register("content")}
+          />
+          {errors.content && (
+            <p className="text-red-500 text-sm mt-1">
+              {errors.content.message}
+            </p>
+          )}
+        </div>
+
+        <div className="flex justify-center">
+          <button
+            type="save note"
+            disabled={isSubmitting || !isValid || !isDirty}
+            className={`w-full px-4 py-3 rounded text-white ${
+              isValid && isDirty && !isSubmitting
+                ? "bg-yellow-600 hover:bg-yellow-700"
+                : "bg-yellow-400 cursor-not-allowed"
+            } flex items-center justify-center gap-2`}
+          >
+            <Save size={16} />
+            {isSubmitting ? "Submitting..." : "Save note"}
+          </button>
+        </div>
+      </form>
+    </div>
   );
 };
 
diff --git a/src/schema/notes.js b/src/schema/notes.js
index 4621c8c..42078db 100644
--- a/src/schema/notes.js
+++ b/src/schema/notes.js
@@ -1,8 +1,24 @@
 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()
+    .min(2, "title must be at least 50 characters")
+    .max(100, "tile must be less than 100 characters"),
+
+
+     content: z
+    .string()
+    .min(2, "content must be at least 500 characters")
+    .max(100, "content must be less than 100 characters"),
+
+
+
   });
\ No newline at end of file

From db70761ff9776961b89cd87cb01edcb52bf75b6d Mon Sep 17 00:00:00 2001
From: alqazimi <alqazimi@example.com>
Date: Sun, 28 Sep 2025 18:37:23 +0100
Subject: [PATCH 2/3] changed

---
 server/notes.db     | Bin 16384 -> 16384 bytes
 src/schema/notes.js |   4 ++--
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/server/notes.db b/server/notes.db
index 4d1cf6dc88c13b222e91e5956cd68e05ca39b533..58e9716245850861132a1d7c0b4e1ca072e13d89 100644
GIT binary patch
delta 203
zcmZo@U~Fh$oFL68IZ?)$QF3F#5`H08-rr38v-kygfAbyVtLOdA`+H;KQ{KtHWt|vZ
zC)>$6y1VkRF~~~W+7_jzrxvA`6oE(}+sMGkRM)^#*T^Eo(A>({)XLCQ&&0ws3YYli
zV{(>);(T2EK@6<?rVRX#`B(Cr^7ruP14+}(f(r8dlTGav7-c8N%Sp&_%P`wA;xdVE
Ia*urp0Mzz0n*aa+

delta 203
zcmZo@U~Fh$oFL68F;T{uQDS4l5`G~T-rr38v-kygfAbyV{SAT}8=vw{{w?do*fZHq
z&e1(BEhRmrI2}kB85o)B8d&NYS%erGTbUYInHuVu8k<Dn66cR(2$#0CwarLN$w=FL
zOwLkJoR^C~h=GOQl!5;-|4M#S{vIF(!p(vT^8Axc?G+fUCdbQ3$Z_)@W3a+yEZ5{7
G`w{?Vw>Am@

diff --git a/src/schema/notes.js b/src/schema/notes.js
index 42078db..378e6a8 100644
--- a/src/schema/notes.js
+++ b/src/schema/notes.js
@@ -10,13 +10,13 @@ export const noteSchema = z.object({
 
    title: z
     .string()
-    .min(2, "title must be at least 50 characters")
+    .min(50, "title must be at least 50 characters")
     .max(100, "tile must be less than 100 characters"),
 
 
      content: z
     .string()
-    .min(2, "content must be at least 500 characters")
+    .min(500, "content must be at least 500 characters")
     .max(100, "content must be less than 100 characters"),
 
 

From edd3858838082aa9ebd9751706a5e0deab8c7e79 Mon Sep 17 00:00:00 2001
From: alqazimi <alqazimi@example.com>
Date: Sun, 28 Sep 2025 18:48:25 +0100
Subject: [PATCH 3/3] last

---
 src/schema/notes.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/schema/notes.js b/src/schema/notes.js
index 378e6a8..89d3d0c 100644
--- a/src/schema/notes.js
+++ b/src/schema/notes.js
@@ -10,14 +10,14 @@ export const noteSchema = z.object({
 
    title: z
     .string()
-    .min(50, "title must be at least 50 characters")
-    .max(100, "tile must be less than 100 characters"),
+    .min(2, "title must be at least 50 characters")
+    .max(50, "tile must be less than 100 characters"),
 
 
      content: z
     .string()
-    .min(500, "content must be at least 500 characters")
-    .max(100, "content must be less than 100 characters"),
+    .min(2, "content must be at least 500 characters")
+    .max(500, "content must be less than 100 characters"),