fixing hydration issue

app/(app)/(builder)/builder/page.tsx

@@ -395,7 +395,7 @@ const canonicalPlatform = normalizePlatformKey(platform);
   // -----------------------------
   const lastHydrateKeyRef = useRef<string>("");
 
-  useEffect(() => {
+useEffect(() => {
   const controller = new AbortController();
 
   async function hydrateSelected() {
@@ -404,16 +404,19 @@ const canonicalPlatform = normalizePlatformKey(platform);
       .sort();
 
     const key = ids.join(",");
-      if (key === lastHydrateKeyRef.current) return;
-      lastHydrateKeyRef.current = key;
 
+    // If nothing selected, reset
     if (ids.length === 0) {
+      lastHydrateKeyRef.current = "";
       setParts([]);
       setError(null);
       setLoading(false);
       return;
     }
 
+    // Only skip if we *successfully* hydrated this key previously
+    if (key === lastHydrateKeyRef.current) return;
+
     setLoading(true);
     setError(null);
 
@@ -432,11 +435,9 @@ const canonicalPlatform = normalizePlatformKey(platform);
 
       const data: GunbuilderProductFromApi[] = await res.json();
 
-        // Map products by id for quick lookup
       const byId = new Map<string, GunbuilderProductFromApi>();
       for (const p of data) byId.set(String(p.id), p);
 
-        // Build the hydrated parts by iterating the BUILD STATE (slot -> id)
       const hydrated: Part[] = Object.entries(build)
         .filter(([, id]) => Boolean(id))
         .map(([slot, id]) => {
@@ -447,21 +448,26 @@ const canonicalPlatform = normalizePlatformKey(platform);
 
           return {
             id: String(p.id),
-              categoryId: slot as any, // slot is the source of truth
+            categoryId: slot as any,
             name: p.name,
             brand: p.brand,
             price: p.price ?? 0,
             imageUrl: p.imageUrl ?? undefined,
             affiliateUrl: buyUrl,
             url: buyUrl,
-              notes: undefined,
           } as Part;
         })
         .filter((x): x is Part => x !== null);
 
       setParts(hydrated);
+
+      // ✅ Mark key as hydrated ONLY after success
+      lastHydrateKeyRef.current = key;
     } catch (err: any) {
-        if (err?.name === "AbortError") return;
+      if (err?.name === "AbortError") {
+        // ✅ Do NOT lock the key on abort; allow retry
+        return;
+      }
       setError(err?.message ?? "Failed to hydrate selected parts");
     } finally {
       setLoading(false);
@@ -470,7 +476,7 @@ const canonicalPlatform = normalizePlatformKey(platform);
 
   hydrateSelected();
   return () => controller.abort();
-  }, [build]);
+}, [build]);
 
   // -----------------------------
   // Persist build to localStorage

components/parts/PartsBrowseClient.tsx

@@ -20,7 +20,7 @@ import PartsGrid from "@/components/parts/PartsGrid";
 import Pagination from "@/components/parts/Pagination";
 import PlatformSwitcher from "@/components/parts/PlatformSwitcher";
 import { normalizePlatformKey } from "@/lib/platforms";
-
+import type { UiPart } from "@/types/uiPart";
 import type { Category } from "@/types/builderSlots";
 import {
   PART_ROLE_TO_CATEGORY,
@@ -58,18 +58,6 @@ type GunbuilderProductFromApi = {
   inStock?: boolean | null;
 };
 
-type UiPart = {
-  id: string;
-  name: string;
-  brand: string;
-  platform: string;
-  partRole: string;
-  price: number;
-  imageUrl?: string;
-  buyUrl?: string;
-  inStock?: boolean;
-};
-
 const API_BASE_URL =
   process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
 
@@ -201,10 +189,11 @@ export default function PartsBrowseClient(props: {
             brand: p.brand,
             platform: p.platform,
             partRole: p.partRole,
-            price: p.price ?? 0,
+            price: p.price,
             imageUrl: p.imageUrl ?? undefined,
             buyUrl: p.buyUrl ?? undefined,
-            inStock: p.inStock ?? true,
+            inStock: p.inStock ?? undefined,
+            caliber: (p as any).caliber ?? null,
           }))
         );
 
