fix: renamed items to products, added skeleton to product tiles, grid now pulls data from backend

Renamed "Items" to "Products" but the component remain the same.

Added skeleton to show that products are loading.

The grid of tiles now pulls data from backend server. If no backend server is running. It will use dummy data.

Author: Calesi19

Diff for: .env.example

@@ -17,6 +17,10 @@ GITHUB_ID = ""
 GITHUB_SECRET = ""
 
 
+# URL for the backend API
+
+NEXT_PUBLIC_API_URL="http://localhost:3030"
+
 # Firebase Config Keys
 
 NEXT_PUBLIC_FIREBASE_API_KEY=

Diff for: components/CategorySection/CategorySection.jsx

@@ -1,15 +1,15 @@
 "use client";
 
-import GridItemComp from "./GridItemComp.jsx";
+import ProductTileGrid from "./ProductTileGrid.jsx";
 
 export default function CategorySection({ sectionHeader }) {
   return (
-    <section className="flex flex-col justify-container items-center">
-      <div className="p-4 mx-2 md:mx-6 xl:mx-16 container">
-        <h1 className="py-5 text-2xl font-semibold tracking-tight leading-relaxed">
+    <section className="justify-container flex flex-col items-center">
+      <div className="container mx-2 p-4 md:mx-6 xl:mx-16">
+        <h1 className="py-5 text-2xl font-semibold leading-relaxed tracking-tight">
           {sectionHeader}
         </h1>
-        <GridItemComp />
+        <ProductTileGrid />
       </div>
     </section>
   );

Diff for: components/CategorySection/GridItemComp.jsx

@@ -0,0 +1,46 @@
+"use client";
+
+import Skeleton from "@/components/ui/skeleton";
+
+function ProductTile({ productName, price, imageURL, id }) {
+  const cost = price?.toFixed(2);
+
+  return (
+    <div className="group relative">
+      <a href={"/product/" + id}>
+        <div className="aspect-h-1 aspect-w-1 lg:aspect-none w-full overflow-hidden rounded-md group-hover:opacity-75 lg:h-56">
+          <img
+            src={
+              imageURL
+                ? imageURL
+                : "https://img.freepik.com/premium-vector/default-image-icon-vector-missing-picture-page-website-design-mobile-app-no-photo-available_87543-11093.jpg"
+            }
+            className="h-full w-full object-cover object-center lg:h-full lg:w-full"
+          />
+        </div>
+        <div className="mt-4 flex justify-between gap-4">
+          <div className="w-full text-sm text-neutral-700">{productName}</div>
+          <div className="text-sm font-medium text-neutral-900">${cost}</div>
+        </div>
+      </a>
+    </div>
+  );
+}
+
+// Skeleton for loading state
+function ProductTileSkeleton() {
+  return (
+    <div className="group relative">
+      <div>
+        <Skeleton className="aspect-h-1 aspect-w-1 lg:aspect-none w-full overflow-hidden rounded-md group-hover:opacity-75 lg:h-56" />
+      </div>
+      <div className="mt-4 flex justify-between">
+        <div className="w-full">
+          <Skeleton className="h-4 w-full" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { ProductTile, ProductTileSkeleton };

Diff for: components/CategorySection/ItemComp.jsx

@@ -0,0 +1,52 @@
+import { useEffect, useState } from "react";
+import { ProductTile, ProductTileSkeleton } from "./ProductTile.jsx";
+
+export default function ProductTileGrid() {
+  const [products, setProducts] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        // Fetch data from the API. Need to use the apiUrl variable from the env and have the backend server running.
+        const response = await fetch({ apiUrl } + "/products");
+        if (!response.ok) throw new Error("Network response was not ok");
+        const data = await response.json();
+        setProducts(data);
+      } catch (error) {
+        console.error(
+          "Fetching data failed, falling back to backup data:",
+          error,
+        );
+
+        // Fetch backup dummy data from GitHub
+        const backupData = await fetch(
+          "https://raw.githubusercontent.com/4human-org/murphy-ecommerce-backend/main/util/products.json",
+        ).then((res) => res.json());
+        setProducts(backupData);
+      } finally {
+        setIsLoading(false); // Set loading to false when data is fetched
+      }
+    };
+    fetchData();
+  }, []);
+
+  return (
+    <div className="grid grid-cols-1 gap-4 pb-10 sm:grid-cols-2 sm:gap-3 md:grid-cols-3 lg:grid-cols-6 xl:gap-5">
+      {isLoading
+        ? Array.from({ length: 12 }).map((_, index) => (
+            <ProductTileSkeleton key={index} />
+          ))
+        : products.map(({ name, price, imagesUrl, id }) => (
+            <ProductTile
+              key={name}
+              productName={name}
+              price={price}
+              imageURL={imagesUrl[0]}
+            id={id}
+            
+            />
+          ))}
+    </div>
+  );
+}

Diff for: components/CategorySection/ProductTile.jsx

@@ -0,0 +1,12 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({ className, ...props }) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  );
+}
+
+export default Skeleton;