From 25712509409948fb34ad96832099b9684f8e84d8 Mon Sep 17 00:00:00 2001 From: zakariahasanabdiali Date: Sat, 6 Sep 2025 20:56:32 +0300 Subject: [PATCH 1/2] week13 done --- server/notes.db | Bin 16384 -> 16384 bytes src/components/CreateNoteForm.jsx | 91 ++++++++++++++++++++++++++++-- src/schema/notes.js | 8 +++ tsconfig.app.json | 1 + 4 files changed, 95 insertions(+), 5 deletions(-) diff --git a/server/notes.db b/server/notes.db index 9fb91df1bfcf0c2fe714e14a2690badbfe389499..c1ac1c74f21c8904c6fb7c9f9066b280f8b98039 100644 GIT binary patch delta 167 zcmZo@U~Fh$oFL7}HBrWyk!xeZ5`GRQ{!j+~S^S}!1qD3$U7cCk7)0f5ZG&AL9UW7$ zveObX((;T9j7)V6EOiacLJZBVOpUAz%=8Q`4We*~Z=NNeD!|Li#lXP8#D9!||1tlu a&4LQM_!VWCZ5eTCVg*S~z928b$N~WECMECy delta 64 zcmZo@U~Fh$oFL7}IZ?)$k#l3h5`H#D{#gwCvo;GVOyJ)p4tB^X%%BNq?- diff --git a/src/components/CreateNoteForm.jsx b/src/components/CreateNoteForm.jsx index ffb1252..d620ce7 100644 --- a/src/components/CreateNoteForm.jsx +++ b/src/components/CreateNoteForm.jsx @@ -1,25 +1,106 @@ // TODO: Import useForm, zodResolver, axios, useNavigate, useState, and noteSchema +import { 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 { z } from "zod"; import { Save } from "lucide-react"; +const noteSchema = z.object({ + title: z.string().min(3, "Title must be at least 3 characters"), + content: z.string().min(5, "Content must be at least 5 characters"), +}); + 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), + }); 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); + reset(); + navigate("/notes"); + } catch (error) { + console.error("Error creating 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 */} - +return ( +
+

+ Create Note +

+ {/* ✅ TailwindCSS */} +
+ {/* Title field */} +
+ + + {errors.title && ( +

{errors.title.message}

+ )} +
+ + {/* Content field */} +
+ +