From 5a74351b46326236601536cfbaf5e33e693bd334 Mon Sep 17 00:00:00 2001
From: EngIltire <iltirepoi@gmail.com>
Date: Fri, 15 Aug 2025 12:04:57 +0300
Subject: [PATCH] finished

---
 server/notes.db                   | Bin 16384 -> 16384 bytes
 src/components/CreateNoteForm.jsx |  88 +++++++++++++++++++++++++-----
 src/schema/notes.js               |   8 +++
 3 files changed, 82 insertions(+), 14 deletions(-)

diff --git a/server/notes.db b/server/notes.db
index 9fb91df1bfcf0c2fe714e14a2690badbfe389499..4a2fd042a25377816480eeb22539f8d7f0ee1a88 100644
GIT binary patch
literal 16384
zcmeI2%}ygn5XZ-`0bzl?oGeArsxDDLYb<|Y0+uYrum+(8L%?X4y`b^9ZFfAL@pktZ
zoSR{lQ=THXyhvUkQeGg>5Glu0x5uAAa^KWQX58OZzxsE(o0-e+Pq<>x@I}W~kh5M|
zk%;vjfMr>)@bdycqiX@bOs6BGf`7TcvQpxgHLS20`_YPT#Qwk=T||Hg5CI}U1c(3;
zAOb{y2oM1x@V_GPVR0#uPeg9HS7&#;es|;fipd*CFk7+ujjc@j#lc0nR4v1C<xTlL
zJXH<ODqyN^giT9o^L$|`@%nY-TG=(1$&W4`ac?C17%<P7PcDW7R7?9OWtgkG;n^LQ
z#Fm?btH^R9k%&C3m_E&b=Fh@Rdy@qlQ3x+yN6V|_qw)ouUmTy7F0SEi`5H=B)wAOY
zwmdCYs>yL}#g)sTT7F-J${BvHPEIC;j_)bvsb`Ca+)B?@2)cC*Hmneixv9_QODlg_
z@h@XPt^K~bAN?B>bP)j}Km>>Y5g-CYfCzkE1n#Z%W$T-VFN(!?jJ4f9T(BNzx9<d3
z+-rhracQ>HpnPyz%xME}VD9iS5jeI7E!(T(R@L>rCKI68odVpO3eIE-qQ?qk%MaW-
z^lX>wU8iZxy>6hAAemP;X)Lhy2)bj*M30FiV7I{Tm=j=|s4nom%b?cb>N0R}>n@=Y
zc#h(}2e(||7&xpDzL2SGI-B20?`~ys)l9aK%M~(vsdPU3;ko?#qnFFp-ls^hcrN@O
zn4{p_wLMR}U(x4~>X-qtz^7yAqYU9NI52x{UGET|o2399=APpQbtXaCvMrOKc!#;%
zWB673)ZuszQ9h>8EgxCQKxiuX%&q3DmSHg5{p;GJt$v6P-IZ|bi#BwH-(|w>WB<Bo
z>HHX^#v`Rh5=B$xkW(XYhXZSd0n!C56Rge!y2|QcH<XT>CLe-zY}c*XPJ51IHebkQ
zQ@eZlIg*q7hgf{s;-7Ac#RI?76|9BM@g5#y&|$;U;M1VsFbp25LiJ||-=g&JbYtY8
z+iA;YDI=6l7Xji42m>$tpxJW!L$Qt7Gf!s^<v5n^W0=X1zYKZKaZF-}1aG3SF`7>h
z8iMug9&e(wB^o9)Rb!2DN=rq@u)#$~cY%@8{pe?`;lz>P+M>x&H8>@VlsWp2b@J)-
zmeaC@jZqTda#a3YKr*|9bO!Tw<^nRwAEaYAy9caTJY~#i)+qW7mrj5)2sLE%K2oUB
zr;Q3~q6u2O!ywol=&()=A*7-Qqcvc7ytPrf((a**MtVd?jQLtXIKAghMh)ds`Rv}j
z$>aRN`r5Mf^<cADJQBXcL?2GLR9kS$-F9>f%FU+4+dfXaI^GXOz?F<@f$8}gu1(su
z>Dizs%ye*OSAtBsklRUZ?`+T8G|nG5tBCRbEn@7$As3;VO@whW;nJnUY(^bxEi`3L
zxma5pqivnm%4C_W=><>=dwMZ6aY0RZ<9RzOA4Z{Tqkx9<c(Mk}kk1s-dxh=Y)VG;g
zFQ@bM`9BiJ^FN*XKd;|-@`eZy0U|&IhyW2F0z`la5CI}U1c<;&WHAvj|3z4jB8{c^
zg%$rZ{#*Rl_|I`46Lb*)B0vO)01+SpM1Tko0U|&IhyW2F0{=natHoku_FaR?+eqt=
j3nwqqynI|Zd8s4*MB(`LiP#f`<M$ZW<_o7E|F8Z7-wdmb

delta 184
zcmZo@U~Fh$oFL7}IZ?)$k#l3h5`H#D{#gwCvo;GVOyEyVVPRuX4z{)RtyIWMEmz3P
zFG(%Q$ShU>qLPeMh2;FalGMBsg|z%4g<OOZBLgE-T>}$cBa09NLn~uLD?>v)Q)A00
k9O8@r%L{O`a4|42F!DcU;C~FX`X;}u46`jG4h>N(0G3cM(f|Me

diff --git a/src/components/CreateNoteForm.jsx b/src/components/CreateNoteForm.jsx
index ffb1252..b876f4e 100644
--- a/src/components/CreateNoteForm.jsx
+++ b/src/components/CreateNoteForm.jsx
@@ -1,25 +1,85 @@
-// TODO: Import useForm, zodResolver, axios, useNavigate, useState, and noteSchema
-
-
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import axios from "axios";
+import { useState } from "react";
+import { noteSchema } from "../schema/notes";
 import { Save } from "lucide-react";
+import { useNavigate } from "react-router-dom";
 
-const CreateNoteForm = () => {
-  // TODO: Setup isSubmitting state with useState
-  // TODO: create navigate variable and set to useNavigate()
-
+const CreateNoteForm = ({ onSubmitSuccess }) => {
+  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
+    try {
+      setIsSubmitting(true);
+      await axios.post("http://localhost:3001/api/notes", data);
+      if (onSubmitSuccess) {
+        onSubmitSuccess(); // notify parent page
+       
+      }
+       setTimeout(() => {
+      navigate("/notes");
+    }, 2000);
+    } 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="bg-white shadow-lg rounded-xl p-6 max-w-md mx-auto"
+    >
+      {/* Title */}
+      <label className="block text-gray-700 font-semibold mb-2">Title</label>
+      <input
+        type="text"
+        placeholder="Note Title"
+        {...register("title")}
+        className={`w-full border ${
+          errors.title ? "border-red-500" : "border-gray-300"
+        } rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400 transition`}
+      />
+      {errors.title && (
+        <p className="text-red-500 text-sm mt-1">{errors.title.message}</p>
+      )}
+
+      {/* Content */}
+      <label className="block text-gray-700 font-semibold mt-4 mb-2">
+        Content
+      </label>
+      <textarea
+        placeholder="Write your note here..."
+        {...register("content")}
+        className={`w-full h-32 border ${
+          errors.content ? "border-red-500" : "border-gray-300"
+        } rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400 transition resize-none`}
+      ></textarea>
+      {errors.content && (
+        <p className="text-red-500 text-sm mt-1">{errors.content.message}</p>
+      )}
+
+      {/* Submit Button */}
+      <button
+        type="submit"
+        disabled={isSubmitting}
+        className="mt-4 w-full bg-yellow-500 text-white font-semibold py-2 rounded-lg flex items-center justify-center gap-2 hover:bg-yellow-600 transition disabled:opacity-50"
+      >
+        <Save className="w-5 h-5" />
+        {isSubmitting ? "Saving..." : "Save Note"}
+      </button>
+    </form>
   );
 };
 
diff --git a/src/schema/notes.js b/src/schema/notes.js
index 4621c8c..6416a10 100644
--- a/src/schema/notes.js
+++ b/src/schema/notes.js
@@ -4,5 +4,13 @@ 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(1, "Title is required")
+    .max(50, "Title must be at most 50 characters"),
+  content: z
+    .string()
+    .min(1, "Content is required")
+    .max(500, "Content must be at most 500 characters"),
 
   });
\ No newline at end of file