fixing forms
All checks were successful
Vercel Production Deployment / Deploy-Production (push) Successful in 1m7s

This commit is contained in:
christian 2024-06-02 11:41:55 +02:00
parent c90eedcabd
commit 067c31d745
4 changed files with 53 additions and 35 deletions

View File

@ -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>
);
}

View File

@ -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" />

View File

@ -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(),
};
revalidatePath("/");
await db.insert(countries).values(newCountry).returning();
};
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("/");
return {
message: `${confirmCreate[0].name} added`,
data: newCountry.data,
};
}
}
}

View File

@ -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`;