mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-22 20:51:13 -05:00
Refactor code structure and remove redundant changes
This commit is contained in:
pacnpal
397
src-old/components/search/AutocompleteSearch.tsx
Normal file
397
src-old/components/search/AutocompleteSearch.tsx
Normal file
@@ -0,0 +1,397 @@
|
||||
import { useRef, useEffect, useState } from 'react';
|
||||
import { Search, X, Clock, Zap, Castle, FerrisWheel, Factory } from 'lucide-react';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { useSearch, SearchResult } from '@/hooks/useSearch';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useToast } from '@/components/ui/use-toast';
|
||||
|
||||
interface AutocompleteSearchProps {
|
||||
onResultSelect?: (result: SearchResult) => void;
|
||||
onSearch?: (query: string) => void;
|
||||
placeholder?: string;
|
||||
className?: string;
|
||||
types?: ('park' | 'ride' | 'company')[];
|
||||
limit?: number;
|
||||
showRecentSearches?: boolean;
|
||||
variant?: 'default' | 'hero';
|
||||
}
|
||||
|
||||
const DEFAULT_SEARCH_TYPES: ('park' | 'ride' | 'company')[] = ['park', 'ride', 'company'];
|
||||
|
||||
export function AutocompleteSearch({
|
||||
onResultSelect,
|
||||
onSearch,
|
||||
placeholder = "Search parks, rides, or companies...",
|
||||
className = "",
|
||||
types = DEFAULT_SEARCH_TYPES,
|
||||
limit = 8,
|
||||
showRecentSearches = true,
|
||||
variant = 'default'
|
||||
}: AutocompleteSearchProps) {
|
||||
const navigate = useNavigate();
|
||||
const { toast } = useToast();
|
||||
const searchRef = useRef<HTMLDivElement>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [selectedIndex, setSelectedIndex] = useState(-1);
|
||||
|
||||
const {
|
||||
query,
|
||||
setQuery,
|
||||
results,
|
||||
suggestions,
|
||||
loading,
|
||||
saveSearch,
|
||||
clearRecentSearches
|
||||
} = useSearch({ types, limit });
|
||||
|
||||
const displayItems = query.length > 0 ? results : (showRecentSearches ? suggestions : []);
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (searchRef.current && !searchRef.current.contains(event.target as Node)) {
|
||||
setIsOpen(false);
|
||||
setSelectedIndex(-1);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
// Handle keyboard navigation
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (!isOpen) return;
|
||||
|
||||
switch (event.key) {
|
||||
case 'ArrowDown':
|
||||
event.preventDefault();
|
||||
setSelectedIndex(prev => Math.min(prev + 1, displayItems.length - 1));
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
event.preventDefault();
|
||||
setSelectedIndex(prev => Math.max(prev - 1, -1));
|
||||
break;
|
||||
case 'Enter':
|
||||
event.preventDefault();
|
||||
if (selectedIndex >= 0 && displayItems[selectedIndex]) {
|
||||
handleResultClick(displayItems[selectedIndex]);
|
||||
} else if (query) {
|
||||
handleSearch();
|
||||
}
|
||||
break;
|
||||
case 'Escape':
|
||||
setIsOpen(false);
|
||||
setSelectedIndex(-1);
|
||||
inputRef.current?.blur();
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
return () => document.removeEventListener('keydown', handleKeyDown);
|
||||
}, [isOpen, selectedIndex, displayItems, query]);
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value;
|
||||
setQuery(value);
|
||||
setIsOpen(true);
|
||||
setSelectedIndex(-1);
|
||||
};
|
||||
|
||||
const handleInputFocus = () => {
|
||||
setIsOpen(true);
|
||||
};
|
||||
|
||||
type SearchResultOrSuggestion = SearchResult | {
|
||||
id: string;
|
||||
type: 'suggestion';
|
||||
title: string;
|
||||
subtitle: string;
|
||||
data: Record<string, unknown> | null;
|
||||
};
|
||||
|
||||
const handleResultClick = (result: SearchResultOrSuggestion) => {
|
||||
if (result.type === 'suggestion') {
|
||||
setQuery(result.title);
|
||||
setIsOpen(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const searchResult = result as SearchResult;
|
||||
saveSearch(searchResult.title);
|
||||
|
||||
if (onResultSelect) {
|
||||
onResultSelect(searchResult);
|
||||
} else {
|
||||
// Default navigation with null/undefined safety checks
|
||||
switch (searchResult.type) {
|
||||
case 'park':
|
||||
const parkIdentifier = searchResult.slug || searchResult.id;
|
||||
if (parkIdentifier) {
|
||||
navigate(`/parks/${parkIdentifier}`);
|
||||
} else {
|
||||
toast({
|
||||
title: "Navigation Error",
|
||||
description: "Unable to navigate to this park. Missing park identifier.",
|
||||
variant: "destructive",
|
||||
});
|
||||
navigate(`/search?q=${encodeURIComponent(searchResult.title)}`);
|
||||
}
|
||||
break;
|
||||
case 'ride':
|
||||
const parkSlug = (searchResult.data as { park?: { slug?: string } })?.park?.slug;
|
||||
const rideSlug = searchResult.slug;
|
||||
const rideId = searchResult.id;
|
||||
|
||||
if (parkSlug && rideSlug) {
|
||||
navigate(`/parks/${parkSlug}/rides/${rideSlug}`);
|
||||
} else if (rideId) {
|
||||
navigate(`/rides/${rideId}`);
|
||||
} else {
|
||||
toast({
|
||||
title: "Navigation Error",
|
||||
description: "Unable to navigate to this ride. Missing ride identifier.",
|
||||
variant: "destructive",
|
||||
});
|
||||
navigate(`/search?q=${encodeURIComponent(searchResult.title)}`);
|
||||
}
|
||||
break;
|
||||
case 'company':
|
||||
const companyType = (searchResult.data as { company_type?: string })?.company_type;
|
||||
const companySlug = searchResult.slug;
|
||||
|
||||
if (companyType && companySlug) {
|
||||
switch (companyType) {
|
||||
case 'operator':
|
||||
navigate(`/operators/${companySlug}`);
|
||||
break;
|
||||
case 'property_owner':
|
||||
navigate(`/owners/${companySlug}`);
|
||||
break;
|
||||
case 'manufacturer':
|
||||
navigate(`/manufacturers/${companySlug}`);
|
||||
break;
|
||||
case 'designer':
|
||||
navigate(`/designers/${companySlug}`);
|
||||
break;
|
||||
default:
|
||||
toast({
|
||||
title: "Unknown Company Type",
|
||||
description: `Unable to navigate to this company type. Showing search results instead.`,
|
||||
variant: "default",
|
||||
});
|
||||
navigate(`/search?q=${encodeURIComponent(searchResult.title)}`);
|
||||
}
|
||||
} else {
|
||||
toast({
|
||||
title: "Navigation Error",
|
||||
description: "Unable to navigate to this company. Missing required information.",
|
||||
variant: "destructive",
|
||||
});
|
||||
navigate(`/search?q=${encodeURIComponent(searchResult.title)}`);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
setIsOpen(false);
|
||||
setSelectedIndex(-1);
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
if (!query.trim()) return;
|
||||
|
||||
saveSearch(query);
|
||||
|
||||
if (onSearch) {
|
||||
onSearch(query);
|
||||
} else {
|
||||
// Default search behavior - navigate to search results
|
||||
navigate(`/search?q=${encodeURIComponent(query)}`);
|
||||
}
|
||||
|
||||
setIsOpen(false);
|
||||
setSelectedIndex(-1);
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
setQuery('');
|
||||
setIsOpen(false);
|
||||
setSelectedIndex(-1);
|
||||
inputRef.current?.focus();
|
||||
};
|
||||
|
||||
const getResultIcon = (result: SearchResult) => {
|
||||
switch (result.type) {
|
||||
case 'park':
|
||||
return <Castle className="w-5 h-5" />;
|
||||
case 'ride':
|
||||
return <FerrisWheel className="w-5 h-5" />;
|
||||
case 'company':
|
||||
return <Factory className="w-5 h-5" />;
|
||||
default:
|
||||
return <Search className="w-5 h-5" />;
|
||||
}
|
||||
};
|
||||
|
||||
const getTypeColor = (type: string) => {
|
||||
switch (type) {
|
||||
case 'park':
|
||||
return 'bg-primary/10 text-primary border-primary/20';
|
||||
case 'ride':
|
||||
return 'bg-secondary/10 text-secondary border-secondary/20';
|
||||
case 'company':
|
||||
return 'bg-accent/10 text-accent border-accent/20';
|
||||
default:
|
||||
return 'bg-muted text-muted-foreground';
|
||||
}
|
||||
};
|
||||
|
||||
const getTypeLabel = (type: string) => {
|
||||
switch (type) {
|
||||
case 'park':
|
||||
return 'Park';
|
||||
case 'ride':
|
||||
return 'Ride';
|
||||
case 'company':
|
||||
return 'Manufacturer';
|
||||
default:
|
||||
return type.charAt(0).toUpperCase() + type.slice(1);
|
||||
}
|
||||
};
|
||||
|
||||
const isHero = variant === 'hero';
|
||||
|
||||
return (
|
||||
<div ref={searchRef} className={`relative w-full min-w-0 ${className}`}>
|
||||
<div className="relative w-full min-w-0">
|
||||
<Search className={`absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground flex-shrink-0 pointer-events-none ${isHero ? 'w-5 h-5' : 'w-4 h-4'}`} />
|
||||
<Input
|
||||
ref={inputRef}
|
||||
placeholder={placeholder}
|
||||
value={query}
|
||||
onChange={handleInputChange}
|
||||
onFocus={handleInputFocus}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
|
||||
className={`w-full ${isHero ? 'pl-12 pr-28 sm:pr-32 h-14 text-base sm:text-lg rounded-full' : 'pl-10 pr-10'} bg-background/95 backdrop-blur border-border/50 focus:border-primary/50 transition-all duration-300 ${
|
||||
isOpen ? 'shadow-lg shadow-primary/10' : ''
|
||||
}`}
|
||||
/>
|
||||
{query && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleClear}
|
||||
className={`absolute flex-shrink-0 ${isHero ? 'right-16 sm:right-20 top-2 h-10 w-10 min-w-[40px]' : 'right-1 top-1/2 transform -translate-y-1/2 h-8 w-8'} p-0 hover:bg-muted`}
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
</Button>
|
||||
)}
|
||||
{isHero && (
|
||||
<Button
|
||||
onClick={handleSearch}
|
||||
className="absolute right-2 top-2 h-10 px-4 sm:px-6 text-sm sm:text-base min-w-[70px] bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 rounded-full flex-shrink-0"
|
||||
>
|
||||
<span className="hidden xs:inline">Search</span>
|
||||
<Search className="w-4 h-4 xs:hidden" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isOpen && (displayItems.length > 0 || loading) && (
|
||||
<div className={`absolute top-full mt-1 left-0 right-0 bg-popover border border-border rounded-lg shadow-xl z-[100] max-h-96 overflow-y-auto ${isHero ? 'max-w-2xl mx-auto' : ''}`}>
|
||||
<div className="p-2">
|
||||
{query.length === 0 && showRecentSearches && suggestions.length > 0 && (
|
||||
<>
|
||||
<div className="flex items-center justify-between px-3 py-2">
|
||||
<span className="text-sm text-muted-foreground">Recent searches</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={clearRecentSearches}
|
||||
className="text-xs text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Clear
|
||||
</Button>
|
||||
</div>
|
||||
<Separator className="my-2" />
|
||||
</>
|
||||
)}
|
||||
|
||||
{displayItems.length > 0 && displayItems.map((item, index) => (
|
||||
<div
|
||||
key={item.id}
|
||||
onClick={() => handleResultClick(item)}
|
||||
className={`flex items-start gap-2 sm:gap-3 p-2 sm:p-3 rounded-lg cursor-pointer transition-colors ${
|
||||
index === selectedIndex
|
||||
? 'bg-accent/10 border border-accent/20'
|
||||
: 'hover:bg-muted/50'
|
||||
}`}
|
||||
>
|
||||
{item.type === 'suggestion' ? (
|
||||
<>
|
||||
<Clock className="w-4 h-4 text-muted-foreground flex-shrink-0 mt-0.5" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-medium truncate">{item.title}</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-semibold text-foreground text-sm sm:text-base line-clamp-1 text-left">{item.title}</span>
|
||||
<div className="flex items-center gap-2 flex-wrap justify-start">
|
||||
<Badge variant="outline" className={`text-[10px] sm:text-xs font-medium whitespace-nowrap flex-shrink-0 ${getTypeColor(item.type)}`}>
|
||||
{getTypeLabel(item.type)}
|
||||
</Badge>
|
||||
{item.subtitle && (
|
||||
<Badge variant="secondary" className="text-[10px] sm:text-xs whitespace-nowrap flex-shrink-0">
|
||||
{item.subtitle}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{((item as SearchResult).rating ?? 0) > 0 && (
|
||||
<div className="flex items-center gap-1 flex-shrink-0">
|
||||
<Zap className="w-3 h-3 text-yellow-500" />
|
||||
<span className="text-xs sm:text-sm font-medium">{(item as SearchResult).rating!.toFixed(1)}</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{loading && (
|
||||
<div className="flex items-center justify-center p-4">
|
||||
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
|
||||
<span className="text-sm text-muted-foreground ml-2">Searching...</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{query.length > 0 && results.length > 0 && !loading && (
|
||||
<>
|
||||
<Separator className="my-2" />
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={handleSearch}
|
||||
className="w-full text-left justify-start text-primary hover:text-primary hover:bg-primary/10"
|
||||
>
|
||||
<Search className="w-4 h-4 mr-2" />
|
||||
View all results for "{query}"
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user