🌟 feat: #3 Add form to add new Quotes

Closes: #3

package.json

@@ -15,6 +15,7 @@
     "pocketbase": "^0.25.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-hook-form": "^7.54.2",
     "react-router": "^7.1.5",
     "tailwindcss": "^4.0.6"
   },

pnpm-lock.yaml

@@ -23,6 +23,9 @@ importers:
       react-dom:
         specifier: ^19.0.0
         version: 19.0.0(react@19.0.0)
+      react-hook-form:
+        specifier: ^7.54.2
+        version: 7.54.2(react@19.0.0)
       react-router:
         specifier: ^7.1.5
         version: 7.1.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@@ -1282,6 +1285,12 @@ packages:
     peerDependencies:
       react: ^19.0.0
 
+  react-hook-form@7.54.2:
+    resolution: {integrity: sha512-eHpAUgUjWbZocoQYUHposymRb4ZP6d0uwUnooL2uOybA9/3tPUvoAKqEWK1WaSiTxxOfTpffNZP7QwlnM3/gEg==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18 || ^19
+
   react-router@7.1.5:
     resolution: {integrity: sha512-8BUF+hZEU4/z/JD201yK6S+UYhsf58bzYIDq2NS1iGpwxSXDu7F+DeGSkIXMFBuHZB21FSiCzEcUb18cQNdRkA==}
     engines: {node: '>=20.0.0'}
@@ -2556,6 +2565,10 @@ snapshots:
       react: 19.0.0
       scheduler: 0.25.0
 
+  react-hook-form@7.54.2(react@19.0.0):
+    dependencies:
+      react: 19.0.0
+
   react-router@7.1.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@types/cookie': 0.6.0

src/QuoteAdd.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { Collections, IsoDateString, TypedPocketBase } from "./pocketbase-types";
 import PocketBase from 'pocketbase'
 import { useNavigate } from "react-router";
-
+import { useForm, SubmitHandler } from "react-hook-form"
 interface QuoteAddProps {
   quote: string;
   context?: string;
@@ -17,39 +17,48 @@ export default function QuoteAdd() {
   const [date, setDate] = useState("")
   useEffect(() => {
     const d = new Date();
+    d.setTime(d.getTime() + 60 * 60 * 1000)
     const formattedDate = d.toISOString().slice(0, 16)
     setDate(formattedDate)
   }, []);
 
-  async function submit(formData: FormData) {
+  const { register, handleSubmit, watch, formState: { errors }, } = useForm<QuoteAddProps>()
-    console.log(formData)
+
-    const quote = {
+  const onSubmit: SubmitHandler<QuoteAddProps> = async (data) => {
-      "quote": formData.get("quote"),
+    console.log(data)
-      "context": formData.get("context"),
+    console.log(date)
-      "author": formData.get("author"),
+    let formDate = new Date(date)
-      "date": formData.get("date")
+    formDate.setTime(formDate.getTime() + 60 * 60 * 1000)
+
+    console.log(date, formDate)
+    let quote = {
+      "quote": data.quote,
+      "context": data.context || "",
+      "author": data.author,
+      "date": formDate.toISOString().substring(0, 19) + "Z"
     }
-    console.log(formData.get("collection"))
+    console.log(quote)
-    await pb.collection(formData.get("collection") as string).create(quote)
+    await pb.collection(data.collection).create(quote)
     let navigate = useNavigate();
     navigate("/")
-
   }
 
+
   return (
-    <form className='border-2 bg-slate-800 ml-2 mb-5 p-2 border-lime-500 shadow-(--box) flex flex-col' action={submit}>
+    <form className='border-2 bg-slate-800 ml-2 mb-5 p-2 border-lime-500 shadow-(--box) flex flex-col' onSubmit={handleSubmit(onSubmit)}>
-      <textarea name="quote" className="grow border-4 border-black bg-slate-300 text-black p-1 my-1 cursor-text" placeholder="Quote" />
+      <textarea required className="grow border-4 border-black bg-slate-300 text-black p-1 my-1 cursor-text" placeholder="Quote" {...register("quote", { required: true })} />
-      <textarea name="context" className="border-4 border-black bg-slate-300 text-slate-600 p-1 my-1 cursor-text" placeholder="Context" />
+      <textarea className="border-4 border-black bg-slate-300 text-slate-600 p-1 my-1 cursor-text" placeholder="Context" {...register("context")} />
       <div className="flex flex-row">
         <p className="bg-lime-400 text-zinc-800 p-1 border-4 border-r-2 border-black w-20 cursor-text">Author:</p>
-        <input name="author" className="bg-slate-300 border-4 border-l-2 border-black text-black p-1 grow cursor-text" type="text" placeholder="Author" />
+        <input required className="bg-slate-300 border-4 border-l-2 border-black text-black p-1 grow cursor-text {}" type="text" placeholder="Author" {...register("author", { required: true })} aria-invalid={errors.author ? "true" : "false"} />
       </div>
       <div className="flex flex-row">
         <p className="bg-lime-400 text-zinc-800 p-1 border-4 border-r-2 border-black w-20 cursor-text">Source:</p>
         <select
-          name="collection"
           title='Select quote collection'
+          required
           className='bg-slate-300 border-4 border-l-2 border-black text-black p-1 grow cursor-pointer'
+          {...register("collection", { required: true })}
         >
           <option value="qt_bit">Arcus Notsus</option>
           <option value="qt_kfk">Kaffeeklatsch</option>
@@ -58,7 +67,8 @@ export default function QuoteAdd() {
       </div>
       <div className="flex flex-row">
         <p className="bg-lime-400 text-zinc-800 p-1 border-4 border-r-2 border-black w-20 cursor-text">Date:</p>
-        <input value={date} onChange={(e) => setDate(e.target.value)} name="date" className="bg-slate-300 border-4 border-l-2 border-black text-black p-1 grow cursor-text" placeholder="Date" type="datetime-local" />
+        <input value={date} onChange={(e) => setDate(e.target.value)} required name="date" className="bg-slate-300 border-4 border-l-2 border-black text-black p-1 grow cursor-text" placeholder="Date" type="datetime-local"
+        />
       </div>
       <div className="flex flex-row justify-center">
         <button type="submit" className="bg-slate-300 active:bg-lime-400 text-zinc-800 p-1 border-4 border-r-2 border-black w-40 cursor-pointer">Add Quote</button>