From 17c0c0e853ea7790f2aa4e7869c28773e8e18bfb Mon Sep 17 00:00:00 2001
From: christian <christian@rannes.com>
Date: Fri, 24 May 2024 12:01:58 +0200
Subject: [PATCH] CreateWine is sort of working. It's not pushing producer id
 though

---
 drizzle.config.ts                  |  1 -
 src/app/CreateWine.tsx             | 63 +++++++++++++++++++++++-------
 src/app/page.tsx                   | 10 +++--
 src/server/actions/addWine.ts      | 11 ++++++
 src/server/actions/allProducers.ts |  7 ++++
 src/server/actions/allWines.ts     |  7 ++++
 src/server/db/schema.ts            |  2 -
 7 files changed, 80 insertions(+), 21 deletions(-)
 create mode 100644 src/server/actions/addWine.ts
 create mode 100644 src/server/actions/allProducers.ts
 create mode 100644 src/server/actions/allWines.ts

diff --git a/drizzle.config.ts b/drizzle.config.ts
index ec6d8ac..bf2ea94 100644
--- a/drizzle.config.ts
+++ b/drizzle.config.ts
@@ -1,7 +1,6 @@
 import { type Config } from "drizzle-kit";
 import "./src/server/db/envConfig"
 
-
 export default {
   schema: "./src/server/db/schema.ts",
   dialect: "postgresql",
diff --git a/src/app/CreateWine.tsx b/src/app/CreateWine.tsx
index 5b1ad5f..782ca19 100644
--- a/src/app/CreateWine.tsx
+++ b/src/app/CreateWine.tsx
@@ -1,24 +1,59 @@
-"use client";
 
-import { FormEvent } from "react";
-import { allProducers, insertWine } from "~/server/db";
+'use client'
+import { ChangeEvent, FormEvent, useEffect, useState } from "react";
+import { addWine } from "../server/actions/addWine";
+import { getProducers } from "../server/actions/allProducers";
 
-export default function CreateWine() {
-  function handleSubmit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
+interface Producer {
+  id: string;
+  name: string;
+  createdAt: Date;
+  country: string;
+  region: string;
+  email: string;
+}
 
-    const formData = new FormData(event.currentTarget);
-    const response = insertWine(formData);
+
+
+export default function CreateWine(){
+  const [name, setName] = useState('');
+  const [producer, setProducer] = useState('');
+  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();
+    addWine(producer, name);
+    setName('');
+  };
   return (
-    <form onSubmit={handleSubmit}>
-      <select name="producer" id="producer">
-        {allProducers.map((producer) => (
-          <option key={producer.id} value={producer.id}>
-            {producer.name}
+    <div>
+      <input type="text" onChange={handleName} value={name} />
+      <select name="producer" onSelect={handleProducer}>
+        {allProducers.map((item) => (
+          <option key={item.id} value={item.id}>
+            {item.name}
           </option>
         ))}
       </select>
-    </form>
+      <button onClick={handleAdd} >Submit wine</button>
+    </div>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a8d7ed2..157fd6f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,9 +1,11 @@
-import { FormEvent } from "react";
-import { allWines, insertWine, allProducers } from "~/server/db";
+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 (
     <>
@@ -21,7 +23,7 @@ export default async function HomePage() {
     <main className="">
       <div className="container ">
         <h1>Yes hello</h1>
-        {/* <CreateWine  /> */}
+        <CreateWine />
         <WineCards />
       </div>
     </main>
diff --git a/src/server/actions/addWine.ts b/src/server/actions/addWine.ts
new file mode 100644
index 0000000..0fa1113
--- /dev/null
+++ b/src/server/actions/addWine.ts
@@ -0,0 +1,11 @@
+'use server'
+import { db } from '../db/index'
+import { wines } from '../db/schema'
+
+export const addWine = async (producer: string, name: string) => {
+    await db.insert(wines).values({
+      producer: producer,
+      name: name,
+    })
+    .returning();
+  };
\ No newline at end of file
diff --git a/src/server/actions/allProducers.ts b/src/server/actions/allProducers.ts
new file mode 100644
index 0000000..4838261
--- /dev/null
+++ b/src/server/actions/allProducers.ts
@@ -0,0 +1,7 @@
+'use server'
+import { db } from "../db/index";
+
+
+export async function getProducers(){
+    return db.query.producers.findMany();
+}
\ No newline at end of file
diff --git a/src/server/actions/allWines.ts b/src/server/actions/allWines.ts
new file mode 100644
index 0000000..45bb29c
--- /dev/null
+++ b/src/server/actions/allWines.ts
@@ -0,0 +1,7 @@
+'use server'
+import { db } from "../db/index";
+
+
+export async function getWines(){
+    return db.query.wines.findMany();
+}
\ No newline at end of file
diff --git a/src/server/db/schema.ts b/src/server/db/schema.ts
index 15ed081..7fac292 100644
--- a/src/server/db/schema.ts
+++ b/src/server/db/schema.ts
@@ -1,5 +1,3 @@
-import { drizzle } from 'drizzle-orm/vercel-postgres';
-import { sql } from "@vercel/postgres";
 import {
   pgTableCreator,
   text,