- {formState.message === "success" ? (
+ {formState.message !== "" && !formState.errors?.name ? (
) : (
""
)}
- {formState.message === "error" ? (
-
+ {formState.errors?.name ? (
+
+
+ {formState.errors?.name}
+
) : (
""
)}
diff --git a/src/app/_components/admin/CreateRegionForm.tsx b/src/app/_components/admin/CreateRegionForm.tsx
index 2c3ba9b..88f33b4 100644
--- a/src/app/_components/admin/CreateRegionForm.tsx
+++ b/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
(null);
+ useEffect(() => {
+ if (formState.message === "success") {
+ formRef.current?.reset();
+ }
+ }, [formState.message]);
return (
-
);
}