From e5d08a1aaf63b6402824a7258cc700eb4d74d3a9 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 10 Sep 2025 13:45:06 +0300 Subject: [PATCH] done --- package-lock.json | 7 ++ package.json | 1 + server/notes.db | Bin 16384 -> 16384 bytes src/components/CreateNoteForm.jsx | 112 +++++++++++++++++++++++++++--- src/schema/notes.js | 8 +++ 5 files changed, 117 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index 70de9dc..d2e530a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "react-dom": "^18.3.1", "react-hook-form": "^7.50.1", "react-router-dom": "^6.22.1", + "react-schema": "^2.0.0", "zod": "^3.22.4" }, "devDependencies": { @@ -3818,6 +3819,12 @@ "react-dom": ">=16.8" } }, + "node_modules/react-schema": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/react-schema/-/react-schema-2.0.0.tgz", + "integrity": "sha512-N3ijpTnWugwdeyTiG2vkPLtaVNtiGtJDmPbuh7+2LaOc8mmaJ2JKTHKPpLIcJqoeNPtEGsKBzLwh0flZfh0+Zw==", + "license": "MIT" + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index cfcfc8e..4da4126 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "react-dom": "^18.3.1", "react-hook-form": "^7.50.1", "react-router-dom": "^6.22.1", + "react-schema": "^2.0.0", "zod": "^3.22.4" }, "devDependencies": { diff --git a/server/notes.db b/server/notes.db index 9fb91df1bfcf0c2fe714e14a2690badbfe389499..a1748a5bc7dec5fca8bdd5796eb0511c582b6a7a 100644 GIT binary patch delta 154 zcmZo@U~Fh$oFL7}Gf~Ewk!NGV5`H!Y0R{&CJ(~p;Ch$+5C9mY<#LC7XE^TX@mY$xG zo|KYOoRXerWME{fYhbBsXb@s(U}a)tWn!RbY+)INU3~LDc}4+lRxSo002%%mX!uQj OSs7+qM(i3aqgVlFN+UY} delta 154 zcmZo@U~Fh$oFL7}IZ?)$k#l3h5`H#D{#gwCvo;GVOyHk9OJ2#TBsH%@AuYd1A-7T? zFST4DFTW(!$iT={*T6*A$RfnR(8}1*%Fs~H)Yvi#yZGjR@{9u9EL;o>42=Ab8TcOq S4Zq1RE5mHdh+Tta6bk@-&L$fG diff --git a/src/components/CreateNoteForm.jsx b/src/components/CreateNoteForm.jsx index ffb1252..d997bca 100644 --- a/src/components/CreateNoteForm.jsx +++ b/src/components/CreateNoteForm.jsx @@ -1,26 +1,116 @@ // 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 { noteSchema } from "../schema/notes"; +import { useState } from "react"; +import { useNavigate } from "react-router-dom"; import { Save } from "lucide-react"; -const CreateNoteForm = () => { - // TODO: Setup isSubmitting state with useState - // TODO: create navigate variable and set to useNavigate() + + const CreateNoteForm = () => { + const [isSubmitting, setIsSubmitting] = useState(false); + + const navigate = useNavigate(); + + const { + register, + handleSubmit, + reset, + formState: { errors }, + } = useForm({ + resolver: zodResolver(noteSchema), + defaultValues: { + title: "", + content: "", + }, + }); - // TODO: Set up the form with useForm from react-hook-form and zodResolver from @hookform/resolvers/zod 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); + try { + await axios.post(`http://localhost:3001/api/notes`, data); + + setTimeout(() => { + navigate("/notes"); + }, 500); + } catch (error) { + console.error("Failed to create note:", error); + alert("Failed to create note. Please try again."); + } finally { + setIsSubmitting(false); + } + }; return ( - <> -

Create Note

- {/* TODO: Setup the form with TailwindCSS, create a form with the following fields: title, content, and submit button */} - +
{ + await sendToTheServer(data); + reset(); + })} + > +

+ Create a New Note +

+ +
+ + + {errors.title && ( +

{errors.title.message}

+ )} +
+ +
+ +