From ece233dc4083bb9c23cc8f5ff2a6cf4a8cb6a92c Mon Sep 17 00:00:00 2001 From: jamila Date: Mon, 18 Aug 2025 19:49:42 +0300 Subject: [PATCH] complated --- package-lock.json | 2 +- package.json | 2 +- server/notes.db | Bin 16384 -> 16384 bytes src/App.jsx | 2 +- src/components/CreateNoteForm.jsx | 97 +++++++++++++++++++++++++++--- src/pages/CreateNote.jsx | 4 +- src/schema/notes.js | 20 +++++- 7 files changed, 112 insertions(+), 15 deletions(-) diff --git a/package-lock.json b/package-lock.json index 70de9dc..e5aec89 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "name": "sticky-notes-app", "version": "0.0.0", "dependencies": { - "@hookform/resolvers": "^3.3.4", + "@hookform/resolvers": "^3.10.0", "axios": "^1.9.0", "lucide-react": "^0.344.0", "react": "^18.3.1", diff --git a/package.json b/package.json index cfcfc8e..79c37ed 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "preview": "vite preview" }, "dependencies": { - "@hookform/resolvers": "^3.3.4", + "@hookform/resolvers": "^3.10.0", "axios": "^1.9.0", "lucide-react": "^0.344.0", "react": "^18.3.1", diff --git a/server/notes.db b/server/notes.db index 9fb91df1bfcf0c2fe714e14a2690badbfe389499..a840e7ecc41bbc41185ece72c4b072c19a1b535a 100644 GIT binary patch literal 16384 zcmeI2-*4Mg6vwZdDN}=Dw?vhN0O{@rBk4BFc5ElH@YVn(RCH+xiCFhinfkg->)2iD zsVi@Yhw;E)!5c4o0saO41pa~j4daCut{u;@9k)W-%g~N3C-ph^d(OR|b6v^G`R41b zaX_%+PbXG@n`i|w4BEgLAvB`b6?(lomgpbpd*+qnlJ5}`roU9_fD-#X;_B>Q^a~Ck z00e*l5C8%|00;m9AOHk_01$Yq2s|p4d6j3*#-2@{j_s#=o*$6Yz5OY%0%Gr3L3DrR zvw_(ins~GSx%m(m4a3`g91X3<(r(b$St|3lZ!^1r^_@#jAG`Dwckh%uenPzc{B0>t zFzkN1W#Zh}x@S$u9ja{nFk-IqJkR{N9L0vvv56y=|+~20xXlrZk-1ohJc)^A48Mp3*1D>4N zA=r38oU;+Wn={;V#69OuIF0?A{hgh%SF6ve&))eXeZEy&6BY{ufB+Bx0zd!=00AHX z1l}Y98?`dxdBZqyEl)ZlrF%N;>! ziHq{s-eYO@j}0U6?eh>J4*ZEfo%(0#WvIH^(p61pcjQcXEO6zfWc;p@(9lLINDw?jUy3!Fuv6Y!h+D^CU{TdBmTaM${R!*)&E0OaBQ4{<4 zW*NPAU>McYr77)E=6#J9bDem8{buiE6%hYGU8G zQAV}*4TJ6+nvER0=eY=yuF67Fk@9Oz>>Jl-5p2hDEc#*Dxd>tyq1{=amDulHqlKfi z!sUjG&FYnou4n}taBjbcGx|wR-_k`{=(J|}^?DhtuF}fTLl!?-r*jV<9QxeYPNHjv zkFBEVk|?NJs!TciPJ@<7HH>e=GD%;~itq)kO{I4}shnBv{6U^6Rb6fh?RKgfIs5GW z|0UvHzDfV!U@kxa2mk>f00e*l5C8%|00;m9AOHk_z-tp&W=cF0wJNMvXfTF*fw&jk zpWLt9&z#Qf00e*l5C8%|00;m9AOHmZR|GyN8BFr4b*|Z@ zMqed=%R1*BBkwLMsWa{eSuJ$N-5x940O<>1<6aIfuT1x6u!YXJ=c1Z-rrRlQ(V~2q y%{gzD_^3dcv^U%=a3-A#Hwv6dQ^NH{=e*Vu4iDqz?rlKH2ww1nDpHM delta 176 zcmZo@U~Fh$oFL7}IZ?)$k#l3hGJcj>4E(b;3o16%Rsf=sj8ui>{JfIXyb^`9{33;1gc2hIBU4=i6I~;V5CcOiV?!%LLp@Vt%P1V; hi~q|DaI } /> - } /> + } /> diff --git a/src/components/CreateNoteForm.jsx b/src/components/CreateNoteForm.jsx index ffb1252..0907bd7 100644 --- a/src/components/CreateNoteForm.jsx +++ b/src/components/CreateNoteForm.jsx @@ -1,25 +1,108 @@ // TODO: Import useForm, zodResolver, axios, useNavigate, useState, and noteSchema +import { useForm } from "react-hook-form"; +import axios from "axios" +import { useState } from "react"; +import { zodResolver } from "@hookform/resolvers/zod"; +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() + 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 + + // 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 + + const sendToTheServer = async (data) => { + setIsSubmitting(true); + try { + await axios.post("http://localhost:3001/api/notes", data, + { headers: { + "Content-Type": "application/json" + }} + ) + reset() + setTimeout(() => { + navigate("/ViewNotes") + }, 2000); + + } catch (err) { + console.log({"Error": err}) + } + }; + return ( - <> -

Create Note

- {/* TODO: Setup the form with TailwindCSS, create a form with the following fields: title, content, and submit button */} - +
+

Create a New Note

+ {/* TODO: Setup the form with TailwindCSS, create a form with the following fields: title, content, and submit button */} +
+
+ + +
+ {errors.title && ( +

{errors.title.message}

+ )} +
+ + +
+ {errors.content && ( +

{errors.content.message}

+ )} +
+ +
+
+
); }; diff --git a/src/pages/CreateNote.jsx b/src/pages/CreateNote.jsx index cc0d827..e31a28e 100644 --- a/src/pages/CreateNote.jsx +++ b/src/pages/CreateNote.jsx @@ -3,14 +3,14 @@ import CreateNoteForm from "../components/CreateNoteForm"; const CreateNote = () => { return (
-
+

Create a New Sticky Note

Jot down your thoughts, ideas, or reminders

-
+
diff --git a/src/schema/notes.js b/src/schema/notes.js index 4621c8c..5ef2143 100644 --- a/src/schema/notes.js +++ b/src/schema/notes.js @@ -1,8 +1,22 @@ 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 - }); \ No newline at end of file + + + const noteSchema = z.object({ + title: z + .string() + .min(2, "Make sure the title is required") + .max(50, "Title cannot be longer then 50 characters"), + + content: z + .string() + .min(2, "Make sure the content is required") + .max(500, "content cannot be longer then 500 characters") + + + }); + + export default noteSchema; \ No newline at end of file