imports etc

src/app/App.tsx

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

src/app/_components/AllCountries.tsx

@@ -1,5 +1,4 @@
-import { Delete, LucideDelete } from "lucide-react";
+import { Delete } from "lucide-react";
-import Image from "next/image";
 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">
+        <div key={country.id} className="flex gap-1">
-          <p key={country.id}>{country.name}</p>
+          <p>{country.name}</p>
           <form action={deleteCountry.bind(null, country.id)}>
             <button>
               <Delete />

src/app/_components/AllRegions.tsx

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

src/app/_components/admin/CreateRegion.tsx

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

src/app/_components/admin/CreateRegionForm.tsx

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

src/server/actions/createRegion.ts

@@ -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,
+  };
+};