src/app/_components/App.tsx

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

src/app/_components/CreateWine.tsx

@@ -35,9 +35,9 @@ export default function CreateWine() {
     loadProducers();
   }, []);
   return (
-    <div>
+    <div className="container flex flex-col gap-4">
       <form action={formAction}>
-        <input type="text" name="name" />
+        <input className="border-2" type="text" name="name" />
         <select name="producer">
           {producers.map((producer, i) => (
             <option key={i} value={producer.id}>
@@ -47,6 +47,7 @@ export default function CreateWine() {
         </select>
         <button type="submit">Add wine</button>
       </form>
+      {JSON.stringify(formState)}
     </div>
   );
 }

src/app/_components/FormCard.tsx

@@ -0,0 +1,10 @@
+import CreateWine from "./CreateWine";
+
+export default function FormCard() {
+  return (
+    <div className="mx-auto p-4 shadow-md">
+      <h1>Add a new wine</h1>
+      <CreateWine />
+    </div>
+  );
+}

src/app/_components/WineCards.tsx

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

src/server/actions/addWine.ts

@@ -2,6 +2,7 @@
 import { ZodError, z } from 'zod';
 import { db } from '../db/index'
 import { wines } from '../db/schema'
+import { QueryResult } from 'pg';
 
 type NewWine = typeof wines.$inferInsert;
 
@@ -19,7 +20,7 @@ export type Fields = {
 }
 
 export type FormState = {
-  message: string;
+  message: string | QueryResult<never>;
   errors: Record<keyof Fields, string> | undefined;
   fieldValues: NewWine;
 }
@@ -39,9 +40,9 @@ export const addWine = async (
   try {
     schema.parse(newWine)
 
-    const response = await db.insert(wines).values(newWine);
+    await db.insert(wines).values(newWine);
     return {
-      message: `success fully added ${response}`,
+      message: 'success',
       errors: undefined,
       fieldValues: {
         name: "",