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

fixed platform selector and part selector

Browse Source
This commit is contained in:
Sean Strawsburg
2025-12-11 16:27:28 -05:00
parent b26dcb947e
commit 777618f684
3 changed files with 498 additions and 438 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(builder)/builder/[categoryId]/page.tsx
+55 -41
View File
@@ -6,7 +6,6 @@ import { useParams, useRouter, useSearchParams } from "next/navigation";
import { CATEGORIES } from "@/data/gunbuilderParts";
import type { CategoryId, Part } from "@/types/gunbuilder";
type ViewMode = "card" | "list";
type GunbuilderProductFromApi = {
@@ -31,7 +30,6 @@ const PLATFORMS = ["AR-15", "AR-10"];
const API_BASE_URL =
process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
// sort options
type SortOption = "relevance" | "price-asc" | "price-desc" | "brand-asc";
@@ -61,7 +59,10 @@ export default function CategoryPage() {
const [brandFilter, setBrandFilter] = useState<string[]>([]);
const [sortBy, setSortBy] = useState<SortOption>("relevance");
const [searchQuery, setSearchQuery] = useState<string>("");
const [priceRange, setPriceRange] = useState<{ min: number | null; max: number | null }>({
const [priceRange, setPriceRange] = useState<{
min: number | null;
max: number | null;
}>({
min: null,
max: null,
});
@@ -80,13 +81,12 @@ export default function CategoryPage() {
}
});
const initialPlatform =
(searchParams.get("platform") as string) || "AR-15";
const initialPlatform = (searchParams.get("platform") as string) || "AR-15";
const [platform, setPlatform] = useState<string>(initialPlatform);
const category = useMemo(
() => CATEGORIES.find((c) => c.id === categoryId),
[categoryId],
[categoryId]
);
useEffect(() => {
@@ -159,14 +159,21 @@ export default function CategoryPage() {
delete updated[categoryId];
return updated;
});
} else {
// Add to build and navigate back to main gunbuilder page
return;
}
// Add to build and navigate back to main builder page.
// Pass selection via URL so `/builder` can apply it.
setBuild((prev) => ({
...prev,
[categoryId]: partId,
}));
router.push("/builder");
}
const qp = new URLSearchParams();
qp.set("platform", platform || "AR-15");
qp.set("select", `${categoryId}:${partId}`);
router.push(`/builder?${qp.toString()}`);
};
// available brands for filter
@@ -175,7 +182,7 @@ export default function CategoryPage() {
Array.from(new Set(parts.map((p) => p.brand)))
.filter(Boolean)
.sort((a, b) => a.localeCompare(b)),
[parts],
[parts]
);
const priceBounds = useMemo(() => {
if (parts.length === 0) {
@@ -244,8 +251,7 @@ export default function CategoryPage() {
const name = p.name.toLowerCase();
const brand = p.brand.toLowerCase();
return (
name.includes(normalizedQuery) ||
brand.includes(normalizedQuery)
name.includes(normalizedQuery) || brand.includes(normalizedQuery)
);
});
}
@@ -278,7 +284,10 @@ export default function CategoryPage() {
}, [parts, brandFilter, sortBy, build, categoryId, searchQuery]);
const totalPages = useMemo(
() => (filteredParts.length === 0 ? 1 : Math.ceil(filteredParts.length / PAGE_SIZE)),
() =>
filteredParts.length === 0
? 1
: Math.ceil(filteredParts.length / PAGE_SIZE),
[filteredParts, PAGE_SIZE]
);
@@ -291,11 +300,18 @@ export default function CategoryPage() {
useEffect(() => {
// whenever the category or filters change, jump back to page 1
setCurrentPage(1);
}, [categoryId, brandFilter, sortBy, searchQuery, priceRange, inStockOnly, platform]);
}, [
categoryId,
brandFilter,
sortBy,
searchQuery,
priceRange,
inStockOnly,
platform,
]);
useEffect(() => {
const nextPlatform =
(searchParams.get("platform") as string) || "AR-15";
const nextPlatform = (searchParams.get("platform") as string) || "AR-15";
setPlatform(nextPlatform);
}, [searchParams]);
@@ -304,11 +320,13 @@ export default function CategoryPage() {
return { start: 0, end: 0 };
}
const start = (currentPage - 1) * PAGE_SIZE + 1;
const end = Math.min(start + paginatedParts.length - 1, filteredParts.length);
const end = Math.min(
start + paginatedParts.length - 1,
filteredParts.length
);
return { start, end };
}, [filteredParts.length, currentPage, paginatedParts.length, PAGE_SIZE]);
if (!category) {
return (
<main className="min-h-screen bg-black text-zinc-50">
@@ -430,15 +448,13 @@ export default function CategoryPage() {
<span>
Min:{" "}
<span className="font-semibold text-zinc-200">
$
{(priceRange.min ?? priceBounds.min).toFixed(0)}
${(priceRange.min ?? priceBounds.min).toFixed(0)}
</span>
</span>
<span>
Max:{" "}
<span className="font-semibold text-zinc-200">
$
{(priceRange.max ?? priceBounds.max).toFixed(0)}
${(priceRange.max ?? priceBounds.max).toFixed(0)}
</span>
</span>
</div>
@@ -455,10 +471,7 @@ export default function CategoryPage() {
value,
prev.max ?? priceBounds.max ?? value
),
max:
prev.max ??
priceBounds.max ??
value,
max: prev.max ?? priceBounds.max ?? value,
}));
}}
className="w-full"
@@ -471,10 +484,7 @@ export default function CategoryPage() {
onChange={(e) => {
const value = Number(e.target.value);
setPriceRange((prev) => ({
min:
prev.min ??
priceBounds.min ??
value,
min: prev.min ?? priceBounds.min ?? value,
max: Math.max(
value,
prev.min ?? priceBounds.min ?? value
@@ -683,9 +693,7 @@ export default function CategoryPage() {
<div className="flex-1">
<div className="text-sm font-semibold text-zinc-50">
{part.brand}{" "}
<span className="font-normal">
— {part.name}
</span>
<span className="font-normal">— {part.name}</span>
</div>
{part.notes && (
<p className="mt-1 line-clamp-2 text-xs text-zinc-400">
@@ -700,7 +708,9 @@ export default function CategoryPage() {
<div className="mt-2 flex gap-2">
<Link
href={{
pathname: `/builder/${categoryId}/${part.id}-${slugify(part.name)}`,
pathname: `/builder/${categoryId}/${
part.id
}-${slugify(part.name)}`,
query: { platform },
}}
className="flex-1 rounded-md border border-zinc-700 bg-zinc-800/50 px-3 py-2 text-center text-xs font-medium text-zinc-300 transition-colors hover:border-zinc-600 hover:bg-zinc-700"
@@ -709,7 +719,9 @@ export default function CategoryPage() {
</Link>
<button
type="button"
onClick={() => handleTogglePart(categoryId, part.id)}
onClick={() =>
handleTogglePart(categoryId, part.id)
}
className={`flex-1 rounded-md px-3 py-2 text-center text-xs font-semibold transition-colors ${
isSelected
? "border border-zinc-600 bg-zinc-800 text-zinc-100 hover:bg-zinc-700"
@@ -766,7 +778,9 @@ export default function CategoryPage() {
<div className="flex justify-end gap-2">
<Link
href={{
pathname: `/builder/${categoryId}/${part.id}-${slugify(part.name)}`,
pathname: `/builder/${categoryId}/${
part.id
}-${slugify(part.name)}`,
query: { platform },
}}
className="whitespace-nowrap rounded-md border border-zinc-700 bg-zinc-800/50 px-3 py-1.5 text-xs font-medium text-zinc-300 transition-colors hover:border-zinc-600 hover:bg-zinc-700"
@@ -784,7 +798,9 @@ export default function CategoryPage() {
: "bg-amber-400 text-black hover:bg-amber-300"
}`}
>
{isSelected ? "Remove from Build" : "Add to Build"}
{isSelected
? "Remove from Build"
: "Add to Build"}
</button>
</div>
</div>
@@ -811,9 +827,7 @@ export default function CategoryPage() {
<div className="flex gap-2">
<button
type="button"
onClick={() =>
setCurrentPage((p) => Math.max(1, p - 1))
}
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
disabled={currentPage === 1}
className="rounded border border-zinc-700 bg-zinc-900/70 px-3 py-1 hover:bg-zinc-800 disabled:opacity-40"
>
app/(builder)/builder/page.tsx
+42 -4
View File
@@ -87,7 +87,16 @@ export default function GunbuilderPage() {
const [parts, setParts] = useState<Part[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [platform, setPlatform] = useState<(typeof PLATFORMS)[number]>("AR-15");
const isValidPlatform = (
value: string | null
): value is (typeof PLATFORMS)[number] =>
!!value && (PLATFORMS as readonly string[]).includes(value);
const [platform, setPlatform] = useState<(typeof PLATFORMS)[number]>(() => {
if (typeof window === "undefined") return "AR-15";
const initial = new URLSearchParams(window.location.search).get("platform");
return isValidPlatform(initial) ? initial : "AR-15";
});
const [build, setBuild] = useState<BuildState>(() => {
if (typeof window !== "undefined") {
const stored = localStorage.getItem(STORAGE_KEY);
@@ -189,11 +198,26 @@ export default function GunbuilderPage() {
return updated;
});
router.replace("/builder", { scroll: false });
const qp = searchParams.get("platform");
const nextPlatform = isValidPlatform(qp) ? qp : platform;
router.replace(
`/builder?platform=${encodeURIComponent(nextPlatform)}`,
{
scroll: false,
}
);
}
}
}, [searchParams, router]);
useEffect(() => {
const qp = searchParams.get("platform");
if (isValidPlatform(qp) && qp !== platform) {
setPlatform(qp);
}
}, [searchParams, platform]);
// Persist build state to localStorage whenever it changes
useEffect(() => {
if (typeof window !== "undefined") {
@@ -695,10 +719,24 @@ export default function GunbuilderPage() {
<Link
href={{
pathname: `/builder/${category.id}`,
query: { platform },
query: platform ? { platform } : {},
}}
className="inline-flex items-center gap-1.5 whitespace-nowrap rounded-md border border-zinc-700 bg-zinc-900/70 px-3 py-1.5 text-xs font-medium text-zinc-300 hover:bg-zinc-800 hover:border-zinc-600 transition-colors"
>
Choose a Part
<svg
className="w-3.5 h-3.5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 4v16m8-8H4"
/>
</svg>
<span>Choose a Part</span>
</Link>
) : (
<span className="text-[0.7rem] text-zinc-600">
components/CategoryColumn.tsx
+11 -3
View File
@@ -9,6 +9,7 @@ interface CategoryColumnProps {
parts: Part[];
selectedPartId?: string;
onSelectPart: (partId: string) => void;
platform?: string;
}
export function CategoryColumn({
@@ -16,6 +17,7 @@ export function CategoryColumn({
parts,
selectedPartId,
onSelectPart,
platform,
}: CategoryColumnProps) {
// Show selected part if available, otherwise show placeholder
const displayedPart = selectedPartId
@@ -37,8 +39,11 @@ export function CategoryColumn({
<div className="w-full border border-zinc-700 rounded-md p-3 mb-2 flex items-center justify-between gap-3">
<p className="text-sm text-zinc-500">No part selected</p>
<Link
href={`/builder/${category.id}`}
className="inline-flex items-center gap-2 rounded-md border border-zinc-700 bg-zinc-900/60 px-3 py-1.5 text-xs font-medium text-zinc-200 hover:bg-zinc-800 hover:border-zinc-500 transition-colors"
href={{
pathname: `/builder/${category.id}`,
query: platform ? { platform } : {},
}}
className="inline-flex w-full items-center justify-center rounded-md border border-zinc-700 bg-zinc-900 px-4 py-2 text-xs font-semibold text-zinc-100 hover:bg-zinc-800 hover:border-zinc-600 transition-colors"
>
<svg
className="w-4 h-4"
@@ -68,7 +73,10 @@ export function CategoryColumn({
</div>
{parts.length >= 1 && (
<Link
href={`/builder/${category.id}`}
href={{
pathname: `/builder/${category.id}`,
query: platform ? { platform } : {},
}}
className="mt-2 w-full rounded-md border border-zinc-700 bg-zinc-900/50 px-3 py-2 text-xs font-medium text-zinc-300 hover:bg-zinc-800 hover:border-zinc-600 transition-colors text-center"
>
View All ({parts.length})