mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-21 18:51:12 -05:00
Refactor code structure and remove redundant changes
This commit is contained in:
pacnpal
509
src-old/components/settings/LocationTab.tsx
Normal file
509
src-old/components/settings/LocationTab.tsx
Normal file
@@ -0,0 +1,509 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { useProfile } from '@/hooks/useProfile';
|
||||
import { useUnitPreferences } from '@/hooks/useUnitPreferences';
|
||||
import { supabase } from '@/lib/supabaseClient';
|
||||
import { handleError, handleSuccess, handleNonCriticalError, AppError } from '@/lib/errorHandler';
|
||||
import { MapPin, Calendar, Accessibility, Ruler } from 'lucide-react';
|
||||
import type { LocationFormData, AccessibilityOptions, ParkOption } from '@/types/location';
|
||||
import {
|
||||
locationFormSchema,
|
||||
accessibilityOptionsSchema,
|
||||
parkOptionSchema,
|
||||
DEFAULT_ACCESSIBILITY_OPTIONS,
|
||||
COMMON_TIMEZONES
|
||||
} from '@/lib/locationValidation';
|
||||
|
||||
export function LocationTab() {
|
||||
const { user } = useAuth();
|
||||
const { data: profile, refreshProfile } = useProfile(user?.id);
|
||||
const { preferences: unitPreferences, updatePreferences: updateUnitPreferences } = useUnitPreferences();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [parks, setParks] = useState<ParkOption[]>([]);
|
||||
const [accessibility, setAccessibility] = useState<AccessibilityOptions>(DEFAULT_ACCESSIBILITY_OPTIONS);
|
||||
|
||||
const form = useForm<LocationFormData>({
|
||||
resolver: zodResolver(locationFormSchema),
|
||||
defaultValues: {
|
||||
preferred_pronouns: profile?.preferred_pronouns || null,
|
||||
timezone: profile?.timezone || 'UTC',
|
||||
preferred_language: profile?.preferred_language || 'en',
|
||||
personal_location: profile?.personal_location || null,
|
||||
home_park_id: profile?.home_park_id || null
|
||||
}
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (user && profile) {
|
||||
form.reset({
|
||||
preferred_pronouns: profile.preferred_pronouns || null,
|
||||
timezone: profile.timezone || 'UTC',
|
||||
preferred_language: profile.preferred_language || 'en',
|
||||
personal_location: profile.personal_location || null,
|
||||
home_park_id: profile.home_park_id || null
|
||||
});
|
||||
}
|
||||
}, [profile, form]);
|
||||
|
||||
useEffect(() => {
|
||||
if (user) {
|
||||
fetchParks();
|
||||
fetchAccessibilityPreferences();
|
||||
}
|
||||
}, [user]);
|
||||
|
||||
const fetchParks = async () => {
|
||||
if (!user) return;
|
||||
|
||||
try {
|
||||
const { data, error } = await supabase
|
||||
.from('parks')
|
||||
.select('id, name, locations(city, state_province, country)')
|
||||
.order('name');
|
||||
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
const validatedParks = (data || [])
|
||||
.map(park => {
|
||||
try {
|
||||
return parkOptionSchema.parse({
|
||||
id: park.id,
|
||||
name: park.name,
|
||||
location: park.locations ? {
|
||||
city: park.locations.city,
|
||||
state_province: park.locations.state_province,
|
||||
country: park.locations.country
|
||||
} : undefined
|
||||
});
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
})
|
||||
.filter((park): park is ParkOption => park !== null);
|
||||
|
||||
setParks(validatedParks);
|
||||
} catch (error: unknown) {
|
||||
handleError(error, {
|
||||
action: 'Load parks list',
|
||||
userId: user.id
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const fetchAccessibilityPreferences = async () => {
|
||||
if (!user) return;
|
||||
|
||||
try {
|
||||
const { data, error } = await supabase
|
||||
.from('user_preferences')
|
||||
.select('accessibility_options')
|
||||
.eq('user_id', user.id)
|
||||
.maybeSingle();
|
||||
|
||||
if (error && error.code !== 'PGRST116') {
|
||||
throw error;
|
||||
}
|
||||
|
||||
if (data?.accessibility_options) {
|
||||
const validated = accessibilityOptionsSchema.parse(data.accessibility_options);
|
||||
setAccessibility(validated);
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
handleError(error, {
|
||||
action: 'Load accessibility preferences',
|
||||
userId: user.id
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmit = async (data: LocationFormData) => {
|
||||
if (!user) return;
|
||||
|
||||
setSaving(true);
|
||||
|
||||
try {
|
||||
const validatedData = locationFormSchema.parse(data);
|
||||
const validatedAccessibility = accessibilityOptionsSchema.parse(accessibility);
|
||||
|
||||
const previousProfile = {
|
||||
personal_location: profile?.personal_location,
|
||||
home_park_id: profile?.home_park_id,
|
||||
timezone: profile?.timezone,
|
||||
preferred_language: profile?.preferred_language,
|
||||
preferred_pronouns: profile?.preferred_pronouns
|
||||
};
|
||||
|
||||
const { error: profileError } = await supabase
|
||||
.from('profiles')
|
||||
.update({
|
||||
preferred_pronouns: validatedData.preferred_pronouns || null,
|
||||
timezone: validatedData.timezone,
|
||||
preferred_language: validatedData.preferred_language,
|
||||
personal_location: validatedData.personal_location || null,
|
||||
home_park_id: validatedData.home_park_id || null,
|
||||
updated_at: new Date().toISOString()
|
||||
})
|
||||
.eq('user_id', user.id);
|
||||
|
||||
if (profileError) {
|
||||
throw profileError;
|
||||
}
|
||||
|
||||
const { error: accessibilityError } = await supabase
|
||||
.from('user_preferences')
|
||||
.update({
|
||||
accessibility_options: validatedAccessibility,
|
||||
updated_at: new Date().toISOString()
|
||||
})
|
||||
.eq('user_id', user.id);
|
||||
|
||||
if (accessibilityError) {
|
||||
throw accessibilityError;
|
||||
}
|
||||
|
||||
await updateUnitPreferences(unitPreferences);
|
||||
|
||||
await supabase.from('profile_audit_log').insert([{
|
||||
user_id: user.id,
|
||||
changed_by: user.id,
|
||||
action: 'location_info_updated',
|
||||
changes: JSON.parse(JSON.stringify({
|
||||
previous: {
|
||||
profile: previousProfile,
|
||||
accessibility: DEFAULT_ACCESSIBILITY_OPTIONS
|
||||
},
|
||||
updated: {
|
||||
profile: validatedData,
|
||||
accessibility: validatedAccessibility
|
||||
},
|
||||
timestamp: new Date().toISOString()
|
||||
}))
|
||||
}]);
|
||||
|
||||
await refreshProfile();
|
||||
|
||||
handleSuccess(
|
||||
'Settings saved',
|
||||
'Your location, personal information, accessibility, and unit preferences have been updated.'
|
||||
);
|
||||
} catch (error: unknown) {
|
||||
if (error instanceof z.ZodError) {
|
||||
handleError(
|
||||
new AppError(
|
||||
'Invalid settings',
|
||||
'VALIDATION_ERROR',
|
||||
error.issues.map(i => i.message).join(', ')
|
||||
),
|
||||
{ action: 'Validate location settings', userId: user.id }
|
||||
);
|
||||
} else {
|
||||
handleError(error, {
|
||||
action: 'Save location settings',
|
||||
userId: user.id
|
||||
});
|
||||
}
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const updateAccessibility = (key: keyof AccessibilityOptions, value: any) => {
|
||||
setAccessibility(prev => ({ ...prev, [key]: value }));
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Skeleton className="h-6 w-48" />
|
||||
<Skeleton className="h-4 w-full max-w-md" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<Skeleton className="h-12 w-full" />
|
||||
<Skeleton className="h-12 w-full" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
||||
{/* Location Settings + Personal Information Grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Location Settings */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin className="w-5 h-5" />
|
||||
<CardTitle>Location Settings</CardTitle>
|
||||
</div>
|
||||
<CardDescription>
|
||||
Set your location for better personalized content and timezone display.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="personal_location">Your Location</Label>
|
||||
<Input
|
||||
id="personal_location"
|
||||
{...form.register('personal_location')}
|
||||
placeholder="e.g., San Francisco, CA or Berlin, Germany"
|
||||
/>
|
||||
{form.formState.errors.personal_location && (
|
||||
<p className="text-sm text-destructive">
|
||||
{form.formState.errors.personal_location.message}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Your personal location (optional, displayed as text)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="home_park_id">Home Park</Label>
|
||||
<Select
|
||||
value={form.watch('home_park_id') || undefined}
|
||||
onValueChange={value => form.setValue('home_park_id', value)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select your home park" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{parks.map(park => (
|
||||
<SelectItem key={park.id} value={park.id}>
|
||||
{park.name}
|
||||
{park.location && (
|
||||
<>
|
||||
{park.location.city && `, ${park.location.city}`}
|
||||
{park.location.state_province && `, ${park.location.state_province}`}
|
||||
{`, ${park.location.country}`}
|
||||
</>
|
||||
)}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{form.formState.errors.home_park_id && (
|
||||
<p className="text-sm text-destructive">
|
||||
{form.formState.errors.home_park_id.message}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-sm text-muted-foreground">
|
||||
The theme park you visit most often or consider your "home" park
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="timezone">Timezone</Label>
|
||||
<Select
|
||||
value={form.watch('timezone')}
|
||||
onValueChange={value => form.setValue('timezone', value)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{COMMON_TIMEZONES.map(tz => (
|
||||
<SelectItem key={tz} value={tz}>
|
||||
{tz}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{form.formState.errors.timezone && (
|
||||
<p className="text-sm text-destructive">
|
||||
{form.formState.errors.timezone.message}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Used to display dates and times in your local timezone.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="preferred_language">Preferred Language</Label>
|
||||
<Select
|
||||
value={form.watch('preferred_language')}
|
||||
onValueChange={value => form.setValue('preferred_language', value)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="en">English</SelectItem>
|
||||
<SelectItem value="es">Español</SelectItem>
|
||||
<SelectItem value="fr">Français</SelectItem>
|
||||
<SelectItem value="de">Deutsch</SelectItem>
|
||||
<SelectItem value="it">Italiano</SelectItem>
|
||||
<SelectItem value="pt">Português</SelectItem>
|
||||
<SelectItem value="ja">日本語</SelectItem>
|
||||
<SelectItem value="zh">中文</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{form.formState.errors.preferred_language && (
|
||||
<p className="text-sm text-destructive">
|
||||
{form.formState.errors.preferred_language.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Personal Information */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar className="w-5 h-5" />
|
||||
<CardTitle>Personal Information</CardTitle>
|
||||
</div>
|
||||
<CardDescription>
|
||||
Optional personal information that can be displayed on your profile.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="preferred_pronouns">Preferred Pronouns</Label>
|
||||
<Input
|
||||
id="preferred_pronouns"
|
||||
{...form.register('preferred_pronouns')}
|
||||
placeholder="e.g., they/them, she/her, he/him"
|
||||
/>
|
||||
{form.formState.errors.preferred_pronouns && (
|
||||
<p className="text-sm text-destructive">
|
||||
{form.formState.errors.preferred_pronouns.message}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-sm text-muted-foreground">
|
||||
How you'd like others to refer to you.
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Unit Preferences + Accessibility Options Grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Unit Preferences */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Ruler className="w-5 h-5" />
|
||||
<CardTitle>Units & Measurements</CardTitle>
|
||||
</div>
|
||||
<CardDescription>
|
||||
Choose your preferred measurement system for displaying distances, speeds, and other measurements.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="space-y-3">
|
||||
<Label>Measurement System</Label>
|
||||
<Select
|
||||
value={unitPreferences.measurement_system}
|
||||
onValueChange={(value: 'metric' | 'imperial') =>
|
||||
updateUnitPreferences({ measurement_system: value })
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="metric">Metric (km/h, meters, cm)</SelectItem>
|
||||
<SelectItem value="imperial">Imperial (mph, feet, inches)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
All measurements in the database are stored in metric and converted for display.
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Accessibility Options */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Accessibility className="w-5 h-5" />
|
||||
<CardTitle>Accessibility Options</CardTitle>
|
||||
</div>
|
||||
<CardDescription>
|
||||
Customize the interface to meet your accessibility needs.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="space-y-3">
|
||||
<Label>Font Size</Label>
|
||||
<Select
|
||||
value={accessibility.font_size}
|
||||
onValueChange={(value: 'small' | 'medium' | 'large') =>
|
||||
updateAccessibility('font_size', value)
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="small">Small</SelectItem>
|
||||
<SelectItem value="medium">Medium (Default)</SelectItem>
|
||||
<SelectItem value="large">Large</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-1">
|
||||
<Label>High Contrast</Label>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Increase contrast for better visibility
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={accessibility.high_contrast}
|
||||
onCheckedChange={checked => updateAccessibility('high_contrast', checked)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-1">
|
||||
<Label>Reduced Motion</Label>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Minimize animations and transitions
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={accessibility.reduced_motion}
|
||||
onCheckedChange={checked => updateAccessibility('reduced_motion', checked)}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Save Button */}
|
||||
<div className="flex justify-end">
|
||||
<Button type="submit" loading={saving} loadingText="Saving...">
|
||||
Save Settings
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user