Jean-Luc Makiola
37edd0edfd
- Add useGlobalItemPrices and useGlobalItemCommunityStats hooks - Add MarketPricesSection component with user's market MSRP prominent - Show community price stats per market with median and report count - Collapsible "Other Markets" section (collapsed by default) - Import useCurrency, useExchangeRates, formatPrice for market display Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
361 lines
11 KiB
TypeScript
361 lines
11 KiB
TypeScript
import { createFileRoute, Link } from "@tanstack/react-router";
|
|
import { useState } from "react";
|
|
import { GearImage, imageContainerBg } from "../../components/GearImage";
|
|
import { useAuth } from "../../hooks/useAuth";
|
|
import { useCurrency } from "../../hooks/useCurrency";
|
|
import { useExchangeRates } from "../../hooks/useExchangeRates";
|
|
import { useFormatters } from "../../hooks/useFormatters";
|
|
import {
|
|
useGlobalItem,
|
|
useGlobalItemCommunityStats,
|
|
useGlobalItemPrices,
|
|
} from "../../hooks/useGlobalItems";
|
|
import { formatPrice, type Currency } from "../../lib/formatters";
|
|
import { LucideIcon } from "../../lib/iconData";
|
|
import { useUIStore } from "../../stores/uiStore";
|
|
|
|
export const Route = createFileRoute("/global-items/$globalItemId")({
|
|
component: GlobalItemDetail,
|
|
});
|
|
|
|
function GlobalItemDetail() {
|
|
const { globalItemId } = Route.useParams();
|
|
const { data: item, isLoading, error } = useGlobalItem(Number(globalItemId));
|
|
const { weight, price } = useFormatters();
|
|
const { data: auth } = useAuth();
|
|
const isAuthenticated = !!auth?.user;
|
|
const openAddToCollection = useUIStore((s) => s.openAddToCollection);
|
|
const openAddToThread = useUIStore((s) => s.openAddToThread);
|
|
const openAuthPrompt = useUIStore((s) => s.openAuthPrompt);
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
|
<div className="animate-pulse space-y-6">
|
|
<div className="h-4 bg-gray-100 rounded w-24" />
|
|
<div className="aspect-[16/9] bg-gray-100 rounded-xl" />
|
|
<div className="space-y-3">
|
|
<div className="h-3 bg-gray-100 rounded w-20" />
|
|
<div className="h-6 bg-gray-100 rounded w-48" />
|
|
<div className="h-4 bg-gray-100 rounded w-full" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error || !item) {
|
|
return (
|
|
<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
|
<Link
|
|
to="/global-items"
|
|
className="text-sm text-gray-400 hover:text-gray-600 transition-colors"
|
|
>
|
|
← Back to catalog
|
|
</Link>
|
|
<div className="text-center py-16">
|
|
<p className="text-sm text-gray-500">Global item not found</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
|
<div className="mb-6">
|
|
<Link
|
|
to="/global-items"
|
|
className="text-sm text-gray-400 hover:text-gray-600 transition-colors"
|
|
>
|
|
← Back to catalog
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Image */}
|
|
<div
|
|
className="aspect-[16/9] rounded-xl overflow-hidden"
|
|
style={{
|
|
backgroundColor: item.imageUrl
|
|
? imageContainerBg(item.dominantColor)
|
|
: undefined,
|
|
}}
|
|
>
|
|
{item.imageUrl ? (
|
|
<GearImage
|
|
src={item.imageUrl}
|
|
alt={`${item.brand} ${item.model}`}
|
|
dominantColor={item.dominantColor}
|
|
cropZoom={item.cropZoom}
|
|
cropX={item.cropX}
|
|
cropY={item.cropY}
|
|
/>
|
|
) : (
|
|
<div className="w-full h-full bg-gray-50 flex flex-col items-center justify-center">
|
|
<svg
|
|
className="w-16 h-16 text-gray-300"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
strokeWidth={1.5}
|
|
>
|
|
<path d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
|
|
</svg>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Attribution */}
|
|
{(item.imageCredit || item.imageSourceUrl) && (
|
|
<p className="text-xs text-gray-400 mt-1 mb-6">
|
|
{item.imageCredit && <span>Photo: {item.imageCredit}</span>}
|
|
{item.imageCredit && item.imageSourceUrl && <span> · </span>}
|
|
{item.imageSourceUrl && (
|
|
<a
|
|
href={item.imageSourceUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="underline hover:text-gray-600 transition-colors"
|
|
>
|
|
Source
|
|
</a>
|
|
)}
|
|
</p>
|
|
)}
|
|
{!(item.imageCredit || item.imageSourceUrl) && <div className="mb-6" />}
|
|
|
|
{/* Header */}
|
|
<div className="mb-6">
|
|
<p className="text-xs font-medium text-gray-400 uppercase tracking-wide mb-1">
|
|
{item.brand}
|
|
</p>
|
|
<h1 className="text-2xl font-bold text-gray-900 mb-3">{item.model}</h1>
|
|
|
|
{/* Owner count badge */}
|
|
<div className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-amber-50 text-amber-600 rounded-full text-xs font-medium">
|
|
<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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"
|
|
/>
|
|
</svg>
|
|
{item.ownerCount === 0
|
|
? "Be the first to add this"
|
|
: item.ownerCount === 1
|
|
? "1 user owns this"
|
|
: `${item.ownerCount} users own this`}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Specs */}
|
|
<div className="flex flex-wrap gap-2 mb-6">
|
|
{item.weightGrams != null && (
|
|
<span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-50 text-blue-500">
|
|
{weight(item.weightGrams)}
|
|
</span>
|
|
)}
|
|
{item.priceCents != null && (
|
|
<span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-50 text-green-500">
|
|
{price(item.priceCents)}
|
|
</span>
|
|
)}
|
|
{item.category && (
|
|
<span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-50 text-gray-600">
|
|
{item.category}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Action buttons */}
|
|
<div className="flex gap-3 mb-6">
|
|
{/* Add to Collection — desktop */}
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
if (!isAuthenticated) {
|
|
openAuthPrompt();
|
|
return;
|
|
}
|
|
openAddToCollection(item.id, `${item.brand} ${item.model}`);
|
|
}}
|
|
className="hidden md:inline-flex items-center gap-2 bg-gray-700 text-white rounded-lg px-5 py-2.5 text-sm font-medium hover:bg-gray-800 transition-colors"
|
|
>
|
|
Add to Collection
|
|
</button>
|
|
{/* Add to Collection — mobile */}
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
if (!isAuthenticated) {
|
|
openAuthPrompt();
|
|
return;
|
|
}
|
|
openAddToCollection(item.id, `${item.brand} ${item.model}`);
|
|
}}
|
|
className="md:hidden inline-flex items-center justify-center min-w-[44px] min-h-[44px] p-2.5 bg-gray-700 text-white rounded-lg hover:bg-gray-800 transition-colors"
|
|
aria-label="Add to Collection"
|
|
title="Add to Collection"
|
|
>
|
|
<LucideIcon name="plus" size={16} />
|
|
</button>
|
|
{/* Add to Thread — desktop */}
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
if (!isAuthenticated) {
|
|
openAuthPrompt();
|
|
return;
|
|
}
|
|
openAddToThread(item.id, `${item.brand} ${item.model}`);
|
|
}}
|
|
className="hidden md:inline-flex items-center gap-2 bg-white text-gray-700 border border-gray-200 rounded-lg px-5 py-2.5 text-sm font-medium hover:bg-gray-50 transition-colors"
|
|
>
|
|
Add to Thread
|
|
</button>
|
|
{/* Add to Thread — mobile */}
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
if (!isAuthenticated) {
|
|
openAuthPrompt();
|
|
return;
|
|
}
|
|
openAddToThread(item.id, `${item.brand} ${item.model}`);
|
|
}}
|
|
className="md:hidden inline-flex items-center justify-center min-w-[44px] min-h-[44px] p-2.5 bg-white text-gray-700 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
|
|
aria-label="Add to Thread"
|
|
title="Add to Thread"
|
|
>
|
|
<LucideIcon name="message-square-plus" size={16} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Description */}
|
|
{item.description && (
|
|
<div className="prose prose-sm prose-gray max-w-none">
|
|
<p className="text-gray-600 leading-relaxed">{item.description}</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Market Prices Section */}
|
|
<MarketPricesSection globalItemId={Number(globalItemId)} />
|
|
|
|
{/* Product page link */}
|
|
{item.sourceUrl && (
|
|
<div className="mt-4">
|
|
<a
|
|
href={item.sourceUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-sm text-blue-500 hover:text-blue-600 underline transition-colors"
|
|
>
|
|
View product page →
|
|
</a>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function MarketPricesSection({
|
|
globalItemId,
|
|
}: { globalItemId: number }) {
|
|
const { market: userMarket } = useCurrency();
|
|
const { price } = useFormatters();
|
|
const { data: pricesData } = useGlobalItemPrices(globalItemId);
|
|
const { data: communityStats } = useGlobalItemCommunityStats(globalItemId);
|
|
const [showOtherMarkets, setShowOtherMarkets] = useState(false);
|
|
|
|
const marketPrices = pricesData?.marketPrices ?? [];
|
|
const stats = communityStats ?? [];
|
|
|
|
// No data at all — don't render section
|
|
if (marketPrices.length === 0 && stats.length === 0) return null;
|
|
|
|
const userMarketPrice = marketPrices.find((p) => p.market === userMarket);
|
|
const otherMarketPrices = marketPrices.filter(
|
|
(p) => p.market !== userMarket,
|
|
);
|
|
const userMarketStats = stats.filter((s) => s.market === userMarket);
|
|
const otherMarketStats = stats.filter((s) => s.market !== userMarket);
|
|
|
|
return (
|
|
<div className="mt-6 mb-6">
|
|
<h3 className="text-sm font-medium text-gray-900 mb-3">Price</h3>
|
|
|
|
{/* User's market MSRP */}
|
|
{userMarketPrice && (
|
|
<div className="mb-2">
|
|
<span className="text-lg font-semibold text-gray-900">
|
|
{formatPrice(userMarketPrice.priceCents, userMarketPrice.currency as Currency)}
|
|
</span>
|
|
<span className="text-xs text-gray-500 ml-2">
|
|
MSRP ({userMarketPrice.market})
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Community stats for user's market */}
|
|
{userMarketStats.map((stat) => (
|
|
<p key={`${stat.market}-${stat.currency}`} className="text-sm text-gray-700 mb-1">
|
|
Community ({stat.market}):{" "}
|
|
{formatPrice(stat.medianPrice, stat.currency as Currency)} median{" "}
|
|
<span className="text-xs text-gray-400">
|
|
({stat.reportCount} reports)
|
|
</span>
|
|
</p>
|
|
))}
|
|
|
|
{/* Other Markets collapsible */}
|
|
{(otherMarketPrices.length > 0 || otherMarketStats.length > 0) && (
|
|
<div className="mt-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowOtherMarkets(!showOtherMarkets)}
|
|
className="text-sm text-gray-500 cursor-pointer hover:text-gray-700 flex items-center gap-1"
|
|
>
|
|
<LucideIcon
|
|
name={showOtherMarkets ? "chevron-down" : "chevron-right"}
|
|
size={14}
|
|
/>
|
|
Other Markets
|
|
</button>
|
|
{showOtherMarkets && (
|
|
<div className="pl-4 mt-2 space-y-1">
|
|
{otherMarketPrices.map((p) => (
|
|
<div key={`${p.market}-${p.currency}`}>
|
|
<span className="text-sm font-medium text-gray-900">
|
|
{formatPrice(p.priceCents, p.currency as Currency)}
|
|
</span>
|
|
<span className="text-xs text-gray-500 ml-2">
|
|
MSRP ({p.market})
|
|
</span>
|
|
</div>
|
|
))}
|
|
{otherMarketStats.map((stat) => (
|
|
<p
|
|
key={`${stat.market}-${stat.currency}`}
|
|
className="text-sm text-gray-700"
|
|
>
|
|
Community ({stat.market}):{" "}
|
|
{formatPrice(stat.medianPrice, stat.currency as Currency)}{" "}
|
|
median{" "}
|
|
<span className="text-xs text-gray-400">
|
|
({stat.reportCount} reports)
|
|
</span>
|
|
</p>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|