@@ -264,12 +253,11 @@ export default function PartsBrowseClient(props: {
   );
 
   const priceBounds = useMemo(() => {
-    if (!parts.length)
+    const prices = parts
-      return { min: null as number | null, max: null as number | null };
+      .map((p) => p.price)
-    return {
+      .filter((v): v is number => typeof v === "number");
-      min: Math.min(...parts.map((p) => p.price)),
+    if (!prices.length) return { min: null, max: null };
-      max: Math.max(...parts.map((p) => p.price)),
+    return { min: Math.min(...prices), max: Math.max(...prices) };
-    };
   }, [parts]);
 
   // Keep priceRange clamped to bounds when bounds change

components/parts/PartsGrid.tsx

@@ -2,20 +2,7 @@
 
 import Link from "next/link";
 import { Plus } from "lucide-react";
-
+import type { UiPart } from "@/types/uiPart";
-type UiPart = {
-  id: string;
-  name: string;
-  brand: string;
-  caliber?: string;
-  platform: string;
-  partRole: string;
-  price: number;
-  imageUrl?: string;
-  buyUrl?: string; // Used for debugging
-  buyShortUrl?: string;
-  inStock?: boolean;
-};
 
 export default function PartsGrid(props: {
   viewMode: "card" | "list";
@@ -28,10 +15,26 @@ export default function PartsGrid(props: {
   const { viewMode, parts, buildDetailHref, onAddToBuild } = props;
   const addLabel = props.addLabel ?? "Add to Build";
 
+  // ✅ Only show caliber column if we actually have caliber data
+  const showCaliber = parts.some((p) => !!p.caliber);
+
+  // ✅ Single source of truth for grid columns (prevents header/row drift)
+  // Columns: Image | Part | Brand | (Caliber?) | Price | Actions
+  const gridCols = showCaliber
+    ? "md:grid-cols-[44px_minmax(0,1fr)_160px_120px_110px_120px]" // +Caliber
+    : "md:grid-cols-[44px_minmax(0,1fr)_160px_110px_120px]"; // no Caliber"md:grid-cols-[44px_minmax(0,1fr)_160px_110px_120px]";
+
+  const formatPrice = (price?: number | null) => {
+    if (price == null) return "—";
+    return `$${price.toFixed(2)}`;
+  };
+
   if (viewMode === "card") {
     return (
       <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
-        {parts.map((part) => (
+        {parts.map((part) => {
+          const buyHref = part.buyShortUrl ?? part.buyUrl;
+          return (
             <div
               key={part.id}
               className="group relative flex flex-col rounded-md border border-zinc-700 bg-zinc-900/50 p-3 transition-all hover:border-amber-400/60 hover:bg-amber-400/10"
@@ -45,7 +48,7 @@ export default function PartsGrid(props: {
                 </div>
 
                 <div className="whitespace-nowrap text-sm font-semibold text-amber-300">
-                ${part.price.toFixed(2)}
+                  {formatPrice(part.price)}
                 </div>
               </div>
 
@@ -65,9 +68,9 @@ export default function PartsGrid(props: {
                   >
                     {addLabel}
                   </button>
-              ) : part.buyShortUrl ?? part.buyUrl ? (
+                ) : buyHref ? (
                   <a
-                  href={part.buyShortUrl ?? part.buyUrl}
+                    href={buyHref}
                     target="_blank"
                     rel="noreferrer"
                     className="flex-1 rounded-md bg-amber-400 px-3 py-2 text-center text-xs font-semibold text-black hover:bg-amber-300"
@@ -79,12 +82,13 @@ export default function PartsGrid(props: {
                     disabled
                     className="flex-1 rounded-md bg-zinc-700 px-3 py-2 text-center text-xs font-semibold text-zinc-200 opacity-50"
                   >
-                  No Action
+                    No Price
                   </button>
                 )}
               </div>
             </div>
-        ))}
+          );
+        })}
       </div>
     );
   }
@@ -93,24 +97,39 @@ export default function PartsGrid(props: {
   return (
     <>
       {/* Header (DESKTOP ONLY) */}
-      <div className="hidden md:grid md:grid-cols-[44px_minmax(0,1fr)_120px_110px_120px] md:items-center md:gap-4 px-3 pb-2 text-[0.7rem] uppercase tracking-[0.16em] text-zinc-500">
+      <div
-        <span className="sr-only">Image</span>
+        className={[
+          "hidden md:grid md:items-center md:gap-4 px-3 pb-2",
+          "text-[0.7rem] uppercase tracking-[0.16em] text-zinc-500",
+          gridCols,
+        ].join(" ")}
+      >
+        <span className="text-left">Image</span>
         <span className="min-w-0">Part</span>
-        <span className="text-right">Caliber</span>
+        <span className="text-right">Brand</span>
+        {showCaliber ? <span className="text-right">Caliber</span> : null}
         <span className="text-right">Price</span>
         <span className="text-right">Actions</span>
       </div>
 
       {/* Rows */}
       <div className="space-y-2">
-        {parts.map((part) => (
+        {parts.map((part) => {
+          const buyHref = part.buyShortUrl ?? part.buyUrl;
+
+          return (
             <div
               key={part.id}
               className="group relative rounded-md border border-zinc-700 bg-zinc-900/50 p-3 transition-all hover:border-amber-400/60 hover:bg-amber-400/10"
             >
-            <div className="flex flex-col gap-2 md:grid md:grid-cols-[44px_minmax(0,1fr)_120px_110px_120px] md:items-center md:gap-4">
+              <div
+                className={[
+                  "flex flex-col gap-2 md:grid md:items-center md:gap-4",
+                  gridCols,
+                ].join(" ")}
+              >
                 {/* Image */}
-              <div className="hidden md:block">
+                <div className="hidden md:block justify-self-start">
                   {part.imageUrl ? (
                     // eslint-disable-next-line @next/next/no-img-element
                     <img
@@ -123,6 +142,7 @@ export default function PartsGrid(props: {
                     <div className="h-10 w-10 rounded border border-zinc-800 bg-zinc-950" />
                   )}
                 </div>
+
                 {/* Part */}
                 <div className="min-w-0">
                   <Link
@@ -132,22 +152,23 @@ export default function PartsGrid(props: {
                   >
                     {part.name}
                   </Link>
-                {/* Dont think we need Brand in the grid */}
-                {/* <div className="mt-0.5 text-xs text-zinc-500 line-clamp-1">
-                  {part.brand}
-                  {part.caliber ? (
-                    <span className="text-zinc-600"> • {part.caliber}</span>
-                  ) : null}
-                </div> */}
                 </div>
-              {/* Caliber (desktop) */}
+
+                {/* Brand */}
+                <div className="hidden md:block text-sm text-zinc-300 text-right">
+                  {part.brand || "—"}
+                </div>
+
+                {/* Caliber (optional) */}
+                {showCaliber ? (
                   <div className="hidden md:block text-sm text-zinc-300 text-right">
                     {part.caliber ?? "—"}
                   </div>
+                ) : null}
 
                 {/* Price */}
                 <div className="text-sm font-semibold text-amber-300 md:text-right">
-                ${part.price.toFixed(2)}
+                  {formatPrice(part.price)}
                 </div>
 
                 {/* Actions */}
@@ -162,9 +183,9 @@ export default function PartsGrid(props: {
                     >
                       <Plus className="h-4 w-4" />
                     </button>
-                ) : part.buyShortUrl ?? part.buyUrl ? (
+                  ) : buyHref ? (
                     <a
-                    href={part.buyShortUrl ?? part.buyUrl}
+                      href={buyHref}
                       target="_blank"
                       rel="noreferrer"
                       className="whitespace-nowrap rounded-md bg-amber-400 px-3 py-1.5 text-xs font-semibold text-black hover:bg-amber-300"
@@ -175,6 +196,7 @@ export default function PartsGrid(props: {
                     <button
                       disabled
                       className="whitespace-nowrap rounded-md bg-zinc-700 px-3 py-1.5 text-xs font-semibold text-zinc-200 opacity-50"
+                      title="No buy link available"
                     >
                       No Action
                     </button>
@@ -182,7 +204,8 @@ export default function PartsGrid(props: {
                 </div>
               </div>
             </div>
-        ))}
+          );
+        })}
       </div>
     </>
   );

types/uiPart.ts

@@ -0,0 +1,17 @@
+// /types/uiPart.ts
+export type UiPart = {
+    id: string;
+    name: string;
+    brand: string;
+    caliber?: string | null;
+    platform: string;
+    partRole: string;
+  
+    // allow nulls from API (don’t coerce to 0)
+    price?: number | null;
+    imageUrl?: string;
+    buyUrl?: string;
+    buyShortUrl?: string;
+  
+    inStock?: boolean | null;
+  };