From b73e51ad84fd769bfbdb4621f9bd9631a275c1ad Mon Sep 17 00:00:00 2001
From: naqib-axmed <naqiibdinix@gmail.com>
Date: Sun, 7 Sep 2025 22:19:37 +1300
Subject: [PATCH] assignment 13 or week 3 react

---
 server/notes.db                   | Bin 16384 -> 16384 bytes
 src/components/CreateNoteForm.jsx |  79 ++++++++++++++++++++++++++++--
 src/schema/notes.js               |  11 ++++-
 3 files changed, 86 insertions(+), 4 deletions(-)

diff --git a/server/notes.db b/server/notes.db
index 9fb91df1bfcf0c2fe714e14a2690badbfe389499..3907916b01d0f6f8b212c14e715cc0d85c669575 100644
GIT binary patch
literal 16384
zcmeI&@lM)690%|#7^@~y7iXFnN$wAqK~z#&D^PRE*lad31jlNkBn#=J3uIU()XeO^
z%id%Uvt%!@7w{SUe@8`7)NLknf5`XOl+wH3(YsH}AD7<SH^pY)(GTs;p&L+x%n?Z<
z&nP8?Y>ItC>=zLcUoM|Z7ZtxbZjw~z+pI{4#=a0G5&J0)2nav`0uX=z1Rwwb2tWV=
z5Ev_gYIIUHRq1onuX`uW`bo`i2VS>!(DB^BtJmBhJfC<`vGa~i3#Bc4kKU9<%Ox77
zCi+eDL2@TDsjjR@`+@tu<#mr*Vv1YqdPm2ee=vF)?O(vjKQG#JBsbx^hu*4andG~Y
ztg5Q?bvpdb@Pgq-<VyRnh$d!eKbm#XbH{#ZSLjZqu$`~$)7SPs&F?zpLP@mTwoA_H
zAUkLVEsr|(o<mDzvF{d(!^(rUA9#LnYxTKX{?>%!PxT&bKcRokWN&URDGj1DVn1fr
z#Wpoo4<QB%0SG_<0uX=z1Rwwb2#lcsH>YIsl(!kH-yD1{CX)h>GUoFq3%%SjW3Mj9
z)_sSr>E@c2ThlfiZNoBimX=MKhEct(oRG*eS>f}HxySB5j=?oeC!Mo&%`&x=k<ASI
zGEy#PnL07}BgPtT<62)Rb?LRjyA<dePcF)2o2ME3_=mX5@BUrx07KlEjAg7_`bLT`
zFUjN`R|S4A_(EJJWiB(;z1J9YCF5w~0Wqy~HkH<M!}~H)em?&{Bg)wr{^>Df2tWV=
z5P$##AOHafKmY;|fWSi*n3kfd6fRYW&xmnK$|+G!mG9x!e#isI*dPD_2tWV=5P$##
zAOHafKmY>&MPMn)r1Mww*)=`wXxZK}j&)tUqR&>RhLvKC$H@AL$D(`j!OQ)yQqwKN
aOlhW3oxjrZ(jtVkmZ>gYsT_IzAO8hFQkM7t

delta 176
zcmZo@U~Fh$oFL7}IZ?)$k#l3hGJcj>4E(b;3o1<DPf1~6V^9vZwe_u3$V)9($jdKD
zEy>6%Rsf=sj8ui>{JfIXyb^`9{33;1gc2hIBU4=i6I~;V5CcOiV?!%LLp@Vt%P8#P
ioBzo(3UIS<F)%PN@;_$ae+;zxCjaDodoE#2BUk`+voBTv

diff --git a/src/components/CreateNoteForm.jsx b/src/components/CreateNoteForm.jsx
index ffb1252..4846c26 100644
--- a/src/components/CreateNoteForm.jsx
+++ b/src/components/CreateNoteForm.jsx
@@ -1,25 +1,98 @@
 // TODO: Import useForm, zodResolver, axios, useNavigate, useState, and noteSchema
 
 
+import {useForm} from "react-hook-form"
+import axios from "axios"
+import {zodResolver} from "@hookform/resolvers/zod"
+import { useState } from "react";
+import {noteSchema} from "../schema/notes"
+import {useNavigate} from "react-router-dom"
+
+
+
+
 import { Save } from "lucide-react";
 
 const CreateNoteForm = () => {
+
+ 
+
   // TODO: Setup isSubmitting state with useState
+
+   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
+ setIsSubmitting(true)
+    try {
+  await axios.post("http://localhost:3001/api/notes", data, 
+
+        {headers: {
+          "content-type": "application/json"
+        }}
+      )
+
+      reset()
+    setTimeout (() => {
+     navigate("/notes")
+    }, 3000)
+   
+
+    }catch(err) {
+      console.log(err)
+      
+    }finally {
+    setIsSubmitting(false)
+    }
+
+
     // TODO: Use axios to create a new note in the server using the endpoint http://localhost:3001/api/notes
+
+    
   };
 
   return (
-    <>
-    <h1>Create Note</h1>
+    <div  className="text-bold border p-4  mb-2 max-w-xl mx-auto">
+    <h1>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="" onSubmit={handleSubmit(sendToTheServer)}>
+
+  
+    <label htmlFor="title" className="mt-5 block">Title</label>
+    <input type="text" {...register("title")} className="outline-none border p-2 w-full rounded-md" placeholder="Note Title" id="title"></input>
+    {errors.title && <p className="text-red-500 text-sm">{errors.title.message}</p>}
+
+    
+     <label htmlFor="content" className="mt-5 block">Content</label>
+    <textarea className="outline-none border p-2 pb-20 w-full rounded-md" {...register("content")} placeholder="Write your note here..." id="content"></textarea>
+        {errors.content && <p className="text-red-500 text-sm">{errors.content.message}</p>}
+    <button    disabled={isSubmitting} type="submit" className={`flex rounded-md w-full justify-center items-center gap-1 py-1 mt-5  ${isSubmitting ? "bg-red-600" : " bg-yellow-500 text-white "}`}>
+    <Save size={15}/> <span>{isSubmitting ? "loading..."  : "Save Note"}</span>
+
+    </button>
+ 
+      
+
+    </form>
+
+    </div>
+
   );
 };
 
diff --git a/src/schema/notes.js b/src/schema/notes.js
index 4621c8c..72ecbe7 100644
--- a/src/schema/notes.js
+++ b/src/schema/notes.js
@@ -4,5 +4,14 @@ 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(10, "Title must be at least 10 characters")
+  .max(50, "Title must be less than 50 characters"),
+  content: z
+  .string()
+  .min(50, "Content must be at least 50 characters")
+  .max(500, "Content must be less than  500 characters")
 
-  });
\ No newline at end of file
+  });
+
+  export default noteSchema
\ No newline at end of file