src/app/_components/admin/CreateCountryForm.tsx

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

src/app/_components/admin/CreateRegionForm.tsx

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

src/server/actions/addCountry.ts

@@ -7,9 +7,7 @@ import { ZodError, z } from "zod";
 import { eq } from "drizzle-orm";
 
 export async function addCountry(prevstate: any, formData: FormData) {
-  //assign formdaata to variables.
   const name = (formData.get("name") as string).toLowerCase();
-  //check if country already exists
   const exists = await db
     .select({ name: countries.name })
     .from(countries)
@@ -28,7 +26,10 @@ export async function addCountry(prevstate: any, formData: FormData) {
       name,
     });
     //If the name doesn't exist, add the country to the database abd revalidate the page
-    await db.insert(countries).values({ name });
+    await db
+      .insert(countries)
+      .values({ name })
+      .returning({ name: countries.name });
     revalidatePath("/");
     //Return a success message
     return {
@@ -41,7 +42,6 @@ export async function addCountry(prevstate: any, formData: FormData) {
   } catch (error) {
     const zodError = error as ZodError;
     const errorMap = zodError.flatten().fieldErrors;
-    //Return an error object with the field values and errors.
     return {
       message: "error",
       errors: {

src/server/actions/addRegion.ts

@@ -3,63 +3,40 @@
 import { revalidatePath } from "next/cache";
 import { db } from "../db";
 import { regions } from "../db/schema";
-import { ZodError, z } from "zod";
-import { eq } from "drizzle-orm";
+import { z } from "zod";
+
+const schema = z.object({
+  countryId: z.string().min(1, "No country selected"),
+  name: z.string().min(1, "Name is required"),
+});
 
 export const addRegion = async (prevstate: any, formData: FormData) => {
-  //assign formdaata to variables.
-  const name = (formData.get("name") as string).toLowerCase();
-  const countryId = formData.get("country") as string;
-
-  //check if region already exists in country
-  const exists = await db
-    .select({ name: regions.name })
-    .from(regions)
-    .where(eq(regions.countryId, countryId) && eq(regions.name, name));
-
-  //Define the schema for the form data
-  const schema = z.object({
-    countryId: z.string().min(1, "No country selected"),
-    name: z
-      .string()
-      .min(1, "Name is required")
-      .refine(() => !exists[0], {
-        message: `${name} already exists in selected country`,
-      }),
-  });
-
-  //Parse the form data using the schema for validation, and check if the name already exists
-  try {
-    schema.parse({
-      countryId,
-      name,
-    });
-    //If the name doesn't exist, add the country to the database abd revalidate the page
-    await db.insert(regions).values({ countryId, name });
-    revalidatePath("/");
-    //Return a success message
-    return {
-      message: "success",
-      errors: undefined,
-      fieldValues: {
-        name: "",
-        countryId: "",
-      },
+  const regionData = {
+    name: (formData.get("name") as string).toLowerCase(),
+    countryId: formData.get("country") as string,
   };
-  } catch (error) {
-    const zodError = error as ZodError;
-    const errorMap = zodError.flatten().fieldErrors;
-    //Return an error object with the field values and errors.
+  const newRegion = schema.safeParse(regionData);
+  if (!newRegion.success) {
     return {
-      message: "error",
-      errors: {
-        name: errorMap["name"]?.[0] ?? "",
-        countryId: errorMap["countryId"]?.[0] ?? "",
-      },
-      fieldValues: {
-        name,
-        countryId,
-      },
+      message: newRegion.error.issues[0]?.message,
+      data: newRegion.data,
     };
   }
+  const confirmedRegion = await db
+    .insert(regions)
+    .values(newRegion.data)
+    .onConflictDoNothing()
+    .returning({ name: regions.name });
+  if (!confirmedRegion[0]) {
+    return {
+      message: `${newRegion.data.name} already exists`,
+      data: newRegion.data,
+    };
+  } else {
+    const message = `${newRegion.data.name} added`;
+    const errors = newRegion.error;
+    const data = newRegion.data;
+    revalidatePath("/");
+    return { message, errors, data };
+  }
 };