updated error handling and added red border on error

src/app/_components/admin/CreateCountryForm.tsx

@@ -3,15 +3,32 @@ import { Input } from "~/components/ui/input";
 import { addCountry } from "~/server/actions/addCountry";
 import SubmitButton from "../SubmitButton";
 import { useFormState } from "react-dom";
+import { useEffect, useRef } from "react";
+import clsx from "clsx";
 
 export default function CreateCountryForm() {
-  const [state, formAction] = useFormState(addCountry, null);
-
+  const [formState, formAction] = useFormState(addCountry, {
+    message: "",
+    errors: undefined,
+    fieldValues: {
+      name: "",
+    },
+  });
+  const formRef = useRef<HTMLFormElement>(null);
+  useEffect(() => {
+    if (formState.message === "success") {
+      formRef.current?.reset();
+    }
+  }, [formState.message]);
   return (
     <form action={formAction}>
-      <Input name="name" />
+      <Input
+        name="name"
+        id="name"
+        className={clsx({ "border-red-500": formState.errors?.name })}
+      />
       <SubmitButton text={"Country"} />
-      {state?.message}
+      {formState.errors?.name}
     </form>
   );
 }

src/server/actions/addCountry.ts

@@ -3,7 +3,7 @@
 import { revalidatePath } from "next/cache";
 import { db } from "../db";
 import { countries } from "../db/schema";
-import * as z from "zod";
+import { ZodError, z } from "zod";
 
 const schema = z.object({
   name: z.string().min(1, { message: "Name is required" }),
@@ -11,33 +11,28 @@ const schema = z.object({
 
 export async function addCountry(prevstate: any, formData: FormData) {
   const name = formData.get("name") as string;
-  const newCountry = schema.safeParse({ name: name.toLowerCase() });
-
-  if (!newCountry.success) {
-    const errors = newCountry.error.issues.map((issue) =>
-      console.log(issue.message),
-    );
+  try {
+    schema.parse({
+      name,
+    });
     return {
-      message: errors,
-      data: newCountry.data,
+      message: "success",
+      errors: undefined,
+      fieldValues: {
+        name: "",
+      },
+    };
+  } catch (error) {
+    const zodError = error as ZodError;
+    const errorMap = zodError.flatten().fieldErrors;
+    return {
+      message: "error",
+      errors: {
+        name: errorMap["name"]?.[0] ?? "",
+      },
+      fieldValues: {
+        name,
+      },
     };
-  } else {
-    const confirmCreate = await db
-      .insert(countries)
-      .values(newCountry.data)
-      .onConflictDoNothing()
-      .returning({ name: countries.name });
-    if (!confirmCreate[0]) {
-      return {
-        message: `${newCountry.data.name} already exists`,
-        data: newCountry.data,
-      };
-    } else {
-      revalidatePath("/");
-      return {
-        message: `${confirmCreate[0].name} added`,
-        data: newCountry.data,
-      };
-    }
   }
 }