Fixed producer id not being added to wine record

src/app/CreateWine.tsx

@@ -13,8 +13,8 @@ interface Producer {
 }
 
 export default function CreateWine() {
-  const [name, setName] = useState("");
-  const [producer, setProducer] = useState("");
+  const [name, setName] = useState<string>("");
+  const [producer, setProducer] = useState<string>("");
   const [allProducers, setAllProducers] = useState<Producer[]>([]);
 
   useEffect(() => {
@@ -37,15 +37,21 @@ export default function CreateWine() {
   };
   const handleAdd = async (event: FormEvent) => {
     event.preventDefault();
+    console.log(producer);
     addWine(producer, name);
     setName("");
   };
   return (
     <div>
       <input type="text" onChange={handleName} value={name} />
-      <select name="producer" onSelect={handleProducer}>
-        {allProducers.map((item) => (
-          <option key={item.id} value={item.id}>
+      <select
+        name="producer"
+        id="producer"
+        value={producer}
+        onChange={handleProducer}
+      >
+        {allProducers.map((item, i) => (
+          <option key={i} value={item.id}>
             {item.name}
           </option>
         ))}

src/app/WineCards.tsx

@@ -0,0 +1,17 @@
+import { getWines } from "~/server/actions/allWines";
+
+export const dynamic = "force-dynamic";
+
+const allWines = await getWines();
+
+export default function WineCards() {
+  return (
+    <>
+      {allWines.map((wine) => (
+        <div key={wine.id}>
+          {wine.name} - {wine.producer}
+        </div>
+      ))}
+    </>
+  );
+}

src/app/page.tsx

@@ -1,22 +1,5 @@
-import { getProducers } from "~/server/actions/allProducers";
-import { getWines } from "../server/actions/allWines";
 import CreateWine from "./CreateWine";
-export const dynamic = "force-dynamic";
-
-const allWines = await getWines();
-const allProducers = await getProducers();
-
-function WineCards() {
-  return (
-    <>
-      {allWines.map((wine) => (
-        <div key={wine.id}>
-          {wine.name} - {wine.producer}
-        </div>
-      ))}
-    </>
-  );
-}
+import WineCards from "./WineCards";
 
 export default async function HomePage() {
   return (

src/server/db/schema.ts

@@ -7,12 +7,6 @@ import {
 } from "drizzle-orm/pg-core";
 import { relations } from 'drizzle-orm';
 
-/**
- * This is an example of how to use the multi-project schema feature of Drizzle ORM. Use the same
- * database instance for multiple projects.
- *
- * @see https://orm.drizzle.team/docs/goodies#multi-project-schema
- */
 export const createTable = pgTableCreator((name) => `wine-shop_${name}`);
 
 export const producers = createTable(