CreateWine is sort of working. It's not pushing producer id though
Some checks failed
Vercel Production Deployment / Deploy-Production (push) Failing after 43s

This commit is contained in:
christian 2024-05-24 12:01:58 +02:00
parent 52a39c9ede
commit 17c0c0e853
7 changed files with 80 additions and 21 deletions

View File

@ -1,7 +1,6 @@
import { type Config } from "drizzle-kit"; import { type Config } from "drizzle-kit";
import "./src/server/db/envConfig" import "./src/server/db/envConfig"
export default { export default {
schema: "./src/server/db/schema.ts", schema: "./src/server/db/schema.ts",
dialect: "postgresql", dialect: "postgresql",

View File

@ -1,24 +1,59 @@
"use client";
import { FormEvent } from "react"; 'use client'
import { allProducers, insertWine } from "~/server/db"; import { ChangeEvent, FormEvent, useEffect, useState } from "react";
import { addWine } from "../server/actions/addWine";
import { getProducers } from "../server/actions/allProducers";
interface Producer {
id: string;
name: string;
createdAt: Date;
country: string;
region: string;
email: string;
}
export default function CreateWine(){ export default function CreateWine(){
function handleSubmit(event: FormEvent<HTMLFormElement>) { const [name, setName] = useState('');
event.preventDefault(); const [producer, setProducer] = useState('');
const [allProducers, setAllProducers] = useState<Producer[]>([]);
const formData = new FormData(event.currentTarget); useEffect(() => {
const response = insertWine(formData); 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 ( return (
<form onSubmit={handleSubmit}> <div>
<select name="producer" id="producer"> <input type="text" onChange={handleName} value={name} />
{allProducers.map((producer) => ( <select name="producer" onSelect={handleProducer}>
<option key={producer.id} value={producer.id}> {allProducers.map((item) => (
{producer.name} <option key={item.id} value={item.id}>
{item.name}
</option> </option>
))} ))}
</select> </select>
</form> <button onClick={handleAdd} >Submit wine</button>
</div>
); );
} }

View File

@ -1,9 +1,11 @@
import { FormEvent } from "react"; import { getProducers } from "~/server/actions/allProducers";
import { allWines, insertWine, allProducers } from "~/server/db"; import { getWines } from "../server/actions/allWines";
import CreateWine from "./CreateWine"; import CreateWine from "./CreateWine";
export const dynamic = "force-dynamic"; export const dynamic = "force-dynamic";
const allWines = await getWines();
const allProducers = await getProducers();
function WineCards() { function WineCards() {
return ( return (
<> <>
@ -21,7 +23,7 @@ export default async function HomePage() {
<main className=""> <main className="">
<div className="container "> <div className="container ">
<h1>Yes hello</h1> <h1>Yes hello</h1>
{/* <CreateWine /> */} <CreateWine />
<WineCards /> <WineCards />
</div> </div>
</main> </main>

View File

@ -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();
};

View File

@ -0,0 +1,7 @@
'use server'
import { db } from "../db/index";
export async function getProducers(){
return db.query.producers.findMany();
}

View File

@ -0,0 +1,7 @@
'use server'
import { db } from "../db/index";
export async function getWines(){
return db.query.wines.findMany();
}

View File

@ -1,5 +1,3 @@
import { drizzle } from 'drizzle-orm/vercel-postgres';
import { sql } from "@vercel/postgres";
import { import {
pgTableCreator, pgTableCreator,
text, text,