fixing hydration issue

2026-01-08 06:02:12 -05:00
parent 1b348c3ee7
commit 72d8f559c9
4 changed files with 276 additions and 242 deletions
@@ -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
@@ -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)
-      return { min: null as number | null, max: null as number | null };
-    return {
-      min: Math.min(...parts.map((p) => p.price)),
-      max: Math.max(...parts.map((p) => p.price)),
-    };
+    const prices = parts
+      .map((p) => p.price)
+      .filter((v): v is number => typeof v === "number");
+    if (!prices.length) return { min: null, max: null };
+    return { min: Math.min(...prices), max: Math.max(...prices) };
  }, [parts]);

  // Keep priceRange clamped to bounds when bounds change
@@ -2,20 +2,7 @@

 import Link from "next/link";
 import { Plus } from "lucide-react";
-
-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;
-};
+import type { UiPart } from "@/types/uiPart";

 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">
-        <span className="sr-only">Image</span>
+      <div
+        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>
    </>
  );
@@ -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;
+  };