pulling products from spring api. live data

app/gunbuilder/[categoryId]/page.tsx

@@ -1,27 +1,109 @@
 "use client";
 
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import { CATEGORIES, PARTS } from "@/data/gunbuilderParts";
-import type { CategoryId } from "@/types/gunbuilder";
+import { CATEGORIES } from "@/data/gunbuilderParts";
+import type { CategoryId, Part } from "@/types/gunbuilder";
 
 type ViewMode = "card" | "list";
 
+type GunbuilderProductFromApi = {
+  id: number;
+  uuid: string;
+  slug: string;
+  name: string;
+  brandName: string;
+  platform: string;
+  partRole: string;
+  price: number | null;
+  mainImageUrl: string | null;
+  buyUrl: string | null;
+};
+
+const API_BASE_URL =
+  process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
+
+/**
+ * Map from category id -> Ballistic partRole(s)
+ * Keep this in sync with whatever you’re using on the main /gunbuilder page.
+ */
+const CATEGORY_TO_PART_ROLES: Record<CategoryId, string[]> = {
+  upper: ["upper-receiver"],
+  barrel: ["barrel"],
+  handguard: ["handguard"],
+  chargingHandle: ["charging-handle"],
+  buffer: ["buffer-kit"],
+  lowerParts: ["lower-parts-kit"],
+  sights: ["sight"],
+};
+
 export default function CategoryPage() {
   const params = useParams();
   const categoryId = params.categoryId as CategoryId;
   const [viewMode, setViewMode] = useState<ViewMode>("list");
+  const [parts, setParts] = useState<Part[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
   const category = useMemo(
     () => CATEGORIES.find((c) => c.id === categoryId),
     [categoryId],
   );
 
-  const parts = useMemo(
-    () => PARTS.filter((p) => p.categoryId === categoryId),
-    [categoryId],
-  );
+  useEffect(() => {
+    if (!categoryId) return;
+
+    const controller = new AbortController();
+
+    async function fetchCategoryParts() {
+      try {
+        setLoading(true);
+        setError(null);
+
+        const roles = CATEGORY_TO_PART_ROLES[categoryId] ?? [];
+
+        const search = new URLSearchParams();
+        search.set("platform", "AR-15");
+        roles.forEach((r) => search.append("partRoles", r));
+
+        const url = `${API_BASE_URL}/api/products/gunbuilder${
+          roles.length ? `?${search.toString()}` : ""
+        }`;
+
+        const res = await fetch(url, { signal: controller.signal });
+
+        if (!res.ok) {
+          throw new Error(`Failed to load products (${res.status})`);
+        }
+
+        const data: GunbuilderProductFromApi[] = await res.json();
+
+        const normalized: Part[] = data.map((p) => ({
+          id: p.uuid,
+          categoryId,
+          name: p.name,
+          brand: p.brandName,
+          price: p.price ?? 0,
+          // these fields exist in the Part type even if you’re not using them yet
+          imageUrl: p.mainImageUrl ?? undefined,
+          url: p.buyUrl ?? undefined,
+          notes: undefined,
+        }));
+
+        setParts(normalized);
+      } catch (err: any) {
+        if (err.name === "AbortError") return;
+        setError(err.message ?? "Failed to load products");
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchCategoryParts();
+
+    return () => controller.abort();
+  }, [categoryId]);
 
   if (!category) {
     return (
@@ -63,11 +145,11 @@ export default function CategoryPage() {
                 {category.name} <span className="text-amber-300">Parts</span>
               </h1>
               <p className="mt-2 text-sm text-zinc-400 max-w-xl">
-                Browse all available {category.name.toLowerCase()} options for your
-                build.
+                Browse all available {category.name.toLowerCase()} options for
+                your build, pulled live from your Ballistic backend.
               </p>
             </div>
-            {parts.length > 0 && (
+            {!loading && !error && parts.length > 0 && (
               <div className="flex gap-2 border border-zinc-800 rounded-md p-1 bg-zinc-950/60">
                 <button
                   type="button"
@@ -100,7 +182,15 @@ export default function CategoryPage() {
 
         {/* Parts Grid/List */}
         <section className="rounded-lg border border-zinc-800 bg-zinc-950/60 p-3 md:p-4">
-          {parts.length === 0 ? (
+          {loading ? (
+            <p className="text-sm text-zinc-500 text-center py-8">
+              Loading {category.name.toLowerCase()}…
+            </p>
+          ) : error ? (
+            <p className="text-sm text-red-400 text-center py-8">
+              {error} — check that the Ballistic API is running.
+            </p>
+          ) : parts.length === 0 ? (
             <p className="text-sm text-zinc-500 text-center py-8">
               No parts available for this category yet.
             </p>
@@ -118,7 +208,8 @@ export default function CategoryPage() {
                     <div className="flex justify-between items-center gap-2 mb-3">
                       <div className="flex-1">
                         <div className="text-sm font-semibold text-zinc-50">
-                          {part.brand} <span className="font-normal">— {part.name}</span>
+                          {part.brand}{" "}
+                          <span className="font-normal">— {part.name}</span>
                         </div>
                         {part.notes && (
                           <p className="mt-1 text-xs text-zinc-400 line-clamp-2">
@@ -160,7 +251,8 @@ export default function CategoryPage() {
                         className="block"
                       >
                         <div className="text-sm font-semibold text-zinc-50">
-                          {part.brand} <span className="font-normal">— {part.name}</span>
+                          {part.brand}{" "}
+                          <span className="font-normal">— {part.name}</span>
                         </div>
                         {part.notes && (
                           <p className="mt-1 text-xs text-zinc-400 line-clamp-1">
@@ -195,5 +287,4 @@ export default function CategoryPage() {
       </div>
     </main>
   );
-}
-
+}