imports etc

This commit is contained in:
christian 2024-05-30 23:31:41 +02:00
parent 762ce3c90d
commit 4f5a9c429c
6 changed files with 116 additions and 4 deletions

View File

@ -2,6 +2,8 @@ import WineList from "./_components/WineList";
import FilterStatus from "./_components/FilterState";
import CreateCountry from "./_components/admin/CreateCountry";
import AllCountries from "./_components/AllCountries";
import CreateRegion from "./_components/admin/CreateRegion";
import AllRegions from "./_components/AllRegions";
export default function App() {
return (
@ -10,6 +12,8 @@ export default function App() {
<WineList />
<CreateCountry />
<AllCountries />
<CreateRegion />
<AllRegions />
</div>
);
}

View File

@ -1,5 +1,4 @@
import { Delete, LucideDelete } from "lucide-react";
import Image from "next/image";
import { Delete } from "lucide-react";
import { deleteCountry } from "~/server/actions/deleteCountry";
import { db } from "~/server/db";
@ -9,8 +8,8 @@ export default async function AllCountries() {
<div className="pt-4">
<h1 className="text-2xl">All Countries:</h1>
{countries.map((country) => (
<div className="flex gap-1">
<p key={country.id}>{country.name}</p>
<div key={country.id} className="flex gap-1">
<p>{country.name}</p>
<form action={deleteCountry.bind(null, country.id)}>
<button>
<Delete />

View File

@ -0,0 +1,21 @@
import { db } from "~/server/db";
export default async function AllRegions() {
const allRegions = await db.query.regions.findMany();
return (
<div className="pt-4">
<h1 className="text-2xl">All Regions:</h1>
{allRegions[0] ? (
<>
<ul>
{allRegions.map((region) => (
<li key={region.id}>{region.name}</li>
))}
</ul>
</>
) : (
<p>There are no regions in the db.</p>
)}
</div>
);
}

View File

@ -0,0 +1,13 @@
"use server";
import { db } from "~/server/db";
import CreateRegionForm from "./CreateRegionForm";
export default async function CreateRegion() {
const allCountries = await db.query.countries.findMany();
return (
<>
<h1 className="pt-4 text-2xl">Fill the form to create a new region</h1>
<CreateRegionForm countries={allCountries} />
</>
);
}

View File

@ -0,0 +1,45 @@
"use client";
import { Input } from "~/components/ui/input";
import SubmitButton from "../SubmitButton";
import { useRef } from "react";
import { addRegion } from "~/server/actions/createRegion";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "~/components/ui/select";
type Country = {
id: string;
name: string;
};
export default function CreateRegionForm(props: { countries: Country[] }) {
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}>
<Input name="name" required />
<Select name="country">
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Country" />
</SelectTrigger>
<SelectContent>
{countries.map((country) => (
<SelectItem key={country.id} value={country.id}>
{country.name}
</SelectItem>
))}
</SelectContent>
</Select>
<SubmitButton />
</form>
);
}

View File

@ -0,0 +1,30 @@
"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,
};
};