Progressing in circles \U0001f937

src/app/_components/App.tsx

@@ -0,0 +1,15 @@
+import { Suspense } from "react";
+import CreateWine from "./CreateWine";
+import WineCards from "./WineCards";
+
+export default function App() {
+  return (
+    <div className="container ">
+      <h1>Yes hello</h1>
+      <Suspense fallback={<p>Loading....</p>}>
+        <CreateWine />
+        <WineCards />
+      </Suspense>
+    </div>
+  );
+}

src/app/_components/CreateWine.tsx

@@ -1,54 +1,36 @@
-"use client";
-import { ChangeEvent, FormEvent, useEffect, useState } from "react";
-import { addWine } from "../../server/actions/addWine";
-import { getProducers } from "../../server/actions/allProducers";
-import { Producer } from "~/types/types";
+import { addWine } from "~/server/actions/addWine";
+import { getProducers } from "~/server/actions/allProducers";
+
+type Wine = {
+  name: string;
+  producer: string;
+};
+
+async function submitWine(formData: FormData): Promise<void> {
+  "use server";
+  const wine: Wine = {
+    name: formData.get("name") as string,
+    producer: formData.get("producer") as string,
+  };
+
+  addWine(wine);
+}
+const producers = await getProducers();
 
 export default function CreateWine() {
-  const [name, setName] = useState<string>("");
-  const [producer, setProducer] = useState<string>("");
-  const [allProducers, setAllProducers] = useState<Producer[]>([]);
-
-  useEffect(() => {
-    const fetchProducers = async () => {
-      try {
-        const producers = await getProducers();
-        setAllProducers(producers);
-      } catch (error) {
-        console.error("Failed to fetch producers:", error);
-      }
-    };
-    fetchProducers();
-  }, []);
-
-  const handleName = (event: ChangeEvent<HTMLInputElement>) => {
-    setName(event.target.value);
-  };
-  const handleProducer = (event: ChangeEvent<HTMLSelectElement>) => {
-    setProducer(event.target.value);
-  };
-  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"
-        id="producer"
-        value={producer}
-        onChange={handleProducer}
-      >
-        {allProducers.map((item, i) => (
-          <option key={i} value={item.id}>
-            {item.name}
-          </option>
-        ))}
-      </select>
-      <button onClick={handleAdd}>Submit wine</button>
+      <form action={submitWine}>
+        <input type="text" name="name" />
+        <select name="producer">
+          {producers.map((producer, i) => (
+            <option key={i} value={producer.id}>
+              {producer.name}
+            </option>
+          ))}
+        </select>
+        <button type="submit">Add wine</button>
+      </form>
     </div>
   );
 }

src/app/page.tsx

@@ -1,19 +1,14 @@
 import { Suspense } from "react";
 import CreateWine from "./_components/CreateWine";
 import WineCards from "./_components/WineCards";
+import App from "./_components/App";
 
 export const dynamic = "force-dynamic";
 
 export default async function HomePage() {
   return (
     <main>
-      <div className="container ">
-        <h1>Yes hello</h1>
-        <Suspense fallback={<p>Loading....</p>}>
-          <CreateWine />
-          <WineCards />
-        </Suspense>
-      </div>
+      <App />
     </main>
   );
 }

src/server/actions/addWine.ts

@@ -2,7 +2,13 @@
 import { db } from '../db/index'
 import { wines } from '../db/schema'
 
-export const addWine = async (producer: string, name: string) => {
+type wine = {
+  name: string;
+  producer: string;
+}
+
+export const addWine = async (wine: wine) => {
+  const { name, producer } = wine;
     await db.insert(wines).values({
       producer: producer,
       name: name,