rannes.dev/wine-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated forms to handle errors more descriptive
All checks were successful
Vercel Preview Deployment / Deploy-Preview (push) Successful in 1m18s
Details

Browse Source
This commit is contained in:
ChrQR 2024-06-03 13:27:28 +02:00
parent 325a561b1c
commit 54454aad6d
2 changed files with 73 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/_components/admin/CreateCountryForm.tsx
View File

@ -23,19 +23,22 @@ export default function CreateCountryForm() {
}, [formState.message]); }, [formState.message]);
return ( return (
<form ref={formRef} action={formAction} className="flex flex-col gap-2"> <form ref={formRef} action={formAction} className="flex flex-col gap-2">
<div className="flex items-center gap-2"> <div className="flex max-w-3xl items-center 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" ? ( {formState.message !== "" && !formState.errors?.name ? (
<Check className="text-green-500" /> <Check className="text-green-500" />
) : ( ) : (
"" ""
)} )}
{formState.message === "error" ? ( {formState.errors?.name ? (
<CircleX className="text-red-500" /> <div className="flex min-w-96 items-center gap-1 text-red-500">
<CircleX />
<span className="text-sm">{formState.errors?.name}</span>
</div>
) : ( ) : (
"" ""
)} )}

83
src/app/_components/admin/CreateRegionForm.tsx
View File

@ -1,7 +1,7 @@
"use client"; "use client";
import { Input } from "~/components/ui/input"; import { Input } from "~/components/ui/input";
import SubmitButton from "../SubmitButton"; import SubmitButton from "../SubmitButton";
import { useActionState } from "react"; import { useEffect, useRef } from "react";
import { addRegion } from "~/server/actions/addRegion"; import { addRegion } from "~/server/actions/addRegion";
import { import {
Select, Select,
@ -11,6 +11,8 @@ import {
SelectValue, SelectValue,
} from "~/components/ui/select"; } from "~/components/ui/select";
import { useFormState } from "react-dom"; import { useFormState } from "react-dom";
import clsx from "clsx";
import { Check, CircleX } from "lucide-react";
interface Country { interface Country {
id: string; id: string;
@ -18,25 +20,72 @@ interface Country {
} }
export default function CreateRegionForm(props: { countries: Country[] }) { export default function CreateRegionForm(props: { countries: Country[] }) {
const [state, formAction] = useFormState(addRegion, null); const [formState, formAction] = useFormState(addRegion, {
message: "",
errors: undefined,
fieldValues: {
name: "",
countryId: "",
},
});
const { countries } = props; const { countries } = props;
const formRef = useRef<HTMLFormElement>(null);
useEffect(() => {
if (formState.message === "success") {
formRef.current?.reset();
}
}, [formState.message]);
return ( return (
<form action={formAction}> <form ref={formRef} action={formAction} className="flex flex-col gap-2">
<Input name="name" /> <div className="flex max-w-3xl items-center gap-2">
<Select name="country"> <Input
<SelectTrigger className="w-[180px]"> name="name"
<SelectValue placeholder="Country" /> id="name"
</SelectTrigger> placeholder="Name"
<SelectContent> className={`${clsx({ "border-red-500": formState.errors?.name })}`}
{countries.map((country) => ( />
<SelectItem key={country.id} value={country.id}> {formState.message === "success" && !formState.errors?.name ? (
{country.name} <Check className="text-green-500" />
</SelectItem> ) : (
))} ""
</SelectContent> )}
</Select> {formState.errors?.name ? (
<div className="flex min-w-40 items-center gap-1 text-red-500">
<CircleX className="text-red-500" />
<span className="text-sm">{formState.errors?.name}</span>
</div>
) : (
""
)}
</div>
<div className="flex max-w-3xl items-center gap-2">
<Select name="country">
<SelectTrigger
className={`w-[180px] ${clsx({ "border-red-500": formState.errors?.countryId })}`}
>
<SelectValue placeholder="Country" />
</SelectTrigger>
<SelectContent>
{countries.map((country) => (
<SelectItem key={country.id} value={country.id}>
{country.name}
</SelectItem>
))}
</SelectContent>
</Select>
{formState.message !== "" && !formState.errors?.countryId ? (
<Check className="text-green-500" />
) : (
""
)}
{formState.errors?.countryId ? (
<CircleX className="text-red-500" />
) : (
""
)}
</div>
<SubmitButton text={"Region"} /> <SubmitButton text={"Region"} />
<span>{state?.message}</span>
</form> </form>
); );
} }