Refactor code structure and remove redundant changes

2025-12-21 19:31:14 -05:00 · 2025-11-09 16:31:34 -05:00
parent 2884bc23ce
commit eb68cf40c6
1080 changed files with 27361 additions and 56687 deletions
--- a/src-old/components/admin/HeadquartersLocationInput.tsx
+++ b/src-old/components/admin/HeadquartersLocationInput.tsx
@@ -0,0 +1,192 @@
+import { useState, useEffect } from 'react';
+import { Input } from '@/components/ui/input';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Search, Edit, MapPin, Loader2, X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { handleNonCriticalError } from '@/lib/errorHandler';
+
+interface LocationResult {
+  place_id: number;
+  display_name: string;
+  address?: {
+    city?: string;
+    town?: string;
+    village?: string;
+    state?: string;
+    country?: string;
+  };
+}
+
+interface HeadquartersLocationInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function HeadquartersLocationInput({
+  value,
+  onChange,
+  disabled = false,
+  className
+}: HeadquartersLocationInputProps): React.JSX.Element {
+  const [mode, setMode] = useState<'search' | 'manual'>('search');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [results, setResults] = useState<LocationResult[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const [showResults, setShowResults] = useState(false);
+
+  // Debounced search effect
+  useEffect(() => {
+    if (!searchQuery || searchQuery.length < 2) {
+      setResults([]);
+      setShowResults(false);
+      return;
+    }
+
+    const timeoutId = setTimeout(async (): Promise<void> => {
+      setIsSearching(true);
+      try {
+        const response = await fetch(
+          `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(
+            searchQuery
+          )}&limit=5&addressdetails=1`,
+          {
+            headers: {
+              'User-Agent': 'ThemeParkArchive/1.0'
+            }
+          }
+        );
+        
+        if (response.ok) {
+          const data = await response.json() as LocationResult[];
+          setResults(data);
+          setShowResults(true);
+        }
+      } catch (error) {
+        handleNonCriticalError(error, {
+          action: 'Search headquarters locations',
+          metadata: { query: searchQuery }
+        });
+      } finally {
+        setIsSearching(false);
+      }
+    }, 500);
+
+    return () => clearTimeout(timeoutId);
+  }, [searchQuery]);
+
+  const formatLocation = (result: LocationResult): string => {
+    const { city, town, village, state, country } = result.address || {};
+    const cityName = city || town || village;
+    
+    if (cityName && state && country) {
+      return `${cityName}, ${state}, ${country}`;
+    } else if (cityName && country) {
+      return `${cityName}, ${country}`;
+    } else if (country) {
+      return country;
+    }
+    return result.display_name;
+  };
+
+  const handleSelectLocation = (result: LocationResult): void => {
+    const formatted = formatLocation(result);
+    onChange(formatted);
+    setSearchQuery('');
+    setShowResults(false);
+    setResults([]);
+  };
+
+  const handleClear = (): void => {
+    onChange('');
+    setSearchQuery('');
+    setResults([]);
+    setShowResults(false);
+  };
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      <Tabs value={mode} onValueChange={(val) => setMode(val as 'search' | 'manual')}>
+        <TabsList className="grid w-full grid-cols-2">
+          <TabsTrigger value="search" disabled={disabled}>
+            <Search className="w-4 h-4 mr-2" />
+            Search Location
+          </TabsTrigger>
+          <TabsTrigger value="manual" disabled={disabled}>
+            <Edit className="w-4 h-4 mr-2" />
+            Manual Entry
+          </TabsTrigger>
+        </TabsList>
+        
+        <TabsContent value="search" className="space-y-2 mt-4">
+          <div className="relative">
+            <Input
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Search for location (e.g., Munich, Germany)..."
+              disabled={disabled}
+              className="pr-10"
+            />
+            {isSearching && (
+              <Loader2 className="w-4 h-4 absolute right-3 top-3 animate-spin text-muted-foreground" />
+            )}
+          </div>
+
+          {showResults && results.length > 0 && (
+            <div className="border rounded-md bg-card max-h-48 overflow-y-auto">
+              {results.map((result) => (
+                <button
+                  key={result.place_id}
+                  type="button"
+                  onClick={() => handleSelectLocation(result)}
+                  className="w-full text-left px-3 py-2 hover:bg-accent hover:text-accent-foreground text-sm flex items-start gap-2 transition-colors"
+                  disabled={disabled}
+                >
+                  <MapPin className="w-4 h-4 mt-0.5 flex-shrink-0 text-muted-foreground" />
+                  <span className="flex-1">{formatLocation(result)}</span>
+                </button>
+              ))}
+            </div>
+          )}
+
+          {showResults && results.length === 0 && !isSearching && (
+            <p className="text-sm text-muted-foreground px-3 py-2">
+              No locations found. Try a different search term.
+            </p>
+          )}
+
+          {value && (
+            <div className="flex items-center gap-2 p-3 bg-muted rounded-md">
+              <MapPin className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+              <span className="text-sm flex-1">{value}</span>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={handleClear}
+                disabled={disabled}
+                className="h-6 px-2"
+              >
+                <X className="w-3 h-3" />
+              </Button>
+            </div>
+          )}
+        </TabsContent>
+        
+        <TabsContent value="manual" className="mt-4">
+          <Input
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder="Enter location manually..."
+            disabled={disabled}
+          />
+          <p className="text-xs text-muted-foreground mt-2">
+            Enter any location text. For better data quality, use Search mode.
+          </p>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}