Merge branch 'main' of https://gitea.rannes.dev/rannes.dev/wine-shop
All checks were successful
Vercel Production Deployment / Deploy-Production (push) Successful in 1m21s

This commit is contained in:
ChrQR 2024-06-03 11:37:01 +02:00
commit 29b09848b0
2 changed files with 27 additions and 14 deletions

View File

@ -5,6 +5,7 @@ import SubmitButton from "../SubmitButton";
import { useFormState } from "react-dom"; import { useFormState } from "react-dom";
import { useEffect, useRef } from "react"; import { useEffect, useRef } from "react";
import clsx from "clsx"; import clsx from "clsx";
import { Check, CircleX } from "lucide-react";
export default function CreateCountryForm() { export default function CreateCountryForm() {
const [formState, formAction] = useFormState(addCountry, { const [formState, formAction] = useFormState(addCountry, {
@ -21,14 +22,21 @@ export default function CreateCountryForm() {
} }
}, [formState.message]); }, [formState.message]);
return ( return (
<form action={formAction}> <form action={formAction} className="flex flex-col gap-2">
<Input <Input
name="name" name="name"
id="name" id="name"
className={clsx({ "border-red-500": formState.errors?.name })} className={clsx({ "border-red-500": formState.errors?.name })}
/> />
{formState.message === "success" ? (
<Check className="text-green-400" />
) : (
<div className="flex items-center gap-2">
<CircleX className="text-red-600" />
<span>{formState.errors?.name}</span>{" "}
</div>
)}
<SubmitButton text={"Country"} /> <SubmitButton text={"Country"} />
{formState.errors?.name}
</form> </form>
); );
} }

View File

@ -6,27 +6,32 @@ import { countries } from "../db/schema";
import { ZodError, z } from "zod"; import { ZodError, z } from "zod";
import { eq } from "drizzle-orm"; import { eq } from "drizzle-orm";
const schema = z.object({
name: z.string().min(1, { message: "Name is required" }),
});
export async function addCountry(prevstate: any, formData: FormData) { export async function addCountry(prevstate: any, formData: FormData) {
const name = formData.get("name") as string; const name = (formData.get("name") as string).toLowerCase();
const exists = await db const exists = await db
.select({ name: countries.name }) .select({ name: countries.name })
.from(countries) .from(countries)
.where(eq(countries.name, name)); .where(eq(countries.name, name));
//Define the schema for the form data
const schema = z.object({
name: z
.string()
.min(1, { message: "Name is required" })
.refine(() => !exists[0], { message: `${name} already exists` }),
});
//Parse the form data using the schema for validation, and check if the name already exists
try { try {
schema.parse({ schema.parse({
name, name,
}); });
if (!exists[0]) { //If the name doesn't exist, add the country to the database abd revalidate the page
await db await db
.insert(countries) .insert(countries)
.values({ name }) .values({ name })
.returning({ name: countries.name }); .returning({ name: countries.name });
revalidatePath("/"); revalidatePath("/");
} //Return a success message
return { return {
message: "success", message: "success",
errors: undefined, errors: undefined,