diff --git a/src/app/_components/SubmitButton.tsx b/src/app/_components/SubmitButton.tsx index a4c6322..191bc3e 100644 --- a/src/app/_components/SubmitButton.tsx +++ b/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 ( ); } diff --git a/src/app/_components/admin/CreateCountryForm.tsx b/src/app/_components/admin/CreateCountryForm.tsx index f87a4d7..bd79a74 100644 --- a/src/app/_components/admin/CreateCountryForm.tsx +++ b/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 (
- + ); } diff --git a/src/app/_components/admin/CreateRegionForm.tsx b/src/app/_components/admin/CreateRegionForm.tsx index 16b65b0..b7f6a89 100644 --- a/src/app/_components/admin/CreateRegionForm.tsx +++ b/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(null); - const handleSubmit = async (formData: FormData) => { - ref.current?.reset(); - await addRegion(formData); - }; return ( -
+ - - + + {state?.message} ); } diff --git a/src/app/_components/admin/CreateWineForm.tsx b/src/app/_components/admin/CreateWineForm.tsx deleted file mode 100644 index e5108e6..0000000 --- a/src/app/_components/admin/CreateWineForm.tsx +++ /dev/null @@ -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(null); - const handleSubmit = async (formData: FormData) => { - ref.current?.reset(); - await addCountry(formData); - }; - return ( -
- - - - - ); -} diff --git a/src/server/actions/createCountry.ts b/src/server/actions/addCountry.ts similarity index 100% rename from src/server/actions/createCountry.ts rename to src/server/actions/addCountry.ts diff --git a/src/server/actions/addRegion.ts b/src/server/actions/addRegion.ts new file mode 100644 index 0000000..005d168 --- /dev/null +++ b/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 }; + } +}; diff --git a/src/server/actions/createRegion.ts b/src/server/actions/createRegion.ts deleted file mode 100644 index 0b17bf5..0000000 --- a/src/server/actions/createRegion.ts +++ /dev/null @@ -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, - }; -};