Metrik/quotes
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

🌟 feat: #3 Add form to add new Quotes
Some checks failed
/ build (push) Failing after 45s
Details

Browse source 
Closes: #3
This commit is contained in:
Marsn3 2025-03-27 02:45:56 +01:00
parent 745610ec14
commit ffa332af7b
3 changed files with 42 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -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"
},

13
pnpm-lock.yaml generated
View file

@ -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

46
src/QuoteAdd.tsx
View file

@ -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) {
console.log(formData)
const quote = {
"quote": formData.get("quote"),
"context": formData.get("context"),
"author": formData.get("author"),
"date": formData.get("date")
const { register, handleSubmit, watch, formState: { errors }, } = useForm<QuoteAddProps>()
const onSubmit: SubmitHandler<QuoteAddProps> = async (data) => {
console.log(data)
console.log(date)
let formDate = new Date(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"))
await pb.collection(formData.get("collection") as string).create(quote)
console.log(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}>
<textarea name="quote" className="grow border-4 border-black bg-slate-300 text-black p-1 my-1 cursor-text" placeholder="Quote" />
<textarea name="context" className="border-4 border-black bg-slate-300 text-slate-600 p-1 my-1 cursor-text" placeholder="Context" />
<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 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 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,11 +67,12 @@ 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>
</div>
</form>
)
}
}