more query action

package.json

@@ -7,7 +7,7 @@
     "build": "next build",
     "db:push": "drizzle-kit push",
     "db:studio": "drizzle-kit studio",
-    "dev": "next dev --turbo",
+    "dev": "next dev",
     "lint": "next lint",
     "start": "next start"
   },

src/app/_components/WineCards.tsx

@@ -1,4 +1,4 @@
-import { getWines } from "../../server/actions/allWines";
+import { getWines } from "~/server/actions/allWines";
 import WineName from "./WineName";
 import WineProducer from "./WineProducer";
 
@@ -6,10 +6,9 @@ const allWines = await getWines();
 export default async function WineCards() {
   return (
     <>
-      <p>{JSON.stringify(allWines)}</p>
       {allWines.map((wine, i) => {
         return (
-          <div key={i}>
+          <div key={i} className="flex">
             <WineName name={wine.name} /> - <WineProducer id={wine.producer} />
           </div>
         );

src/app/_components/WineProducer.tsx

@@ -1,8 +1,25 @@
-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>;
+export default async function WineProducer(props: { id: string }) {
+  const { id } = props;
+
+  // Validate the id before making the database call
+  if (!id) {
+    return <p>Invalid producer ID</p>;
+  }
+
+  try {
+    const result = await getProducer(id);
+    return !result ? <p>Unable to retrieve producer</p> : <p>{result?.name}</p>;
+  } catch (error) {
+    console.error("Error fetching producer:", error);
+    return <p>Error fetching producer</p>;
+  }
+}
+
+// Utility function to validate UUID
+function isValidUUID(uuid: string) {
+  const uuidRegex =
+    /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+  return uuidRegex.test(uuid);
 }

src/app/page.tsx

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

src/server/actions/getProducer.ts

@@ -1,11 +1,10 @@
-"use server"
+"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)
-    });
-
+export default async function getProducer(id: string) {
+  return db.query.producers.findFirst({
+    where: eq(producers.id, id),
+  });
 }

src/server/actions/getWineDetails.ts

@@ -1,10 +1,13 @@
-"use server"
+"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;
-  }
+export async function getWineDetails(id: string) {
+  const results = await db
+    .select()
+    .from(producers)
+    .where(sql`${producers.id} = ${id}`);
+  return results;
+}

src/server/db/schema.ts

@@ -5,23 +5,23 @@ import {
   uniqueIndex,
   uuid,
 } from "drizzle-orm/pg-core";
-import { relations } from 'drizzle-orm';
+import { relations } from "drizzle-orm";
 
 export const createTable = pgTableCreator((name) => `wine-shop_${name}`);
 
 export const producers = createTable(
   "producer",
   {
-    id: uuid('id').primaryKey().defaultRandom(),
-    name: text('name').notNull(),
-    createdAt: timestamp('createdAt').defaultNow().notNull(),
-    country: text('country').notNull(),
-    region: text('region').notNull(),
-    email: text('email').notNull()
+    id: uuid("id").primaryKey().defaultRandom(),
+    name: text("name").notNull(),
+    createdAt: timestamp("createdAt").defaultNow().notNull(),
+    country: text("country").notNull(),
+    region: text("region").notNull(),
+    email: text("email").notNull(),
   },
   (producers) => {
     return {
-      uniqueIdx: uniqueIndex('email').on(producers.email),
+      uniqueIdx: uniqueIndex("email").on(producers.email),
     };
   },
 );
@@ -33,15 +33,15 @@ export const producersRelations = relations(producers, ({ many }) => ({
 export const wines = createTable(
   "wine",
   {
-    id: uuid('id').primaryKey().defaultRandom(),
-    name: text('name').notNull(),
-    createdAt: timestamp('createdAt').defaultNow().notNull(),
-    updatedAt: timestamp('updatedAt').defaultNow(),
-    producer: uuid('producer').notNull(),
+    id: uuid("id").primaryKey().defaultRandom(),
+    name: text("name").notNull(),
+    createdAt: timestamp("createdAt").defaultNow().notNull(),
+    updatedAt: timestamp("updatedAt").defaultNow(),
+    producer: uuid("producer").notNull(),
   },
   (wines) => {
     return {
-      uniqueIdx: uniqueIndex('unique_idx').on(wines.id),
+      uniqueIdx: uniqueIndex("unique_idx").on(wines.id),
     };
   },
 );
@@ -55,6 +55,5 @@ export const winesRelations = relations(wines, ({ one }) => ({
 
 export type SelectWine = typeof wines.$inferSelect;
 
-
 export type SelectProducer = typeof producers.$inferSelect;
 export type InsertProducer = typeof producers.$inferInsert;