diff --git a/src/components/CreateNoteForm.jsx b/src/components/CreateNoteForm.jsx index ffb1252..32e41d0 100644 --- a/src/components/CreateNoteForm.jsx +++ b/src/components/CreateNoteForm.jsx @@ -1,26 +1,71 @@ -// TODO: Import useForm, zodResolver, axios, useNavigate, useState, and noteSchema - - +import { useForm } from "react-hook-form"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { useState } from "react"; +import { useNavigate } from "react-router-dom"; +import axios from "axios"; import { Save } from "lucide-react"; +import { noteSchema } from "../schema/notes"; const CreateNoteForm = () => { - // TODO: Setup isSubmitting state with useState - // TODO: create navigate variable and set to useNavigate() + 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 + setIsSubmitting(true); + try { + await axios.post("http://localhost:3001/api/notes", data); + navigate("/notes"); + } catch (error) { + console.error("Error creating note:", error); + } finally { + setIsSubmitting(false); + } }; return ( - <> -