refactor: extract tab views from collection route into separate components
Moves CollectionView, PlanningView, and SetupsView out of the 634-line collection/index.tsx into dedicated component files. Pure extraction — zero logic changes. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
277
src/client/components/CollectionView.tsx
Normal file
277
src/client/components/CollectionView.tsx
Normal file
@@ -0,0 +1,277 @@
|
||||
import { useMemo, useState } from "react";
|
||||
import { useCategories } from "../hooks/useCategories";
|
||||
import { useCurrency } from "../hooks/useCurrency";
|
||||
import { useItems } from "../hooks/useItems";
|
||||
import { useTotals } from "../hooks/useTotals";
|
||||
import { useWeightUnit } from "../hooks/useWeightUnit";
|
||||
import { formatPrice, formatWeight } from "../lib/formatters";
|
||||
import { LucideIcon } from "../lib/iconData";
|
||||
import { useUIStore } from "../stores/uiStore";
|
||||
import { CategoryFilterDropdown } from "./CategoryFilterDropdown";
|
||||
import { CategoryHeader } from "./CategoryHeader";
|
||||
import { ItemCard } from "./ItemCard";
|
||||
|
||||
export function CollectionView() {
|
||||
const { data: items, isLoading: itemsLoading } = useItems();
|
||||
const { data: totals } = useTotals();
|
||||
const { data: categories } = useCategories();
|
||||
const unit = useWeightUnit();
|
||||
const currency = useCurrency();
|
||||
const openAddPanel = useUIStore((s) => s.openAddPanel);
|
||||
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const [categoryFilter, setCategoryFilter] = useState<number | null>(null);
|
||||
|
||||
const filteredItems = useMemo(() => {
|
||||
if (!items) return [];
|
||||
return items.filter((item) => {
|
||||
const matchesSearch =
|
||||
searchText === "" ||
|
||||
item.name.toLowerCase().includes(searchText.toLowerCase());
|
||||
const matchesCategory =
|
||||
categoryFilter === null || item.categoryId === categoryFilter;
|
||||
return matchesSearch && matchesCategory;
|
||||
});
|
||||
}, [items, searchText, categoryFilter]);
|
||||
|
||||
const hasActiveFilters = searchText !== "" || categoryFilter !== null;
|
||||
|
||||
if (itemsLoading) {
|
||||
return (
|
||||
<div className="animate-pulse space-y-6">
|
||||
<div className="h-6 bg-gray-200 rounded w-48" />
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="h-40 bg-gray-200 rounded-xl" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!items || items.length === 0) {
|
||||
return (
|
||||
<div className="py-16 text-center">
|
||||
<div className="max-w-md mx-auto">
|
||||
<div className="mb-4">
|
||||
<LucideIcon
|
||||
name="backpack"
|
||||
size={48}
|
||||
className="text-gray-400 mx-auto"
|
||||
/>
|
||||
</div>
|
||||
<h2 className="text-xl font-semibold text-gray-900 mb-2">
|
||||
Your collection is empty
|
||||
</h2>
|
||||
<p className="text-sm text-gray-500 mb-6">
|
||||
Start cataloging your gear by adding your first item. Track weight,
|
||||
price, and organize by category.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={openAddPanel}
|
||||
className="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-700 hover:bg-gray-800 text-white text-sm font-medium rounded-lg transition-colors"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="w-4 h-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 4v16m8-8H4"
|
||||
/>
|
||||
</svg>
|
||||
Add your first item
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Build category totals lookup
|
||||
const categoryTotalsMap = new Map<
|
||||
number,
|
||||
{ totalWeight: number; totalCost: number; itemCount: number }
|
||||
>();
|
||||
if (totals?.categories) {
|
||||
for (const ct of totals.categories) {
|
||||
categoryTotalsMap.set(ct.categoryId, {
|
||||
totalWeight: ct.totalWeight,
|
||||
totalCost: ct.totalCost,
|
||||
itemCount: ct.itemCount,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Group filtered items by categoryId (used when no active filters)
|
||||
const groupedItems = new Map<
|
||||
number,
|
||||
{
|
||||
items: typeof filteredItems;
|
||||
categoryName: string;
|
||||
categoryIcon: string;
|
||||
}
|
||||
>();
|
||||
|
||||
for (const item of filteredItems) {
|
||||
const group = groupedItems.get(item.categoryId);
|
||||
if (group) {
|
||||
group.items.push(item);
|
||||
} else {
|
||||
groupedItems.set(item.categoryId, {
|
||||
items: [item],
|
||||
categoryName: item.categoryName,
|
||||
categoryIcon: item.categoryIcon,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Collection stats card */}
|
||||
{totals?.global && (
|
||||
<div className="bg-white rounded-xl border border-gray-100 p-5 mb-6">
|
||||
<div className="flex items-center gap-8">
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<LucideIcon name="layers" size={14} className="text-gray-400" />
|
||||
<span className="text-xs text-gray-500">Items</span>
|
||||
<span className="text-sm font-semibold text-gray-900">
|
||||
{totals.global.itemCount}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<LucideIcon name="weight" size={14} className="text-gray-400" />
|
||||
<span className="text-xs text-gray-500">Total Weight</span>
|
||||
<span className="text-sm font-semibold text-gray-900">
|
||||
{formatWeight(totals.global.totalWeight, unit)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<LucideIcon
|
||||
name="credit-card"
|
||||
size={14}
|
||||
className="text-gray-400"
|
||||
/>
|
||||
<span className="text-xs text-gray-500">Total Spent</span>
|
||||
<span className="text-sm font-semibold text-gray-900">
|
||||
{formatPrice(totals.global.totalCost, currency)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Search/filter toolbar */}
|
||||
<div className="sticky top-0 z-10 bg-gray-50/95 backdrop-blur-sm border-b border-gray-100 -mx-4 px-4 py-3 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8 mb-6">
|
||||
<div className="flex gap-3 items-center">
|
||||
<div className="relative flex-1">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search items..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
|
||||
/>
|
||||
{searchText && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSearchText("")}
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<CategoryFilterDropdown
|
||||
value={categoryFilter}
|
||||
onChange={setCategoryFilter}
|
||||
categories={categories ?? []}
|
||||
/>
|
||||
</div>
|
||||
{hasActiveFilters && (
|
||||
<p className="text-xs text-gray-500 mt-2">
|
||||
Showing {filteredItems.length} of {items.length} items
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Filtered results */}
|
||||
{hasActiveFilters ? (
|
||||
filteredItems.length === 0 ? (
|
||||
<div className="py-12 text-center">
|
||||
<p className="text-sm text-gray-500">No items match your search</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{filteredItems.map((item) => (
|
||||
<ItemCard
|
||||
key={item.id}
|
||||
id={item.id}
|
||||
name={item.name}
|
||||
weightGrams={item.weightGrams}
|
||||
priceCents={item.priceCents}
|
||||
categoryName={item.categoryName}
|
||||
categoryIcon={item.categoryIcon}
|
||||
imageFilename={item.imageFilename}
|
||||
productUrl={item.productUrl}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
Array.from(groupedItems.entries()).map(
|
||||
([
|
||||
categoryId,
|
||||
{ items: categoryItems, categoryName, categoryIcon },
|
||||
]) => {
|
||||
const catTotals = categoryTotalsMap.get(categoryId);
|
||||
return (
|
||||
<div key={categoryId} className="mb-8">
|
||||
<CategoryHeader
|
||||
categoryId={categoryId}
|
||||
name={categoryName}
|
||||
icon={categoryIcon}
|
||||
totalWeight={catTotals?.totalWeight ?? 0}
|
||||
totalCost={catTotals?.totalCost ?? 0}
|
||||
itemCount={catTotals?.itemCount ?? categoryItems.length}
|
||||
/>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{categoryItems.map((item) => (
|
||||
<ItemCard
|
||||
key={item.id}
|
||||
id={item.id}
|
||||
name={item.name}
|
||||
weightGrams={item.weightGrams}
|
||||
priceCents={item.priceCents}
|
||||
categoryName={categoryName}
|
||||
categoryIcon={categoryIcon}
|
||||
imageFilename={item.imageFilename}
|
||||
productUrl={item.productUrl}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
)
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user