SkateSpots/src/hooks/useShops.ts
shakespeare.diy bd3e4bee4e perf: lazy loading, faster timeouts, better caching, chunk splitting
- AppRouter: lazy load all 40+ pages (only Index is eager)
  → initial JS bundle no longer includes code for pages never visited

- MapPage: lazy load SpotMap/Leaflet (~150KB) behind Suspense
  → Leaflet only downloads when user navigates to /map

- useSkateSpots/useShops/useMarketplace/useTours:
  → timeout: 30s → 8s (fail fast, show error sooner)
  → staleTime: 30s → 5min (trust cache, fewer relay round-trips)
  → gcTime: 5min → 30min (keep data in memory longer)
  → refetchOnMount: 'always' → true (use cache when data is fresh)

- Remove console.log/warn/debug spam from production hooks

- vite.config: manual chunk splitting for leaflet, nostr-tools, bitcoin
  libs, radix-ui, react-router — each chunk cached independently
  by browser, only re-downloaded when that library updates

- vite.config: esbuild drops console.log/warn/debug in prod build

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
2026-06-18 11:32:24 +07:00

199 lines
5.6 KiB
TypeScript

import { useQuery } from '@tanstack/react-query';
import { SKATE_SHOP_KIND, SKATE_SPOT_KIND, parseSkateShop, parseSkateSpot, type SkateShop } from '@/lib/types';
import { useSkateRelays } from '@/hooks/useSkateRelays';
export function useShops(limit = 100) {
const { querySkateContent, getQueryKeySuffix } = useSkateRelays();
return useQuery({
queryKey: ['skate-shops', limit, getQueryKeySuffix()],
queryFn: async () => {
const signal = AbortSignal.timeout(10000);
// Query new shop kind (30017)
const newShops = await querySkateContent(
[
{
kinds: [SKATE_SHOP_KIND],
'#t': ['skateshop'],
limit,
},
],
{ signal }
);
// Query old shops (kind 30818 with 'shop' type) for backward compatibility
const oldShops = await querySkateContent(
[
{
kinds: [SKATE_SPOT_KIND],
'#t': ['shop'],
limit,
},
],
{ signal }
);
const allEvents = [...newShops, ...oldShops];
const shops: SkateShop[] = [];
for (const event of allEvents) {
// Try parsing as new shop (kind 30017)
let shop = parseSkateShop(event);
// If that fails, try parsing as old spot and convert to shop
if (!shop && event.kind === SKATE_SPOT_KIND) {
const spot = parseSkateSpot(event);
if (spot && spot.types.includes('shop')) {
// Convert old spot-type shop to new shop format
shop = {
id: spot.id,
pubkey: spot.pubkey,
identifier: spot.identifier,
name: spot.title,
description: spot.description,
geohash: spot.geohash,
location: spot.location,
images: spot.images,
phone: undefined,
email: undefined,
website: undefined,
instagram: undefined,
hours: undefined,
createdAt: spot.createdAt,
event: spot.event,
};
}
}
if (shop) {
shops.push(shop);
}
}
// Sort by created_at descending
return shops.sort((a, b) => b.createdAt - a.createdAt);
},
staleTime: 5 * 60 * 1000,
gcTime: 30 * 60 * 1000,
refetchOnMount: true,
});
}
export function useShop(identifier: string, pubkey?: string) {
const { querySkateContent, getQueryKeySuffix } = useSkateRelays();
return useQuery({
queryKey: ['skate-shop', identifier, pubkey, getQueryKeySuffix()],
queryFn: async () => {
const signal = AbortSignal.timeout(10000);
// Query new shop format (kind 30017)
const newFilter: {
kinds: number[];
'#d': string[];
authors?: string[];
limit: number;
} = {
kinds: [SKATE_SHOP_KIND],
'#d': [identifier],
limit: 1,
};
if (pubkey) newFilter.authors = [pubkey];
const newShops = await querySkateContent([newFilter], { signal });
// Query old shop format (kind 30818 with 'shop' type) for backward compatibility
const oldFilter: {
kinds: number[];
'#d': string[];
'#t': string[];
authors?: string[];
limit: number;
} = {
kinds: [SKATE_SPOT_KIND],
'#d': [identifier],
'#t': ['shop'],
limit: 1,
};
if (pubkey) oldFilter.authors = [pubkey];
const oldShops = await querySkateContent([oldFilter], { signal });
const allEvents = [...newShops, ...oldShops];
if (allEvents.length === 0) return null;
// If multiple events, take the most recent
const mostRecent = allEvents.reduce((latest, current) =>
current.created_at > latest.created_at ? current : latest
);
// Try parsing as new shop first
let shop = parseSkateShop(mostRecent);
// If that fails, try parsing as old spot and convert
if (!shop && mostRecent.kind === SKATE_SPOT_KIND) {
const spot = parseSkateSpot(mostRecent);
if (spot && spot.types.includes('shop')) {
shop = {
id: spot.id,
pubkey: spot.pubkey,
identifier: spot.identifier,
name: spot.title,
description: spot.description,
geohash: spot.geohash,
location: spot.location,
images: spot.images,
phone: undefined,
email: undefined,
website: undefined,
instagram: undefined,
hours: undefined,
createdAt: spot.createdAt,
event: spot.event,
};
}
}
return shop;
},
enabled: !!identifier,
staleTime: 5 * 60 * 1000,
gcTime: 30 * 60 * 1000,
refetchOnMount: true,
});
}
export function useUserShops(pubkey: string) {
const { querySkateContent, getQueryKeySuffix } = useSkateRelays();
return useQuery({
queryKey: ['user-skate-shops', pubkey, getQueryKeySuffix()],
queryFn: async () => {
const signal = AbortSignal.timeout(10000);
const events = await querySkateContent(
[
{
kinds: [SKATE_SHOP_KIND],
authors: [pubkey],
'#t': ['skateshop'],
limit: 50,
},
],
{ signal }
);
const shops: SkateShop[] = [];
for (const event of events) {
const shop = parseSkateShop(event);
if (shop) shops.push(shop);
}
return shops.sort((a, b) => b.createdAt - a.createdAt);
},
enabled: !!pubkey,
staleTime: 5 * 60 * 1000,
gcTime: 30 * 60 * 1000,
refetchOnMount: true,
});
}