From ccd83bfd9421e4d769068fd2f770465b8d1972de Mon Sep 17 00:00:00 2001
From: Abdulkadir  Hassan Elmi <zacimka8@Abdulkadirs-MacBook-Pro.local>
Date: Sun, 28 Sep 2025 18:52:34 +0100
Subject: [PATCH 1/2] waan dhameeyey

---
 server/notes.db                   | Bin 16384 -> 16384 bytes
 src/components/CreateNoteForm.jsx | 133 ++++++++++++++++++++++++++++--
 src/schema/notes.js               |  13 ++-
 3 files changed, 137 insertions(+), 9 deletions(-)

diff --git a/server/notes.db b/server/notes.db
index 9fb91df1bfcf0c2fe714e14a2690badbfe389499..057125adca8256b96f0642ab24a0a22d96ea3cff 100644
GIT binary patch
delta 587
zcmZo@U~Fh$oFL68JW<A(QFvp*5`I2rzKaa}v-r*UF7kErscse&5az2-;bLQujJ37(
zEzQWx%ymjF%2X&%tVm4EQ%Foq$y6vxOiD~t$W2X6%~8nAE6zw%NX*Ge%rG)AGSxM(
z)HSjQF*LU_v9vNW*RwD&j>0AG!pX)Us%UEqGCv$-AlNpb>Uv~jfF_yfS(+K38v_?l
zW(PVp8s^w=kUNtUl0a?-J2oXh58_ySZZ!Zp7wA??h$Zz1PrxOT*w`54gMqdrCg+sq
z0!;>6l&6qgs*sYHkyxpam6%eVn3J7anGW<xW=b|Nw2(b+YGq_*Wn`&mYH5Vx6J+re
z7B&WDpdFhR$;S!^b8#^+FfjA4WZ-|ye~f=6e-D2?Fm_`3>t&d28Ig@f4r?wflJJn?
Z#3BjzAUnDwvdh>Ik|vX{%L_8H000~Xleho?

delta 63
zcmZo@U~Fh$oFL7}IZ?)$k#l3h5`H#D{#gwCvo;GVOyJ)<OFmVAn}v&kfq{|#F$4c&
Tpy*Bh$@%tNlds7OF|q&v9lH?c

diff --git a/src/components/CreateNoteForm.jsx b/src/components/CreateNoteForm.jsx
index ffb1252..d6efaad 100644
--- a/src/components/CreateNoteForm.jsx
+++ b/src/components/CreateNoteForm.jsx
@@ -1,25 +1,144 @@
 // 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 */}
-    </>
+    <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"
+            placeholder="Ku qoral title ka xagaan "
+            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}
+            placeholder=" meshaan ku qor maclumaad "
+            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..b7804d9 100644
--- a/src/schema/notes.js
+++ b/src/schema/notes.js
@@ -1,8 +1,17 @@
 import { z } from "zod";
 
 export const noteSchema = z.object({
-  //TODO: create the title and content schema, 
+  //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
 
-  });
\ No newline at end of file
+  title: z
+    .string()
+    .min(2, "title must be at least 50 characters")
+    .max(50, "tile must be less than 100 characters"),
+
+  content: z
+    .string()
+    .min(2, "content must be at least 500 characters")
+    .max(500, "content must be less than 100 characters"),
+});

From c927dab2e1009c9a8799ca6a5881935f4969c000 Mon Sep 17 00:00:00 2001
From: Abdulkadir  Hassan Elmi <zacimka8@Abdulkadirs-MacBook-Pro.local>
Date: Sun, 28 Sep 2025 18:55:09 +0100
Subject: [PATCH 2/2]  Hada ayaan dhameeyey

---
 src/components/CreateNoteForm.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CreateNoteForm.jsx b/src/components/CreateNoteForm.jsx
index d6efaad..a051512 100644
--- a/src/components/CreateNoteForm.jsx
+++ b/src/components/CreateNoteForm.jsx
@@ -43,7 +43,7 @@ const CreateNoteForm = ({ onSubmitSuccess }) => {
     setSubmitError("");
 
     try {
-      await axios.post("http://localhost:3001/api/notes", data, {
+      await axios.post("http://localhost:5173/api/notes", data, {
         headers: { "Content-Type": "application/json" },
       });
       setSubmitSuccess(true);