Files
thrilltrack-explorer/src/hooks/useSearch.tsx
pac7 b580db3fb0 Improve error handling and stability across the application
Refactor error handling in `useEntityVersions` and `useSearch` hooks, enhance `NotificationService` with better error extraction and logging, and implement critical fallback mechanisms in the `detect-location` function's rate limit cleanup. Update CORS configuration in `upload-image` function for stricter origin checks and better security.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: f4df1950-6410-48d0-b2de-f4096732504b
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
2025-10-08 20:23:01 +00:00

241 lines
7.3 KiB
TypeScript

import { useState, useEffect, useMemo, useCallback } from 'react';
import { supabase } from '@/integrations/supabase/client';
import { Park, Ride, Company } from '@/types/database';
export interface SearchResult {
id: string;
type: 'park' | 'ride' | 'company';
title: string;
subtitle: string;
image?: string;
rating?: number;
slug?: string;
data: Park | Ride | Company;
}
interface UseSearchOptions {
types?: ('park' | 'ride' | 'company')[];
limit?: number;
minQuery?: number;
debounceMs?: number;
}
// Hoist default values to prevent recreating on every render
const DEFAULT_TYPES: ('park' | 'ride' | 'company')[] = ['park', 'ride', 'company'];
const DEFAULT_LIMIT = 10;
const DEFAULT_MIN_QUERY = 2;
const DEFAULT_DEBOUNCE_MS = 300;
export function useSearch(options: UseSearchOptions = {}) {
// All hooks declarations in stable order
const [query, setQuery] = useState('');
const [results, setResults] = useState<SearchResult[]>([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [recentSearches, setRecentSearches] = useState<string[]>([]);
const [debouncedQuery, setDebouncedQuery] = useState('');
// Use useMemo to stabilize options, but use safe defaults to prevent undefined errors during HMR
const stableOptions = useMemo(() => {
const safeOptions = options || {};
return {
types: safeOptions.types || DEFAULT_TYPES,
limit: safeOptions.limit ?? DEFAULT_LIMIT,
minQuery: safeOptions.minQuery ?? DEFAULT_MIN_QUERY,
debounceMs: safeOptions.debounceMs ?? DEFAULT_DEBOUNCE_MS,
};
}, [options]);
const { types, limit, minQuery, debounceMs } = stableOptions;
useEffect(() => {
const timer = setTimeout(() => {
setDebouncedQuery(query);
}, debounceMs);
return () => clearTimeout(timer);
}, [query, debounceMs]);
// Load recent searches from localStorage
useEffect(() => {
try {
const stored = localStorage.getItem('thrillwiki_recent_searches');
if (stored) {
try {
const parsed = JSON.parse(stored);
if (Array.isArray(parsed)) {
setRecentSearches(parsed);
} else {
// Invalid format, clear it
console.warn('Recent searches data is not an array, clearing');
localStorage.removeItem('thrillwiki_recent_searches');
}
} catch (parseError) {
// JSON parse failed, data is corrupted
console.error('Failed to parse recent searches from localStorage:', parseError);
localStorage.removeItem('thrillwiki_recent_searches');
}
}
} catch (error) {
// localStorage access failed
console.error('Error accessing localStorage:', error);
}
}, []);
// Search function
const search = useCallback(async (searchQuery: string) => {
if (searchQuery.length < minQuery) {
setResults([]);
setError(null);
return;
}
setLoading(true);
setError(null);
try {
const searchResults: SearchResult[] = [];
// Search parks
if (types.includes('park')) {
const { data: parks } = await supabase
.from('parks')
.select(`
*,
location:locations(*),
operator:companies!parks_operator_id_fkey(*)
`)
.or(`name.ilike.%${searchQuery}%,description.ilike.%${searchQuery}%`)
.limit(Math.ceil(limit / types.length));
parks?.forEach((park) => {
searchResults.push({
id: park.id,
type: 'park',
title: park.name,
subtitle: [park.location?.city, park.location?.state_province, park.location?.country].filter(Boolean).join(', '),
image: park.banner_image_url || park.card_image_url,
rating: park.average_rating,
slug: park.slug,
data: park
});
});
}
// Search rides
if (types.includes('ride')) {
const { data: rides } = await supabase
.from('rides')
.select(`
*,
park:parks!inner(name, slug),
manufacturer:companies!rides_manufacturer_id_fkey(*)
`)
.or(`name.ilike.%${searchQuery}%,description.ilike.%${searchQuery}%`)
.limit(Math.ceil(limit / types.length));
rides?.forEach((ride) => {
searchResults.push({
id: ride.id,
type: 'ride',
title: ride.name,
subtitle: `at ${ride.park?.name || 'Unknown Park'}`,
image: ride.image_url,
rating: ride.average_rating,
slug: ride.slug,
data: ride
});
});
}
// Search companies
if (types.includes('company')) {
const { data: companies } = await supabase
.from('companies')
.select('*')
.or(`name.ilike.%${searchQuery}%,description.ilike.%${searchQuery}%`)
.limit(Math.ceil(limit / types.length));
companies?.forEach((company) => {
searchResults.push({
id: company.id,
type: 'company',
title: company.name,
subtitle: company.company_type?.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase()) || 'Company',
image: company.logo_url,
slug: company.slug,
data: company
});
});
}
// Sort by relevance (exact matches first, then partial matches)
searchResults.sort((a, b) => {
const aExact = a.title.toLowerCase().startsWith(searchQuery.toLowerCase());
const bExact = b.title.toLowerCase().startsWith(searchQuery.toLowerCase());
if (aExact && !bExact) return -1;
if (!aExact && bExact) return 1;
return a.title.localeCompare(b.title);
});
setResults(searchResults.slice(0, limit));
} catch (error) {
console.error('Search error:', error);
const errorMessage = error instanceof Error ? error.message : 'Failed to search. Please try again.';
setError(errorMessage);
setResults([]);
} finally {
setLoading(false);
}
}, [types, limit, minQuery]);
// Effect for debounced search
useEffect(() => {
if (debouncedQuery) {
search(debouncedQuery);
} else {
setResults([]);
}
}, [debouncedQuery, search]);
// Save search to recent searches
const saveSearch = (searchQuery: string) => {
if (!searchQuery.trim()) return;
const updated = [searchQuery, ...recentSearches.filter(s => s !== searchQuery)].slice(0, 5);
setRecentSearches(updated);
localStorage.setItem('thrillwiki_recent_searches', JSON.stringify(updated));
};
// Clear recent searches
const clearRecentSearches = () => {
setRecentSearches([]);
localStorage.removeItem('thrillwiki_recent_searches');
};
// Get suggestions (recent searches when no query)
const suggestions = useMemo(() => {
if (query.length > 0) return [];
return recentSearches.map(search => ({
id: search,
type: 'suggestion' as const,
title: search,
subtitle: 'Recent search',
data: null
}));
}, [query, recentSearches]);
return {
query,
setQuery,
results,
suggestions,
loading,
error,
recentSearches,
saveSearch,
clearRecentSearches,
search
};
}