From f4cf2f3adc45a33c966b12c51be27ca8d9460a19 Mon Sep 17 00:00:00 2001 From: christian Date: Fri, 24 May 2024 23:26:13 +0200 Subject: [PATCH] Messing around with queries and components --- package-lock.json | 44 +++++++++++++----------- src/app/WineCards.tsx | 17 --------- src/app/{ => _components}/CreateWine.tsx | 14 ++------ src/app/_components/WineCards.tsx | 19 ++++++++++ src/app/_components/WineName.tsx | 3 ++ src/app/_components/WineProducer.tsx | 8 +++++ src/app/page.tsx | 6 ++-- src/server/actions/getProducer.ts | 11 ++++++ src/server/actions/getWineDetails.ts | 10 ++++++ src/server/db/schema.ts | 2 +- src/types/types.ts | 8 +++++ 11 files changed, 91 insertions(+), 51 deletions(-) delete mode 100644 src/app/WineCards.tsx rename src/app/{ => _components}/CreateWine.tsx (85%) create mode 100644 src/app/_components/WineCards.tsx create mode 100644 src/app/_components/WineName.tsx create mode 100644 src/app/_components/WineProducer.tsx create mode 100644 src/server/actions/getProducer.ts create mode 100644 src/server/actions/getWineDetails.ts create mode 100644 src/types/types.ts diff --git a/package-lock.json b/package-lock.json index 2d8d685..f5dfb3e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -50,9 +50,9 @@ } }, "node_modules/@babel/runtime": { - "version": "7.24.5", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.5.tgz", - "integrity": "sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==", + "version": "7.24.6", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.6.tgz", + "integrity": "sha512-Ja18XcETdEl5mzzACGd+DKgaGJzPTCow7EglgwTmHdwokzDFYh/MHua6lU6DV/hjF2IaOJ4oX2nqnjG7RElKOw==", "dev": true, "dependencies": { "regenerator-runtime": "^0.14.0" @@ -1391,9 +1391,9 @@ "devOptional": true }, "node_modules/@types/react": { - "version": "18.3.2", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.2.tgz", - "integrity": "sha512-Btgg89dAnqD4vV7R3hlwOxgqobUQKgx3MmrQRi0yYbs/P0ym8XozIAlkqVilPqHQwXs4e9Tf63rrCgl58BcO4w==", + "version": "18.3.3", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz", + "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==", "devOptional": true, "dependencies": { "@types/prop-types": "*", @@ -3971,6 +3971,7 @@ "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", + "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.", "dev": true, "dependencies": { "once": "^1.3.0", @@ -4613,19 +4614,22 @@ } }, "node_modules/memoizee": { - "version": "0.4.15", - "resolved": "https://registry.npmjs.org/memoizee/-/memoizee-0.4.15.tgz", - "integrity": "sha512-UBWmJpLZd5STPm7PMUlOw/TSy972M+z8gcyQ5veOnSDRREz/0bmpyTfKt3/51DhEBqCZQn1udM/5flcSPYhkdQ==", + "version": "0.4.17", + "resolved": "https://registry.npmjs.org/memoizee/-/memoizee-0.4.17.tgz", + "integrity": "sha512-DGqD7Hjpi/1or4F/aYAspXKNm5Yili0QDAFAY4QYvpqpgiY6+1jOfqpmByzjxbWd/T9mChbCArXAbDAsTm5oXA==", "dev": true, "dependencies": { - "d": "^1.0.1", - "es5-ext": "^0.10.53", + "d": "^1.0.2", + "es5-ext": "^0.10.64", "es6-weak-map": "^2.0.3", "event-emitter": "^0.3.5", "is-promise": "^2.2.2", "lru-queue": "^0.1.0", "next-tick": "^1.1.0", "timers-ext": "^0.1.7" + }, + "engines": { + "node": ">=0.12" } }, "node_modules/merge2": { @@ -4675,9 +4679,9 @@ } }, "node_modules/minipass": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.1.tgz", - "integrity": "sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==", + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", + "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", "dev": true, "engines": { "node": ">=16 || 14 >=14.17" @@ -6205,16 +6209,16 @@ } }, "node_modules/sucrase/node_modules/glob": { - "version": "10.3.16", - "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.16.tgz", - "integrity": "sha512-JDKXl1DiuuHJ6fVS2FXjownaavciiHNUU4mOvV/B793RLh05vZL1rcPnCSaOgv1hDT6RDlY7AB7ZUvFYAtPgAw==", + "version": "10.4.1", + "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.1.tgz", + "integrity": "sha512-2jelhlq3E4ho74ZyVLN03oKdAZVUa6UDZzFLVH1H7dnoax+y9qyaq8zBkfDIggjniU19z0wU18y16jMB2eyVIw==", "dev": true, "dependencies": { "foreground-child": "^3.1.0", "jackspeak": "^3.1.2", - "minimatch": "^9.0.1", - "minipass": "^7.0.4", - "path-scurry": "^1.11.0" + "minimatch": "^9.0.4", + "minipass": "^7.1.2", + "path-scurry": "^1.11.1" }, "bin": { "glob": "dist/esm/bin.mjs" diff --git a/src/app/WineCards.tsx b/src/app/WineCards.tsx deleted file mode 100644 index b68cbaf..0000000 --- a/src/app/WineCards.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { getWines } from "~/server/actions/allWines"; - -export const dynamic = "force-dynamic"; - -const allWines = await getWines(); - -export default function WineCards() { - return ( - <> - {allWines.map((wine) => ( -
- {wine.name} - {wine.producer} -
- ))} - - ); -} diff --git a/src/app/CreateWine.tsx b/src/app/_components/CreateWine.tsx similarity index 85% rename from src/app/CreateWine.tsx rename to src/app/_components/CreateWine.tsx index 8dbb62b..dca23e7 100644 --- a/src/app/CreateWine.tsx +++ b/src/app/_components/CreateWine.tsx @@ -1,16 +1,8 @@ "use client"; 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; -} +import { addWine } from "../../server/actions/addWine"; +import { getProducers } from "../../server/actions/allProducers"; +import { Producer } from "~/types/types"; export default function CreateWine() { const [name, setName] = useState(""); diff --git a/src/app/_components/WineCards.tsx b/src/app/_components/WineCards.tsx new file mode 100644 index 0000000..08cdac2 --- /dev/null +++ b/src/app/_components/WineCards.tsx @@ -0,0 +1,19 @@ +import { getWines } from "../../server/actions/allWines"; +import WineName from "./WineName"; +import WineProducer from "./WineProducer"; + +const allWines = await getWines(); +export default async function WineCards() { + return ( + <> +

{JSON.stringify(allWines)}

+ {allWines.map((wine, i) => { + return ( +
+ - +
+ ); + })} + + ); +} diff --git a/src/app/_components/WineName.tsx b/src/app/_components/WineName.tsx new file mode 100644 index 0000000..451294b --- /dev/null +++ b/src/app/_components/WineName.tsx @@ -0,0 +1,3 @@ +export default function WineName(props: { name: string }) { + return

{props.name}

; +} diff --git a/src/app/_components/WineProducer.tsx b/src/app/_components/WineProducer.tsx new file mode 100644 index 0000000..18fc3ed --- /dev/null +++ b/src/app/_components/WineProducer.tsx @@ -0,0 +1,8 @@ +import { UUID } from "crypto"; +import { PgUUID } from "drizzle-orm/pg-core"; +import getProducer from "~/server/actions/getProducer"; + +export default async function (props: { id: string }) { + const result = await getProducer(props.id); + return

{result?.name}

; +} diff --git a/src/app/page.tsx b/src/app/page.tsx index 930c119..20a8359 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,5 +1,7 @@ -import CreateWine from "./CreateWine"; -import WineCards from "./WineCards"; +import CreateWine from "./_components/CreateWine"; +import WineCards from "./_components/WineCards"; + +export const dynamic = "force-dynamic"; export default async function HomePage() { return ( diff --git a/src/server/actions/getProducer.ts b/src/server/actions/getProducer.ts new file mode 100644 index 0000000..021a889 --- /dev/null +++ b/src/server/actions/getProducer.ts @@ -0,0 +1,11 @@ +"use server" +import { producers } from "../db/schema"; +import { db } from "../db"; +import { eq } from "drizzle-orm"; + +export default async function getProducer(id: string){ + return db.query.producers.findFirst({ + where: eq(producers.id, id) + }); + +} \ No newline at end of file diff --git a/src/server/actions/getWineDetails.ts b/src/server/actions/getWineDetails.ts new file mode 100644 index 0000000..aa966fc --- /dev/null +++ b/src/server/actions/getWineDetails.ts @@ -0,0 +1,10 @@ +"use server" +import { sql } from "drizzle-orm"; +import { db } from "../db"; +import { wines, producers } from "../db/schema"; +import { UUID } from "crypto"; + +export async function getWineDetails(id: UUID) { + const results = await db.select().from(producers).where(sql `${producers.id} = ${id}`) + return results; + } \ No newline at end of file diff --git a/src/server/db/schema.ts b/src/server/db/schema.ts index d6843f9..c3afa55 100644 --- a/src/server/db/schema.ts +++ b/src/server/db/schema.ts @@ -37,7 +37,7 @@ export const wines = createTable( name: text('name').notNull(), createdAt: timestamp('createdAt').defaultNow().notNull(), updatedAt: timestamp('updatedAt').defaultNow(), - producer: text('producer').notNull(), + producer: uuid('producer').notNull(), }, (wines) => { return { diff --git a/src/types/types.ts b/src/types/types.ts new file mode 100644 index 0000000..1eddc71 --- /dev/null +++ b/src/types/types.ts @@ -0,0 +1,8 @@ +export interface Producer { + id: string; + name: string; + createdAt: Date; + country: string; + region: string; + email: string; + } \ No newline at end of file