src/app/App.tsx

@@ -1,15 +1,17 @@
+"use client";
+import useFilterStore from "./store";
 import WineList from "./_components/WineList";
-import FilterStatus from "./_components/FilterState";
+
-import CreateCountry from "./_components/admin/CreateCountry";
+
-import AllCountries from "./_components/AllCountries";
 
 export default function App() {
+  const filters = useFilterStore((state) => state.filters);
+
   return (
     <div className="container flex w-full flex-col justify-center">
-      <FilterStatus />
+      <h1 className="text-2xl">Filter state:</h1>
-      <WineList />
+      {JSON.stringify(filters)}
-      <CreateCountry />
+
-      <AllCountries />
     </div>
   );
 }

src/app/_components/AllCountries.tsx

@@ -1,13 +0,0 @@
-import { db } from "~/server/db";
-
-export default async function AllCountries() {
-  const countries = await db.query.countries.findMany();
-  return (
-    <div className="pt-4">
-      <h1 className="text-2xl">All Countries:</h1>
-      {countries.map((country) => (
-        <p key={country.id}>{country.name}</p>
-      ))}
-    </div>
-  );
-}

src/app/_components/CreateWine.tsx

@@ -0,0 +1,76 @@
+"use client";
+import { useActionState, useEffect, useState } from "react";
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "~/components/ui/select";
+import { addWine } from "~/server/actions/addWine";
+import { getProducers } from "~/server/actions/allProducers";
+
+async function fetchProducers() {
+  const producers = await getProducers();
+  return producers;
+}
+
+type ProducersData = {
+  id: string;
+  name: string;
+  createdAt: Date;
+  country: string;
+  region: string;
+  email: string;
+}[];
+
+export default function CreateWine() {
+  const [formState, formAction] = useActionState(addWine, {
+    message: "",
+    errors: undefined,
+    fieldValues: {
+      name: "",
+      producer: "",
+    },
+  });
+  const [producers, setProducers] = useState<ProducersData>([]);
+  useEffect(() => {
+    async function loadProducers() {
+      const producersData = await fetchProducers();
+      setProducers(producersData);
+    }
+    loadProducers();
+  }, []);
+  return (
+    <div className="flex w-full flex-col">
+      <form action={formAction} className="flex flex-col gap-2">
+        <Input
+          placeholder="Enter wine name"
+          className="border-2"
+          type="text"
+          name="name"
+        />
+        <Select name="producer">
+          <SelectTrigger className="w-[280px]">
+            <SelectValue placeholder="Select a producer" />
+          </SelectTrigger>
+          <SelectContent>
+            {producers.map((producer, i) => (
+              <SelectItem key={i} value={producer.id}>
+                {producer.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Button type="submit">Add wine</Button>
+      </form>
+      {formState.message === "success" ? (
+        <span className="text-green-400">Wine succesfully submitted</span>
+      ) : (
+        ""
+      )}
+    </div>
+  );
+}

src/app/_components/FilterState.tsx

@@ -1,12 +0,0 @@
-"use client";
-import useFilterStore, { FilterState } from "../store";
-
-export default function FilterStatus() {
-  const filters = useFilterStore((state) => state.filters);
-  return (
-    <>
-      <h1 className="text-2xl">Filter state:</h1>
-      {JSON.stringify(filters, null, 2)}
-    </>
-  );
-}

src/app/_components/FormCard.tsx

@@ -0,0 +1,26 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "~/components/ui/card";
+import CreateWine from "./CreateWine";
+
+export default function FormCard() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Add wine</CardTitle>
+        <CardDescription>All fields are required so get to it!</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <CreateWine />
+      </CardContent>
+      <CardFooter>
+        <p>Card Footer</p>
+      </CardFooter>
+    </Card>
+  );
+}

src/app/_components/Wine.tsx

@@ -0,0 +1,3 @@
+export default function Wine(wine) {
+  return <li key={wine.id}>{wine.name}</li>;
+}

src/app/_components/WineList.tsx

@@ -1,23 +1,17 @@
 "use server";
 import { db } from "~/server/db";
-import WineName from "./WineName";
+import Wine from "./Wine";
 
 export default async function WineList() {
   const wines = await db.query.wines.findMany();
   return (
-    <div className="pt-4">
-      <h1 className="text-2xl">All wines:</h1>
-      {wines && wines.length > 0 ? (
     <>
+      <h1>All wines:</h1>
       <ul>
         {wines.map((wine) => (
-              <WineName key={wine.id} name={wine.name} />
+          <Wine wine={wine} />
         ))}
       </ul>
     </>
-      ) : (
-        <p>There are no wines in the db.</p>
-      )}
-    </div>
   );
 }

src/app/_components/WineName.tsx

@@ -1,4 +0,0 @@
-export default function WineName(props: { name: string }) {
-  const { name } = props;
-  return <p>{name}</p>;
-}

src/app/_components/admin/CreateCountry.tsx

@@ -1,10 +0,0 @@
-import CreateCountryForm from "./CreateCountryForm";
-
-export default function CreateCountry() {
-  return (
-    <>
-      <h1 className="pt-4 text-2xl">Fill the form to create a new country</h1>
-      <CreateCountryForm />
-    </>
-  );
-}

src/app/_components/admin/CreateCountryForm.tsx

@@ -1,26 +0,0 @@
-import { revalidatePath } from "next/cache";
-import { Button } from "~/components/ui/button";
-import { Input } from "~/components/ui/input";
-import { db } from "~/server/db";
-import { countries } from "~/server/db/schema";
-
-type NewCountry = {
-  name: string;
-};
-
-export default async function CreateCountryForm() {
-  const addCountry = async (formData: FormData) => {
-    "use server";
-    const newCountry: NewCountry = {
-      name: formData.get("name") as string,
-    };
-    await db.insert(countries).values(newCountry).returning();
-    revalidatePath("/");
-  };
-  return (
-    <form action={addCountry}>
-      <Input name="name" required />
-      <Button>Add country</Button>
-    </form>
-  );
-}

src/app/store.ts

@@ -2,7 +2,7 @@ import { create } from "zustand";
 import { produce } from "immer";
 import { persist, createJSONStorage } from "zustand/middleware";
 
-export interface FilterState {
+interface FilterState {
   filters: Filters;
 }
 

src/server/db/schema.ts

@@ -6,7 +6,7 @@ import {
   pgTableCreator,
   text,
   timestamp,
-  uuid,
+  uuid
 } from "drizzle-orm/pg-core";
 import { relations } from "drizzle-orm";
 
@@ -17,9 +17,9 @@ export const producers = createTable(
   "producer",
   {
     id: uuid("id").primaryKey().defaultRandom(),
-    name: text("name").notNull().unique(),
+    name: text("name").notNull(),
     description: text("description"),
-    imageUrl: text("imageUrl"),
+    imageUrl: text('imageUrl'),
     countryId: uuid("countryId").notNull(),
     createdAt: timestamp("createdAt").defaultNow().notNull(),
     updatedAt: timestamp("updatedAt").defaultNow(),
@@ -37,20 +37,16 @@ export const producersRelations = relations(producers, ({ many }) => ({
 }));
 
 // Wines schema
-export const typeEnum = pgEnum("type", [
+export const typeEnum = pgEnum('type', ['sparkling', 'white', 'red', 'sweet', 'other']);
-  "sparkling",
-  "white",
-  "red",
-  "sweet",
-  "other",
-]);
 
-export const wines = createTable("wine", {
+export const wines = createTable(
+  "wine",
+  {
     id: uuid("id").primaryKey().defaultRandom(),
     name: text("name").notNull(),
     type: typeEnum("type").notNull(),
     description: text("description"),
-  imageUrl: text("imageUrl"),
+    imageUrl: text('imageUrl'),
     producerId: uuid("producerId").notNull(),
     subRegionId: uuid("subRegionId"),
     regionId: uuid("regionId").notNull(),
@@ -59,7 +55,8 @@ export const wines = createTable("wine", {
     inStock: boolean("inStock").notNull().default(false),
     createdAt: timestamp("createdAt").defaultNow().notNull(),
     updatedAt: timestamp("updatedAt").defaultNow(),
-});
+  },
+);
 
 // many-to-one relationship wine -> producer
 export const winesRelations = relations(wines, ({ one }) => ({
@@ -78,44 +75,53 @@ export const winesRelations = relations(wines, ({ one }) => ({
   country: one(countries, {
     fields: [wines.countryId],
     references: [countries.id],
-  }),
+  })
 }));
 
-export const subRegions = createTable("subRegion", {
+export const subRegions = createTable(
+  "subRegion",
+  {
     id: uuid("id").primaryKey().notNull().defaultRandom(),
     name: text("name").notNull().unique(),
     regionId: uuid("regionId").notNull(),
-});
+  },
+);
 
 export const subRegionsRelations = relations(subRegions, ({ many, one }) => ({
   wines: many(wines),
   region: one(regions, {
     fields: [subRegions.regionId],
-    references: [regions.id],
+    references: [regions.id]
-  }),
+  })
 }));
 
-export const regions = createTable("region", {
+export const regions = createTable(
+  "region",
+  {
     id: uuid("id").primaryKey().notNull().defaultRandom(),
     name: text("name").notNull().unique(),
     countryId: uuid("countryId").notNull(),
-});
+  },
+);
 
 export const regionsRelations = relations(regions, ({ many, one }) => ({
   wines: many(wines),
   subRegions: many(subRegions),
   country: one(countries, {
     fields: [regions.countryId],
-    references: [countries.id],
+    references: [countries.id]
-  }),
+  })
 }));
 
-export const countries = createTable("country", {
+export const countries = createTable(
+  "country",
+  {
     id: uuid("id").primaryKey().notNull().defaultRandom(),
-  name: text("name").notNull().unique(),
+    name: text("name").notNull(),
-});
+  },
+);
 
 export const countriesRelations = relations(countries, ({ many }) => ({
   wines: many(wines),
-  regions: many(regions),
+  regions: many(regions)
 }));