fixing forms

src/app/_components/admin/CreateCountryForm.tsx

@@ -2,22 +2,16 @@
 import { Input } from "~/components/ui/input";
 import { addCountry } from "~/server/actions/addCountry";
 import SubmitButton from "../SubmitButton";
-import { useRef } from "react";
-
-const initialState = {
-  name: "" as string,
-};
+import { useFormState } from "react-dom";
 
 export default function CreateCountryForm() {
-  const ref = useRef<HTMLFormElement>(null);
-  const handleSubmit = async (formData: FormData) => {
-    ref.current?.reset();
-    await addCountry(formData);
-  };
+  const [state, formAction] = useFormState(addCountry, null);
+
   return (
-    <form ref={ref} action={handleSubmit}>
-      <Input name="name" required />
+    <form action={formAction}>
+      <Input name="name" />
       <SubmitButton text={"Country"} />
+      {state?.message}
     </form>
   );
 }

src/app/_components/admin/CreateRegionForm.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { Input } from "~/components/ui/input";
 import SubmitButton from "../SubmitButton";
-import { useRef } from "react";
+import { useActionState } from "react";
 import { addRegion } from "~/server/actions/addRegion";
 import {
   Select,
@@ -20,10 +20,9 @@ interface Country {
 export default function CreateRegionForm(props: { countries: Country[] }) {
   const [state, formAction] = useFormState(addRegion, null);
   const { countries } = props;
-  const ref = useRef<HTMLFormElement>(null);
   return (
-    <form ref={ref} action={formAction}>
-      <Input name="name" required />
+    <form action={formAction}>
+      <Input name="name" />
       <Select name="country">
         <SelectTrigger className="w-[180px]">
           <SelectValue placeholder="Country" />

src/server/actions/addCountry.ts

@@ -3,15 +3,41 @@
 import { revalidatePath } from "next/cache";
 import { db } from "../db";
 import { countries } from "../db/schema";
+import * as z from "zod";
 
-type NewCountry = {
-  name: string;
-};
+const schema = z.object({
+  name: z.string().min(1, { message: "Name is required" }),
+});
 
-export const addCountry = async (formData: FormData) => {
-  const newCountry: NewCountry = {
-    name: (formData.get("name") as string).toLowerCase(),
+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),
+    );
+    return {
+      message: errors,
+      data: newCountry.data,
     };
+  } 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("/");
-  await db.insert(countries).values(newCountry).returning();
-};
+      return {
+        message: `${confirmCreate[0].name} added`,
+        data: newCountry.data,
+      };
+    }
+  }
+}

src/server/actions/addRegion.ts

@@ -11,15 +11,15 @@ const schema = z.object({
 });
 
 export const addRegion = async (prevstate: any, formData: FormData) => {
-  const newRegion = schema.safeParse({
+  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: "failed",
-      errors: newRegion.error,
-      data: null,
+      message: newRegion.error.issues[0]?.message,
+      data: newRegion.data,
     };
   }
   const confirmedRegion = await db
@@ -27,11 +27,10 @@ export const addRegion = async (prevstate: any, formData: FormData) => {
     .values(newRegion.data)
     .onConflictDoNothing()
     .returning({ name: regions.name });
-  if (!confirmedRegion[0]?.name) {
+  if (!confirmedRegion[0]) {
     return {
-      message: "region already exists",
-      errors: newRegion.error,
-      data: null,
+      message: `${newRegion.data.name} already exists`,
+      data: newRegion.data,
     };
   } else {
     const message = `${newRegion.data.name} added`;