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
All checks were successful
Vercel Production Deployment / Deploy-Production (push) Successful in 1m21s
This commit is contained in:
commit
29b09848b0
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -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,
|
||||||
|
Loading…
Reference in New Issue
Block a user