Compare commits

..

No commits in common. "a507fe84a4f47b82309d7fded96e4605b20620f2" and "533398cdb38ae330663942b57e146436d9f58dc2" have entirely different histories.

4 changed files with 56 additions and 131 deletions

View File

@ -23,22 +23,19 @@ export default function CreateCountryForm() {
}, [formState.message]); }, [formState.message]);
return ( return (
<form ref={formRef} action={formAction} className="flex flex-col gap-2"> <form ref={formRef} action={formAction} className="flex flex-col gap-2">
<div className="flex max-w-3xl items-center gap-2"> <div className="flex items-center gap-2">
<Input <Input
name="name" name="name"
id="name" id="name"
className={clsx({ "border-red-500": formState.errors?.name })} className={clsx({ "border-red-500": formState.errors?.name })}
/> />
{formState.message !== "" && !formState.errors?.name ? ( {formState.message === "success" ? (
<Check className="text-green-500" /> <Check className="text-green-500" />
) : ( ) : (
"" ""
)} )}
{formState.errors?.name ? ( {formState.message === "error" ? (
<div className="flex min-w-96 items-center gap-1 text-red-500"> <CircleX className="text-red-500" />
<CircleX />
<span className="text-sm">{formState.errors?.name}</span>
</div>
) : ( ) : (
"" ""
)} )}

View File

@ -1,7 +1,7 @@
"use client"; "use client";
import { Input } from "~/components/ui/input"; import { Input } from "~/components/ui/input";
import SubmitButton from "../SubmitButton"; import SubmitButton from "../SubmitButton";
import { useEffect, useRef } from "react"; import { useActionState } from "react";
import { addRegion } from "~/server/actions/addRegion"; import { addRegion } from "~/server/actions/addRegion";
import { import {
Select, Select,
@ -11,8 +11,6 @@ import {
SelectValue, SelectValue,
} from "~/components/ui/select"; } from "~/components/ui/select";
import { useFormState } from "react-dom"; import { useFormState } from "react-dom";
import clsx from "clsx";
import { Check, CircleX } from "lucide-react";
interface Country { interface Country {
id: string; id: string;
@ -20,72 +18,25 @@ interface Country {
} }
export default function CreateRegionForm(props: { countries: Country[] }) { export default function CreateRegionForm(props: { countries: Country[] }) {
const [formState, formAction] = useFormState(addRegion, { const [state, formAction] = useFormState(addRegion, null);
message: "",
errors: undefined,
fieldValues: {
name: "",
countryId: "",
},
});
const { countries } = props; const { countries } = props;
const formRef = useRef<HTMLFormElement>(null);
useEffect(() => {
if (formState.message === "success") {
formRef.current?.reset();
}
}, [formState.message]);
return ( return (
<form ref={formRef} action={formAction} className="flex flex-col gap-2"> <form action={formAction}>
<div className="flex max-w-3xl items-center gap-2"> <Input name="name" />
<Input <Select name="country">
name="name" <SelectTrigger className="w-[180px]">
id="name" <SelectValue placeholder="Country" />
placeholder="Name" </SelectTrigger>
className={`${clsx({ "border-red-500": formState.errors?.name })}`} <SelectContent>
/> {countries.map((country) => (
{formState.message === "success" && !formState.errors?.name ? ( <SelectItem key={country.id} value={country.id}>
<Check className="text-green-500" /> {country.name}
) : ( </SelectItem>
"" ))}
)} </SelectContent>
{formState.errors?.name ? ( </Select>
<div className="flex min-w-40 items-center gap-1 text-red-500">
<CircleX className="text-red-500" />
<span className="text-sm">{formState.errors?.name}</span>
</div>
) : (
""
)}
</div>
<div className="flex max-w-3xl items-center gap-2">
<Select name="country">
<SelectTrigger
className={`w-[180px] ${clsx({ "border-red-500": formState.errors?.countryId })}`}
>
<SelectValue placeholder="Country" />
</SelectTrigger>
<SelectContent>
{countries.map((country) => (
<SelectItem key={country.id} value={country.id}>
{country.name}
</SelectItem>
))}
</SelectContent>
</Select>
{formState.message !== "" && !formState.errors?.countryId ? (
<Check className="text-green-500" />
) : (
""
)}
{formState.errors?.countryId ? (
<CircleX className="text-red-500" />
) : (
""
)}
</div>
<SubmitButton text={"Region"} /> <SubmitButton text={"Region"} />
<span>{state?.message}</span>
</form> </form>
); );
} }

View File

@ -7,9 +7,7 @@ import { ZodError, z } from "zod";
import { eq } from "drizzle-orm"; import { eq } from "drizzle-orm";
export async function addCountry(prevstate: any, formData: FormData) { export async function addCountry(prevstate: any, formData: FormData) {
//assign formdaata to variables.
const name = (formData.get("name") as string).toLowerCase(); const name = (formData.get("name") as string).toLowerCase();
//check if country already exists
const exists = await db const exists = await db
.select({ name: countries.name }) .select({ name: countries.name })
.from(countries) .from(countries)
@ -28,7 +26,10 @@ export async function addCountry(prevstate: any, formData: FormData) {
name, name,
}); });
//If the name doesn't exist, add the country to the database abd revalidate the page //If the name doesn't exist, add the country to the database abd revalidate the page
await db.insert(countries).values({ name }); await db
.insert(countries)
.values({ name })
.returning({ name: countries.name });
revalidatePath("/"); revalidatePath("/");
//Return a success message //Return a success message
return { return {
@ -41,7 +42,6 @@ export async function addCountry(prevstate: any, formData: FormData) {
} catch (error) { } catch (error) {
const zodError = error as ZodError; const zodError = error as ZodError;
const errorMap = zodError.flatten().fieldErrors; const errorMap = zodError.flatten().fieldErrors;
//Return an error object with the field values and errors.
return { return {
message: "error", message: "error",
errors: { errors: {

View File

@ -3,63 +3,40 @@
import { revalidatePath } from "next/cache"; import { revalidatePath } from "next/cache";
import { db } from "../db"; import { db } from "../db";
import { regions } from "../db/schema"; import { regions } from "../db/schema";
import { ZodError, z } from "zod"; import { z } from "zod";
import { eq } from "drizzle-orm";
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) => { export const addRegion = async (prevstate: any, formData: FormData) => {
//assign formdaata to variables. const regionData = {
const name = (formData.get("name") as string).toLowerCase(); name: (formData.get("name") as string).toLowerCase(),
const countryId = formData.get("country") as string; countryId: formData.get("country") as string,
};
//check if region already exists in country const newRegion = schema.safeParse(regionData);
const exists = await db if (!newRegion.success) {
.select({ name: regions.name })
.from(regions)
.where(eq(regions.countryId, countryId) && eq(regions.name, name));
//Define the schema for the form data
const schema = z.object({
countryId: z.string().min(1, "No country selected"),
name: z
.string()
.min(1, "Name is required")
.refine(() => !exists[0], {
message: `${name} already exists in selected country`,
}),
});
//Parse the form data using the schema for validation, and check if the name already exists
try {
schema.parse({
countryId,
name,
});
//If the name doesn't exist, add the country to the database abd revalidate the page
await db.insert(regions).values({ countryId, name });
revalidatePath("/");
//Return a success message
return { return {
message: "success", message: newRegion.error.issues[0]?.message,
errors: undefined, data: newRegion.data,
fieldValues: {
name: "",
countryId: "",
},
};
} catch (error) {
const zodError = error as ZodError;
const errorMap = zodError.flatten().fieldErrors;
//Return an error object with the field values and errors.
return {
message: "error",
errors: {
name: errorMap["name"]?.[0] ?? "",
countryId: errorMap["countryId"]?.[0] ?? "",
},
fieldValues: {
name,
countryId,
},
}; };
} }
const confirmedRegion = await db
.insert(regions)
.values(newRegion.data)
.onConflictDoNothing()
.returning({ name: regions.name });
if (!confirmedRegion[0]) {
return {
message: `${newRegion.data.name} already exists`,
data: newRegion.data,
};
} else {
const message = `${newRegion.data.name} added`;
const errors = newRegion.error;
const data = newRegion.data;
revalidatePath("/");
return { message, errors, data };
}
}; };