added form validation to regions form.

src/app/_components/SubmitButton.tsx

@@ -1,11 +1,12 @@
 import { useFormStatus } from "react-dom";
 import { Button } from "~/components/ui/button";
 
-export default function SubmitButton() {
+export default function SubmitButton(props: { text: string }) {
+  const { text } = props;
   const { pending } = useFormStatus();
   return (
     <Button disabled={pending}>
-      {pending ? "Adding country.." : "Add country"}
+      {pending ? `Adding ${text}` : `Add ${text}`}
     </Button>
   );
 }

src/app/_components/admin/CreateCountryForm.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { Input } from "~/components/ui/input";
-import { addCountry } from "~/server/actions/createCountry";
+import { addCountry } from "~/server/actions/addCountry";
 import SubmitButton from "../SubmitButton";
 import { useRef } from "react";
 
@@ -17,7 +17,7 @@ export default function CreateCountryForm() {
   return (
     <form ref={ref} action={handleSubmit}>
       <Input name="name" required />
-      <SubmitButton />
+      <SubmitButton text={"Country"} />
     </form>
   );
 }

src/app/_components/admin/CreateRegionForm.tsx

@@ -2,7 +2,7 @@
 import { Input } from "~/components/ui/input";
 import SubmitButton from "../SubmitButton";
 import { useRef } from "react";
-import { addRegion } from "~/server/actions/createRegion";
+import { addRegion } from "~/server/actions/addRegion";
 import {
   Select,
   SelectContent,
@@ -10,21 +10,20 @@ import {
   SelectTrigger,
   SelectValue,
 } from "~/components/ui/select";
+import { useFormState } from "react-dom";
+import { init } from "next/dist/compiled/webpack/webpack";
 
-type Country = {
+interface Country {
   id: string;
   name: string;
-};
+}
 
 export default function CreateRegionForm(props: { countries: Country[] }) {
+  const [state, formAction] = useFormState(addRegion, null);
   const { countries } = props;
   const ref = useRef<HTMLFormElement>(null);
-  const handleSubmit = async (formData: FormData) => {
-    ref.current?.reset();
-    await addRegion(formData);
-  };
   return (
-    <form ref={ref} action={handleSubmit}>
+    <form ref={ref} action={formAction}>
       <Input name="name" required />
       <Select name="country">
         <SelectTrigger className="w-[180px]">
@@ -38,8 +37,8 @@ export default function CreateRegionForm(props: { countries: Country[] }) {
           ))}
         </SelectContent>
       </Select>
-
-      <SubmitButton />
+      <SubmitButton text={"Region"} />
+      <span>{state?.message}</span>
     </form>
   );
 }

src/app/_components/admin/CreateWineForm.tsx

@@ -1,34 +0,0 @@
-"use client";
-import { Input } from "~/components/ui/input";
-import { addCountry } from "~/server/actions/createCountry";
-import SubmitButton from "../SubmitButton";
-import { useRef } from "react";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "~/components/ui/select";
-
-export default function CreateCountryForm() {
-  const ref = useRef<HTMLFormElement>(null);
-  const handleSubmit = async (formData: FormData) => {
-    ref.current?.reset();
-    await addCountry(formData);
-  };
-  return (
-    <form ref={ref} action={handleSubmit}>
-      <Input name="name" required />
-      <Select>
-        <SelectTrigger className="w-[180px]">
-          <SelectValue placeholder="Wine type" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="light">Light</SelectItem>
-        </SelectContent>
-      </Select>
-      <SubmitButton />
-    </form>
-  );
-}

src/server/actions/addRegion.ts

@@ -0,0 +1,43 @@
+"use server";
+
+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"),
+});
+
+export const addRegion = async (prevstate: any, formData: FormData) => {
+  const newRegion = schema.safeParse({
+    name: (formData.get("name") as string).toLowerCase(),
+    countryId: formData.get("country") as string,
+  });
+  if (!newRegion.success) {
+    return {
+      message: "failed",
+      errors: newRegion.error,
+      data: null,
+    };
+  }
+  const confirmedRegion = await db
+    .insert(regions)
+    .values(newRegion.data)
+    .onConflictDoNothing({ target: regions.name })
+    .returning({ name: regions.name });
+  if (!confirmedRegion[0]?.name) {
+    return {
+      message: "region already exists",
+      errors: newRegion.error,
+      data: null,
+    };
+  } else {
+    const message = `${newRegion.data.name} added`;
+    const errors = newRegion.error;
+    const data = newRegion.data;
+    revalidatePath("/");
+    return { message, errors, data };
+  }
+};

src/server/actions/createRegion.ts

@@ -1,30 +0,0 @@
-"use server";
-
-import { revalidatePath } from "next/cache";
-import { db } from "../db";
-import { regions } from "../db/schema";
-import { z } from "zod";
-
-type NewRegion = {
-  name: string;
-  countryId: string;
-};
-
-const schema = z.object({
-  countryId: z.string(),
-  name: z.string().min(1, "Name is required"),
-});
-
-export const addRegion = async (formData: FormData) => {
-  const newRegion: NewRegion = {
-    name: (formData.get("name") as string).toLowerCase(),
-    countryId: formData.get("country") as string,
-  };
-  revalidatePath("/");
-  await db.insert(regions).values(newRegion).returning();
-  return {
-    message: message,
-    errors: error,
-    status: 200,
-  };
-};