Merge pull request 'added more descriptive error handling of forms' (#11) from admin-forms into main

Reviewed-on: #11

src/app/_components/admin/CreateCountryForm.tsx

@@ -23,19 +23,22 @@ export default function CreateCountryForm() {
   }, [formState.message]);
   return (
     <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
           name="name"
           id="name"
           className={clsx({ "border-red-500": formState.errors?.name })}
         />
-        {formState.message === "success" ? (
+        {formState.message !== "" && !formState.errors?.name ? (
           <Check className="text-green-500" />
         ) : (
           ""
         )}
-        {formState.message === "error" ? (
-          <CircleX className="text-red-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>
         ) : (
           ""
         )}

src/app/_components/admin/CreateRegionForm.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { Input } from "~/components/ui/input";
 import SubmitButton from "../SubmitButton";
-import { useActionState } from "react";
+import { useEffect, useRef } from "react";
 import { addRegion } from "~/server/actions/addRegion";
 import {
   Select,
@@ -11,6 +11,8 @@ 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;
@@ -18,25 +20,72 @@ interface 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 formRef = useRef<HTMLFormElement>(null);
+  useEffect(() => {
+    if (formState.message === "success") {
+      formRef.current?.reset();
+    }
+  }, [formState.message]);
   return (
-    <form action={formAction}>
-      <Input name="name" />
-      <Select name="country">
-        <SelectTrigger className="w-[180px]">
-          <SelectValue placeholder="Country" />
-        </SelectTrigger>
-        <SelectContent>
-          {countries.map((country) => (
-            <SelectItem key={country.id} value={country.id}>
-              {country.name}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
+    <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">
+        <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"} />
-      <span>{state?.message}</span>
     </form>
   );
 }

src/server/actions/addCountry.ts

@@ -7,7 +7,9 @@ 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)
@@ -26,10 +28,7 @@ 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 })
-      .returning({ name: countries.name });
+    await db.insert(countries).values({ name });
     revalidatePath("/");
     //Return a success message
     return {
@@ -42,6 +41,7 @@ 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,40 +3,63 @@
 import { revalidatePath } from "next/cache";
 import { db } from "../db";
 import { regions } from "../db/schema";
-import { z } from "zod";
-
-const schema = z.object({
-  countryId: z.string().min(1, "No country selected"),
-  name: z.string().min(1, "Name is required"),
-});
+import { ZodError, z } from "zod";
+import { eq } from "drizzle-orm";
 
 export const addRegion = async (prevstate: any, formData: FormData) => {
-  const regionData = {
-    name: (formData.get("name") as string).toLowerCase(),
-    countryId: formData.get("country") as string,
-  };
-  const newRegion = schema.safeParse(regionData);
-  if (!newRegion.success) {
-    return {
-      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;
+  //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 { message, errors, data };
+    //Return a success message
+    return {
+      message: "success",
+      errors: undefined,
+      fieldValues: {
+        name: "",
+        countryId: "",
+      },
+    };
+  } 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: {
+        name: errorMap["name"]?.[0] ?? "",
+        countryId: errorMap["countryId"]?.[0] ?? "",
+      },
+      fieldValues: {
+        name,
+        countryId,
+      },
+    };
   }
 };