src/app/_components/admin/CreateSubRegion.tsx

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

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<Country | undefined>(undefined);
-  const [formState, formActions] = useFormState(addRegion, {
+  const { allRegions, allCountries } = props;
+  const [selectCountryId, setSelectCountryId] = useState<string | undefined>(
+    undefined,
+  );
+  const [selectCountryRegions, setSelectCountryRegions] = useState<Region[]>(
+    [],
+  );
+  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 (
     <div>
       {/* country selector */}
-      <Select name="country">
-        <SelectTrigger
-          className={`w-[180px] ${clsx({ "border-red-500": formState.errors?.countryId })}`}
-        >
+      <p>{selectCountryId}</p>
+      <Select
+        name="country"
+        onValueChange={(value) => setSelectCountryId(value)}
+      >
+        <SelectTrigger className={`w-[180px] `}>
           <SelectValue placeholder="Country" />
         </SelectTrigger>
         <SelectContent>
-          {countries.map((country) => (
+          {allCountries.map((country) => (
             <SelectItem key={country.id} value={country.id}>
               {country.name}
             </SelectItem>
@@ -55,14 +72,14 @@ export default function CreateSubRegionForm(props: {
       </Select>
       <form action={formActions}>
         {/* region selector */}
-        <Select name="subRegion">
+        <Select name="regionId">
           <SelectTrigger
-            className={`w-[180px] ${clsx({ "border-red-500": formState.errors?.countryId })}`}
+            className={`w-[180px] ${clsx({ "border-red-500": formState.errors?.regionId })}`}
           >
             <SelectValue placeholder="Region" />
           </SelectTrigger>
           <SelectContent>
-            {regions.map((region) => (
+            {selectCountryRegions.map((region) => (
               <SelectItem key={region.id} value={region.id}>
                 {region.name}
               </SelectItem>
@@ -75,6 +92,7 @@ export default function CreateSubRegionForm(props: {
           placeholder="Name"
           className={`${clsx({ "border-red-500": formState.errors?.name })}`}
         />
+        <SubmitButton text={"sub region"} />
       </form>
     </div>
   );

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 {

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`,
       }),
   });

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`,
       }),
   });