Refactor code structure and remove redundant changes

src-old/hooks/useSearch.tsx

@@ -0,0 +1,233 @@
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { supabase } from '@/lib/supabaseClient';
+import { Park, Ride, Company } from '@/types/database';
+import * as storage from '@/lib/localStorage';
+import { toast } from 'sonner';
+import { handleNonCriticalError } from '@/lib/errorHandler';
+
+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(() => {
+    const searches = storage.getJSON<string[]>('thrillwiki_recent_searches', []);
+    if (Array.isArray(searches)) {
+      setRecentSearches(searches);
+    }
+  }, []);
+
+  // 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 || undefined,
+            rating: park.average_rating ?? undefined,
+            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 || undefined,
+            rating: ride.average_rating ?? undefined,
+            slug: ride.slug,
+            data: ride
+          });
+        });
+      }
+
+      // Search companies
+      if (types.includes('company')) {
+        const { data: companies } = await supabase
+          .from('companies')
+          .select('id, name, slug, description, company_type, logo_url, average_rating, review_count')
+          .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 || undefined,
+            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: unknown) {
+      handleNonCriticalError(error, {
+        action: 'Search',
+        metadata: { query: searchQuery, types },
+      });
+      
+      toast.error('Search failed', {
+        description: 'Unable to search. Please try again.',
+      });
+      
+      setError('Failed to search. Please try again.');
+      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);
+    storage.setJSON('thrillwiki_recent_searches', updated);
+  };
+
+  // Clear recent searches
+  const clearRecentSearches = () => {
+    setRecentSearches([]);
+    storage.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
+  };
+}