country selector working now.
All checks were successful
Vercel Preview Deployment / Deploy-Preview (push) Successful in 1m17s

This commit is contained in:
christian 2024-06-04 14:37:47 +02:00
parent 7304ce1023
commit a609300688
5 changed files with 41 additions and 20 deletions

View File

@ -12,7 +12,10 @@ export default async function CreateSubRegion() {
<h1 className="pt-4 text-2xl"> <h1 className="pt-4 text-2xl">
Fill the form to create a new Sub Region Fill the form to create a new Sub Region
</h1> </h1>
<CreateSubRegionForm regions={allRegions} countries={allCountries} /> <CreateSubRegionForm
allRegions={allRegions}
allCountries={allCountries}
/>
</div> </div>
); );
} }

View File

@ -1,6 +1,6 @@
"use client"; "use client";
import clsx from "clsx"; import clsx from "clsx";
import { useState } from "react"; import { ChangeEvent, useEffect, useState } from "react";
import { useFormState } from "react-dom"; import { useFormState } from "react-dom";
import { Input } from "~/components/ui/input"; import { Input } from "~/components/ui/input";
import { import {
@ -10,7 +10,8 @@ import {
SelectTrigger, SelectTrigger,
SelectValue, SelectValue,
} from "~/components/ui/select"; } from "~/components/ui/select";
import { addRegion } from "~/server/actions/addRegion"; import { addSubRegion } from "~/server/actions/addSubRegion";
import SubmitButton from "../SubmitButton";
type Region = { type Region = {
id: string; id: string;
@ -23,12 +24,17 @@ type Country = {
}; };
export default function CreateSubRegionForm(props: { export default function CreateSubRegionForm(props: {
regions: Region[]; allRegions: Region[];
countries: Country[]; allCountries: Country[];
}) { }) {
const { countries, regions } = props; const { allRegions, allCountries } = props;
const [country, setCountry] = useState<Country | undefined>(undefined); const [selectCountryId, setSelectCountryId] = useState<string | undefined>(
const [formState, formActions] = useFormState(addRegion, { undefined,
);
const [selectCountryRegions, setSelectCountryRegions] = useState<Region[]>(
[],
);
const [formState, formActions] = useFormState(addSubRegion, {
message: "", message: "",
errors: undefined, errors: undefined,
fieldValues: { fieldValues: {
@ -36,17 +42,28 @@ export default function CreateSubRegionForm(props: {
regionId: "", regionId: "",
}, },
}); });
useEffect(() => {
if (selectCountryId) {
const regions = allRegions.filter(
(region) => region.countryId === selectCountryId,
);
setSelectCountryRegions(regions);
}
}, [selectCountryId]);
return ( return (
<div> <div>
{/* country selector */} {/* country selector */}
<Select name="country"> <p>{selectCountryId}</p>
<SelectTrigger <Select
className={`w-[180px] ${clsx({ "border-red-500": formState.errors?.countryId })}`} name="country"
onValueChange={(value) => setSelectCountryId(value)}
> >
<SelectTrigger className={`w-[180px] `}>
<SelectValue placeholder="Country" /> <SelectValue placeholder="Country" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{countries.map((country) => ( {allCountries.map((country) => (
<SelectItem key={country.id} value={country.id}> <SelectItem key={country.id} value={country.id}>
{country.name} {country.name}
</SelectItem> </SelectItem>
@ -55,14 +72,14 @@ export default function CreateSubRegionForm(props: {
</Select> </Select>
<form action={formActions}> <form action={formActions}>
{/* region selector */} {/* region selector */}
<Select name="subRegion"> <Select name="regionId">
<SelectTrigger <SelectTrigger
className={`w-[180px] ${clsx({ "border-red-500": formState.errors?.countryId })}`} className={`w-[180px] ${clsx({ "border-red-500": formState.errors?.regionId })}`}
> >
<SelectValue placeholder="Region" /> <SelectValue placeholder="Region" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{regions.map((region) => ( {selectCountryRegions.map((region) => (
<SelectItem key={region.id} value={region.id}> <SelectItem key={region.id} value={region.id}>
{region.name} {region.name}
</SelectItem> </SelectItem>
@ -75,6 +92,7 @@ export default function CreateSubRegionForm(props: {
placeholder="Name" placeholder="Name"
className={`${clsx({ "border-red-500": formState.errors?.name })}`} className={`${clsx({ "border-red-500": formState.errors?.name })}`}
/> />
<SubmitButton text={"sub region"} />
</form> </form>
</div> </div>
); );

View File

@ -20,7 +20,7 @@ export async function addCountry(prevstate: any, formData: FormData) {
name: z name: z
.string() .string()
.min(1, { message: "Name is required" }) .min(1, { message: "Name is required" })
.refine(() => !exists, { message: `${name} already exists` }), .refine(() => !exists[0], { message: `${name} already exists` }),
}); });
//Parse the form data using the schema for validation, and check if the name already exists //Parse the form data using the schema for validation, and check if the name already exists
try { try {

View File

@ -23,7 +23,7 @@ export const addRegion = async (prevstate: any, formData: FormData) => {
name: z name: z
.string() .string()
.min(1, "Name is required") .min(1, "Name is required")
.refine(() => !exists, { .refine(() => !exists[0], {
message: `${name} already exists in selected country`, message: `${name} already exists in selected country`,
}), }),
}); });

View File

@ -8,7 +8,7 @@ import { ZodError, z } from "zod";
export const addSubRegion = async (prevstate: any, formData: FormData) => { export const addSubRegion = async (prevstate: any, formData: FormData) => {
//assign formdaata to variables. //assign formdaata to variables.
const name = (formData.get("name") as string).toLowerCase(); const name = (formData.get("name") as string).toLowerCase();
const regionId = formData.get("region") as string; const regionId = formData.get("regionId") as string;
//check if region already exists in country //check if region already exists in country
const exists = await db const exists = await db
@ -22,7 +22,7 @@ export const addSubRegion = async (prevstate: any, formData: FormData) => {
name: z name: z
.string() .string()
.min(1, "Name is required") .min(1, "Name is required")
.refine(() => !exists, { .refine(() => !exists[0], {
message: `${name} already exists in selected region`, message: `${name} already exists in selected region`,
}), }),
}); });