sean/shadow-gunbuilder-ai-proto
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fixing hydration issue

Browse Source
This commit is contained in:
Sean Strawsburg
2026-01-08 06:02:12 -05:00
parent 1b348c3ee7
commit 72d8f559c9
4 changed files with 276 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(app)/(builder)/builder/page.tsx
+13 -7
View File
@@ -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);
components/parts/PartsBrowseClient.tsx
+9 -21
View File
@@ -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
components/parts/PartsGrid.tsx
+61 -38
View File
@@ -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>
</>
);
types/uiPart.ts
+17
View File
@@ -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;
};