drizzle live data

src/app/(category-sidebar)/layout.tsx

@@ -1,7 +1,12 @@
-import { artSupplies } from "../data";
+import { db } from "@/db";
+import { categories } from "@/db/schema";
 
-export default function Layout({ children }: { children: React.ReactNode }) {
-  const allCategories = artSupplies.flatMap((item) => item.categories);
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const allCategories = await db.select().from(categories);
   return (
     <div className="flex flex-grow font-helvetica-roman">
       <aside className="hidden w-48 min-w-48 border-r border-gray-400 p-3 md:block">
@@ -10,11 +15,12 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         </h2>
         <ul className="flex flex-col items-start justify-center">
           {allCategories.map((category) => (
-            <li key={category.categoryName}>
-              <a href={`/products/${category.categoryName}`}>
-                <div className="text-wrap py-1 text-xs text-gray-800 hover:bg-yellow-100 hover:underline">
-                  {category.categoryName}
-                </div>
+            <li key={category.name} className="w-full">
+              <a
+                href={`/products/${category.slug}`}
+                className="block w-full py-1 text-xs text-gray-800 hover:bg-yellow-100 hover:underline"
+              >
+                {category.name}
               </a>
             </li>
           ))}

src/app/(category-sidebar)/page.tsx

@@ -1,28 +1,32 @@
 import Link from "next/link";
-import { getAllCollections } from "@/db/utils";
+import { db } from "@/db";
 
-export default function Home() {
-  const collections = getAllCollections();
+export default async function Home() {
+  const collections = await db.query.collections.findMany({
+    with: {
+      categories: true,
+    },
+  });
   return (
     <div className="p-4">
       {collections.map((collection) => (
-        <div key={collection.collectionName}>
-          <h2 className="text-xl font-semibold">{collection.collectionName}</h2>
+        <div key={collection.name}>
+          <h2 className="text-xl font-semibold">{collection.name}</h2>
           <div className="grid grid-cols-2 gap-4 border-b-2 py-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
             {collection.categories.map((category) => (
               <Link
-                key={category.categoryName}
+                key={category.name}
                 className="flex flex-col items-center text-center"
-                href={`/products/${category.categoryName}`}
+                href={`/products/${category.slug}`}
               >
                 <img
                   src={category.icon}
-                  alt={category.categoryName}
+                  alt={category.name}
                   className="mb-2 h-14 w-14 border hover:bg-yellow-200"
                   width={48}
                   height={48}
                 />
-                <span className="text-xs">{category.categoryName}</span>
+                <span className="text-xs">{category.name}</span>
               </Link>
             ))}
           </div>

src/app/(category-sidebar)/products/[category]/[subcategory]/[product]/page.tsx

@@ -1,5 +1,5 @@
 import { ProductLink } from "@/components/ui/product-card";
-import { getProductDetails, getRelatedProducts } from "@/db/utils";
+import { db } from "@/db";
 import Image from "next/image";
 import { notFound } from "next/navigation";
 
@@ -14,15 +14,16 @@ export default async function Page(props: {
   const urlDecodedProduct = decodeURIComponent(product);
   const urlDecodedSubcategory = decodeURIComponent(subcategory);
   const urlDecodedCategory = decodeURIComponent(category);
-  const productData = getProductDetails({
-    category: urlDecodedCategory,
-    subcategory: urlDecodedSubcategory,
-    product: urlDecodedProduct,
+  const productData = await db.query.products.findFirst({
+    where: (products, { eq }) => eq(products.slug, urlDecodedProduct),
   });
-  const related = getRelatedProducts({
-    category: urlDecodedCategory,
-    subcategory: urlDecodedSubcategory,
-    product: urlDecodedProduct,
+  const related = await db.query.products.findMany({
+    where: (products, { eq }) =>
+      eq(products.subcategory_slug, urlDecodedSubcategory),
+    with: {
+      subcategory: true,
+    },
+    limit: 5,
   });
   if (!productData) {
     return notFound();

src/app/(category-sidebar)/products/[category]/[subcategory]/page.tsx

@@ -1,6 +1,6 @@
 import { notFound } from "next/navigation";
-import { getSubcategoryDetails } from "@/db/utils";
 import { ProductLink } from "@/components/ui/product-card";
+import { db } from "@/db";
 
 export default async function Page(props: {
   params: Promise<{
@@ -11,9 +11,12 @@ export default async function Page(props: {
   const { subcategory, category } = await props.params;
   const urlDecodedCategory = decodeURIComponent(category);
   const urlDecodedSubcategory = decodeURIComponent(subcategory);
-  const sub = getSubcategoryDetails({
-    category: urlDecodedCategory,
-    subcategory: urlDecodedSubcategory,
+  const sub = await db.query.subcategories.findFirst({
+    where: (subcategories, { eq }) =>
+      eq(subcategories.slug, urlDecodedSubcategory),
+    with: {
+      products: true,
+    },
   });
   if (!sub) {
     return notFound();

src/app/(category-sidebar)/products/[category]/page.tsx

@@ -1,50 +1,63 @@
-import { getCategoryDetails } from "@/db/utils";
+import { db } from "@/db";
 import Image from "next/image";
 import Link from "next/link";
 import { notFound } from "next/navigation";
+
 export default async function Page(props: {
   params: Promise<{
     category: string;
   }>;
 }) {
   const { category } = await props.params;
   const urlDecoded = decodeURIComponent(category);
-  const cat = getCategoryDetails(urlDecoded);
+  const cat = await db.query.categories.findFirst({
+    where: (categories, { eq }) => eq(categories.slug, urlDecoded),
+    with: {
+      subcollections: {
+        with: {
+          subcategories: true,
+        },
+      },
+    },
+  });
+  console.log("cat", cat);
   if (!cat) {
     return notFound();
   }
   return (
     <div className="container mx-auto p-4">
       <h1 className="mb-2 border-b-2 text-sm font-bold">690 Products</h1>
       <div className="space-y-4">
-        {cat.categoryItems.map((collection, index) => (
+        {cat.subcollections.map((subcollection, index) => (
           <div key={index}>
             <h2 className="mb-2 border-b-2 text-lg font-semibold">
-              {collection.subCollectionName}
+              {subcollection.name}
             </h2>
             <div className="grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4">
-              {collection.subcategories.map((subcategory, subcategoryIndex) => (
-                <Link
-                  key={subcategoryIndex}
-                  className="group flex h-full flex-row border px-4 py-2 hover:bg-gray-100"
-                  href={`/products/${category}/${subcategory.subcategoryName}`}
-                >
-                  <div className="py-2">
-                    <Image
-                      src="/placeholder.svg?height=48&width=48"
-                      alt={subcategory.subcategoryName}
-                      width={48}
-                      height={48}
-                      className="h-12 w-12 flex-shrink-0 object-cover"
-                    />
-                  </div>
-                  <div className="flex h-24 flex-grow flex-col items-start py-2">
-                    <div className="text-sm font-medium text-gray-700 group-hover:underline">
-                      {subcategory.subcategoryName}
+              {subcollection.subcategories.map(
+                (subcategory, subcategoryIndex) => (
+                  <Link
+                    key={subcategoryIndex}
+                    className="group flex h-full flex-row border px-4 py-2 hover:bg-gray-100"
+                    href={`/products/${category}/${subcategory.slug}`}
+                  >
+                    <div className="py-2">
+                      <Image
+                        src="/placeholder.svg?height=48&width=48"
+                        alt={subcategory.name}
+                        width={48}
+                        height={48}
+                        className="h-12 w-12 flex-shrink-0 object-cover"
+                      />
                     </div>
-                  </div>
-                </Link>
-              ))}
+                    <div className="flex h-24 flex-grow flex-col items-start py-2">
+                      <div className="text-sm font-medium text-gray-700 group-hover:underline">
+                        {subcategory.name}
+                      </div>
+                    </div>
+                  </Link>
+                ),
+              )}
             </div>
           </div>
         ))}

src/app/layout.tsx

@@ -1,7 +1,6 @@
 import type { Metadata } from "next";
 import localFont from "next/font/local";
 import "./globals.css";
-import { artSupplies } from "./data";
 import Link from "next/link";
 import { SearchDropdownComponent } from "@/components/search-dropdown";
 

src/db/schema.ts

@@ -56,7 +56,7 @@ export const subcollectionRelations = relations(
   subcollection,
   ({ one, many }) => ({
     category: one(categories, {
-      fields: [subcollection.category_id],
+      fields: [subcollection.category_slug],
       references: [categories.slug],
     }),
     subcategories: many(subcategories),
@@ -76,7 +76,7 @@ export const subcategoriesRelations = relations(
 
 export const productsRelations = relations(products, ({ one }) => ({
   subcategory: one(subcategories, {
-    fields: [products.subcategory_id],
+    fields: [products.subcategory_slug],
     references: [subcategories.slug],
   }),
 }));