Messing around with queries and components

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"

src/app/WineCards.tsx

@@ -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) => (
-        <div key={wine.id}>
-          {wine.name} - {wine.producer}
-        </div>
-      ))}
-    </>
-  );
-}

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<string>("");

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 (
+    <>
+      <p>{JSON.stringify(allWines)}</p>
+      {allWines.map((wine, i) => {
+        return (
+          <div key={i}>
+            <WineName name={wine.name} /> - <WineProducer id={wine.producer} />
+          </div>
+        );
+      })}
+    </>
+  );
+}

src/app/_components/WineName.tsx

@@ -0,0 +1,3 @@
+export default function WineName(props: { name: string }) {
+  return <p>{props.name}</p>;
+}

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 <p>{result?.name}</p>;
+}

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 (

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

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;
+  }

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 {

src/types/types.ts

@@ -0,0 +1,8 @@
+export interface Producer {
+    id: string;
+    name: string;
+    createdAt: Date;
+    country: string;
+    region: string;
+    email: string;
+  }