Progressing in circles \U0001f937
All checks were successful
Vercel Production Deployment / Deploy-Production (push) Successful in 1m53s

This commit is contained in:
christian 2024-05-25 01:49:34 +02:00
parent ffbf48bc8a
commit 299df4569e
4 changed files with 53 additions and 55 deletions

View File

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

View File

@ -1,54 +1,36 @@
"use client"; import { addWine } from "~/server/actions/addWine";
import { ChangeEvent, FormEvent, useEffect, useState } from "react"; import { getProducers } from "~/server/actions/allProducers";
import { addWine } from "../../server/actions/addWine";
import { getProducers } from "../../server/actions/allProducers"; type Wine = {
import { Producer } from "~/types/types"; 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() { 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 ( return (
<div> <div>
<input type="text" onChange={handleName} value={name} /> <form action={submitWine}>
<select <input type="text" name="name" />
name="producer" <select name="producer">
id="producer" {producers.map((producer, i) => (
value={producer} <option key={i} value={producer.id}>
onChange={handleProducer} {producer.name}
>
{allProducers.map((item, i) => (
<option key={i} value={item.id}>
{item.name}
</option> </option>
))} ))}
</select> </select>
<button onClick={handleAdd}>Submit wine</button> <button type="submit">Add wine</button>
</form>
</div> </div>
); );
} }

View File

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

View File

@ -2,7 +2,13 @@
import { db } from '../db/index' import { db } from '../db/index'
import { wines } from '../db/schema' 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({ await db.insert(wines).values({
producer: producer, producer: producer,
name: name, name: name,