diff --git a/src/app/_components/admin/CreateSubRegion.tsx b/src/app/_components/admin/CreateSubRegion.tsx
index cf608a2..75f27bb 100644
--- a/src/app/_components/admin/CreateSubRegion.tsx
+++ b/src/app/_components/admin/CreateSubRegion.tsx
@@ -12,7 +12,10 @@ export default async function CreateSubRegion() {
Fill the form to create a new Sub Region
-
+
);
}
diff --git a/src/app/_components/admin/CreateSubRegionForm.tsx b/src/app/_components/admin/CreateSubRegionForm.tsx
index 97e4546..beb4f16 100644
--- a/src/app/_components/admin/CreateSubRegionForm.tsx
+++ b/src/app/_components/admin/CreateSubRegionForm.tsx
@@ -1,6 +1,6 @@
"use client";
import clsx from "clsx";
-import { useState } from "react";
+import { ChangeEvent, useEffect, useState } from "react";
import { useFormState } from "react-dom";
import { Input } from "~/components/ui/input";
import {
@@ -10,7 +10,8 @@ import {
SelectTrigger,
SelectValue,
} from "~/components/ui/select";
-import { addRegion } from "~/server/actions/addRegion";
+import { addSubRegion } from "~/server/actions/addSubRegion";
+import SubmitButton from "../SubmitButton";
type Region = {
id: string;
@@ -23,12 +24,17 @@ type Country = {
};
export default function CreateSubRegionForm(props: {
- regions: Region[];
- countries: Country[];
+ allRegions: Region[];
+ allCountries: Country[];
}) {
- const { countries, regions } = props;
- const [country, setCountry] = useState(undefined);
- const [formState, formActions] = useFormState(addRegion, {
+ const { allRegions, allCountries } = props;
+ const [selectCountryId, setSelectCountryId] = useState(
+ undefined,
+ );
+ const [selectCountryRegions, setSelectCountryRegions] = useState(
+ [],
+ );
+ const [formState, formActions] = useFormState(addSubRegion, {
message: "",
errors: undefined,
fieldValues: {
@@ -36,17 +42,28 @@ export default function CreateSubRegionForm(props: {
regionId: "",
},
});
+
+ useEffect(() => {
+ if (selectCountryId) {
+ const regions = allRegions.filter(
+ (region) => region.countryId === selectCountryId,
+ );
+ setSelectCountryRegions(regions);
+ }
+ }, [selectCountryId]);
return (
{/* country selector */}
-
);
diff --git a/src/server/actions/addCountry.ts b/src/server/actions/addCountry.ts
index aa45cfc..bbd7728 100644
--- a/src/server/actions/addCountry.ts
+++ b/src/server/actions/addCountry.ts
@@ -20,7 +20,7 @@ export async function addCountry(prevstate: any, formData: FormData) {
name: z
.string()
.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
try {
diff --git a/src/server/actions/addRegion.ts b/src/server/actions/addRegion.ts
index 9262940..5b885fe 100644
--- a/src/server/actions/addRegion.ts
+++ b/src/server/actions/addRegion.ts
@@ -23,7 +23,7 @@ export const addRegion = async (prevstate: any, formData: FormData) => {
name: z
.string()
.min(1, "Name is required")
- .refine(() => !exists, {
+ .refine(() => !exists[0], {
message: `${name} already exists in selected country`,
}),
});
diff --git a/src/server/actions/addSubRegion.ts b/src/server/actions/addSubRegion.ts
index 6f5e784..0cb050a 100644
--- a/src/server/actions/addSubRegion.ts
+++ b/src/server/actions/addSubRegion.ts
@@ -8,7 +8,7 @@ import { ZodError, z } from "zod";
export const addSubRegion = async (prevstate: any, formData: FormData) => {
//assign formdaata to variables.
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
const exists = await db
@@ -22,7 +22,7 @@ export const addSubRegion = async (prevstate: any, formData: FormData) => {
name: z
.string()
.min(1, "Name is required")
- .refine(() => !exists, {
+ .refine(() => !exists[0], {
message: `${name} already exists in selected region`,
}),
});