Add unit preferences to user settings

2025-12-20 09:11:12 -05:00 · 2025-09-28 21:26:09 +00:00
parent 93278a5f24
commit 8f13796567
10 changed files with 451 additions and 13 deletions
--- a/src/components/settings/LocationTab.tsx
+++ b/src/components/settings/LocationTab.tsx
@@ -11,8 +11,9 @@ import { Separator } from '@/components/ui/separator';
 import { Switch } from '@/components/ui/switch';
 import { useToast } from '@/hooks/use-toast';
 import { useAuth } from '@/hooks/useAuth';
+import { useUnitPreferences } from '@/hooks/useUnitPreferences';
 import { supabase } from '@/integrations/supabase/client';
-import { MapPin, Calendar, Globe, Accessibility } from 'lucide-react';
+import { MapPin, Calendar, Globe, Accessibility, Ruler } from 'lucide-react';
 const locationSchema = z.object({
  preferred_pronouns: z.string().max(20).optional(),
  timezone: z.string(),
@@ -35,6 +36,7 @@ export function LocationTab() {
  const {
    toast
  } = useToast();
+  const { preferences: unitPreferences, updatePreferences: updateUnitPreferences } = useUnitPreferences();
  const [loading, setLoading] = useState(false);
  const [parks, setParks] = useState<any[]>([]);
  const [accessibility, setAccessibility] = useState<AccessibilityOptions>({
@@ -115,10 +117,13 @@ export function LocationTab() {
      
      if (accessibilityError) throw accessibilityError;

+      // Save unit preferences
+      await updateUnitPreferences(unitPreferences);
+
      await refreshProfile();
      toast({
        title: 'Settings saved',
-        description: 'Your location, personal information, and accessibility settings have been updated.'
+        description: 'Your location, personal information, accessibility, and unit preferences have been updated.'
      });
    } catch (error: any) {
      toast({
@@ -243,6 +248,58 @@ export function LocationTab() {

        <Separator />

+        {/* Unit Preferences */}
+        <div className="space-y-4">
+          <div className="flex items-center gap-2">
+            <Ruler className="w-5 h-5" />
+            <h3 className="text-lg font-medium">Units & Measurements</h3>
+          </div>
+          
+          <Card>
+            <CardHeader>
+              <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>
+              </div>
+
+              <div className="flex items-center justify-between">
+                <div className="space-y-1">
+                  <Label>Auto-detect from location</Label>
+                  <p className="text-sm text-muted-foreground">
+                    Automatically set measurement system based on your location when you first visit
+                  </p>
+                </div>
+                <Switch 
+                  checked={unitPreferences.auto_detect} 
+                  onCheckedChange={(checked) => 
+                    updateUnitPreferences({ auto_detect: checked })
+                  } 
+                />
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        <Separator />
+
        {/* Accessibility Options */}
        <div className="space-y-4">
          <div className="flex items-center gap-2">
--- a/src/components/ui/measurement-display.tsx
+++ b/src/components/ui/measurement-display.tsx
@@ -0,0 +1,100 @@
+import { useMemo } from 'react';
+import { useAuth } from '@/hooks/useAuth';
+import { 
+  convertSpeed, 
+  convertDistance, 
+  convertHeight,
+  getSpeedUnit,
+  getDistanceUnit,
+  getHeightUnit,
+  getShortDistanceUnit,
+  type MeasurementSystem,
+  type UnitPreferences
+} from '@/lib/units';
+
+interface MeasurementDisplayProps {
+  value: number;
+  type: 'speed' | 'distance' | 'height' | 'short_distance';
+  showBothUnits?: boolean;
+  className?: string;
+}
+
+export function MeasurementDisplay({ 
+  value, 
+  type, 
+  showBothUnits = false,
+  className = "" 
+}: MeasurementDisplayProps) {
+  const { profile } = useAuth();
+  
+  const unitPreferences = useMemo(() => {
+    // Get unit preferences from user profile or default to metric
+    const defaultPrefs: UnitPreferences = {
+      measurement_system: 'metric',
+      temperature: 'celsius',
+      auto_detect: true
+    };
+    
+    // If no profile or no preferences, use default
+    if (!profile) return defaultPrefs;
+    
+    // Try to get preferences from profile (this will be populated from user_preferences)
+    const storedPrefs = (profile as any)?.unit_preferences;
+    if (storedPrefs && typeof storedPrefs === 'object') {
+      return { ...defaultPrefs, ...storedPrefs };
+    }
+    
+    return defaultPrefs;
+  }, [profile]);
+
+  const { displayValue, unit, alternateDisplay } = useMemo(() => {
+    const system = unitPreferences.measurement_system;
+    
+    let displayValue: number;
+    let unit: string;
+    let alternateValue: number;
+    let alternateUnit: string;
+    
+    switch (type) {
+      case 'speed':
+        displayValue = convertSpeed(value, system);
+        unit = getSpeedUnit(system);
+        alternateValue = convertSpeed(value, system === 'metric' ? 'imperial' : 'metric');
+        alternateUnit = getSpeedUnit(system === 'metric' ? 'imperial' : 'metric');
+        break;
+      case 'distance':
+        displayValue = convertDistance(value, system);
+        unit = getDistanceUnit(system);
+        alternateValue = convertDistance(value, system === 'metric' ? 'imperial' : 'metric');
+        alternateUnit = getDistanceUnit(system === 'metric' ? 'imperial' : 'metric');
+        break;
+      case 'height':
+        displayValue = convertHeight(value, system);
+        unit = getHeightUnit(system);
+        alternateValue = convertHeight(value, system === 'metric' ? 'imperial' : 'metric');
+        alternateUnit = getHeightUnit(system === 'metric' ? 'imperial' : 'metric');
+        break;
+      case 'short_distance':
+        displayValue = convertDistance(value, system);
+        unit = getShortDistanceUnit(system);
+        alternateValue = convertDistance(value, system === 'metric' ? 'imperial' : 'metric');
+        alternateUnit = getShortDistanceUnit(system === 'metric' ? 'imperial' : 'metric');
+        break;
+      default:
+        displayValue = value;
+        unit = '';
+        alternateValue = value;
+        alternateUnit = '';
+    }
+    
+    const alternateDisplay = showBothUnits ? ` (${alternateValue} ${alternateUnit})` : '';
+    
+    return { displayValue, unit, alternateDisplay };
+  }, [value, type, unitPreferences.measurement_system, showBothUnits]);
+
+  return (
+    <span className={className} title={showBothUnits ? undefined : alternateDisplay ? `${alternateValue} ${alternateUnit}` : undefined}>
+      {displayValue} {unit}{alternateDisplay}
+    </span>
+  );
+}
--- a/src/hooks/useUnitPreferences.ts
+++ b/src/hooks/useUnitPreferences.ts
@@ -0,0 +1,119 @@
+import { useState, useEffect } from 'react';
+import { useAuth } from '@/hooks/useAuth';
+import { supabase } from '@/integrations/supabase/client';
+import { UnitPreferences, getMeasurementSystemFromCountry } from '@/lib/units';
+
+const DEFAULT_PREFERENCES: UnitPreferences = {
+  measurement_system: 'metric',
+  temperature: 'celsius',
+  auto_detect: true
+};
+
+export function useUnitPreferences() {
+  const { user } = useAuth();
+  const [preferences, setPreferences] = useState<UnitPreferences>(DEFAULT_PREFERENCES);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    loadPreferences();
+  }, [user]);
+
+  const loadPreferences = async () => {
+    try {
+      if (user) {
+        // Load from database for logged-in users
+        const { data } = await supabase
+          .from('user_preferences')
+          .select('unit_preferences')
+          .eq('user_id', user.id)
+          .maybeSingle();
+
+        if (data?.unit_preferences && typeof data.unit_preferences === 'object') {
+          setPreferences({ ...DEFAULT_PREFERENCES, ...(data.unit_preferences as unknown as UnitPreferences) });
+        } else {
+          // Auto-detect for new users
+          await autoDetectPreferences();
+        }
+      } else {
+        // Check localStorage for anonymous users
+        const stored = localStorage.getItem('unit_preferences');
+        if (stored) {
+          try {
+            const parsed = JSON.parse(stored);
+            setPreferences({ ...DEFAULT_PREFERENCES, ...parsed });
+          } catch (e) {
+            await autoDetectPreferences();
+          }
+        } else {
+          await autoDetectPreferences();
+        }
+      }
+    } catch (error) {
+      console.error('Error loading unit preferences:', error);
+      await autoDetectPreferences();
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const autoDetectPreferences = async () => {
+    try {
+      const response = await supabase.functions.invoke('detect-location');
+      
+      if (response.data && response.data.measurementSystem) {
+        const newPreferences: UnitPreferences = {
+          ...DEFAULT_PREFERENCES,
+          measurement_system: response.data.measurementSystem,
+        };
+        
+        setPreferences(newPreferences);
+        
+        // Save to localStorage for anonymous users
+        if (!user) {
+          localStorage.setItem('unit_preferences', JSON.stringify(newPreferences));
+        }
+        
+        return newPreferences;
+      }
+    } catch (error) {
+      console.error('Error auto-detecting location:', error);
+    }
+    
+    // Fallback to default
+    setPreferences(DEFAULT_PREFERENCES);
+    return DEFAULT_PREFERENCES;
+  };
+
+  const updatePreferences = async (newPreferences: Partial<UnitPreferences>) => {
+    const updated = { ...preferences, ...newPreferences };
+    setPreferences(updated);
+
+    try {
+      if (user) {
+        // Save to database for logged-in users
+        await supabase
+          .from('user_preferences')
+          .update({ 
+            unit_preferences: updated,
+            updated_at: new Date().toISOString()
+          })
+          .eq('user_id', user.id);
+      } else {
+        // Save to localStorage for anonymous users
+        localStorage.setItem('unit_preferences', JSON.stringify(updated));
+      }
+    } catch (error) {
+      console.error('Error saving unit preferences:', error);
+      // Revert on error
+      setPreferences(preferences);
+      throw error;
+    }
+  };
+
+  return {
+    preferences,
+    loading,
+    updatePreferences,
+    autoDetectPreferences
+  };
+}
--- a/src/integrations/supabase/types.ts
+++ b/src/integrations/supabase/types.ts
@@ -782,6 +782,7 @@ export type Database = {
          id: string
          privacy_settings: Json
          push_notifications: Json
+          unit_preferences: Json
          updated_at: string
          user_id: string
        }
@@ -792,6 +793,7 @@ export type Database = {
          id?: string
          privacy_settings?: Json
          push_notifications?: Json
+          unit_preferences?: Json
          updated_at?: string
          user_id: string
        }
@@ -802,6 +804,7 @@ export type Database = {
          id?: string
          privacy_settings?: Json
          push_notifications?: Json
+          unit_preferences?: Json
          updated_at?: string
          user_id?: string
        }
--- a/src/lib/units.ts
+++ b/src/lib/units.ts
@@ -0,0 +1,56 @@
+export type MeasurementSystem = 'metric' | 'imperial';
+
+export interface UnitPreferences {
+  measurement_system: MeasurementSystem;
+  temperature: 'celsius' | 'fahrenheit';
+  auto_detect: boolean;
+}
+
+// Speed conversions
+export function convertSpeed(kmh: number, system: MeasurementSystem): number {
+  if (system === 'imperial') {
+    return Math.round(kmh * 0.621371);
+  }
+  return Math.round(kmh);
+}
+
+// Distance conversions (meters to feet)
+export function convertDistance(meters: number, system: MeasurementSystem): number {
+  if (system === 'imperial') {
+    return Math.round(meters * 3.28084);
+  }
+  return Math.round(meters);
+}
+
+// Height conversions (cm to inches)
+export function convertHeight(cm: number, system: MeasurementSystem): number {
+  if (system === 'imperial') {
+    return Math.round(cm * 0.393701);
+  }
+  return Math.round(cm);
+}
+
+// Get unit labels
+export function getSpeedUnit(system: MeasurementSystem): string {
+  return system === 'imperial' ? 'mph' : 'km/h';
+}
+
+export function getDistanceUnit(system: MeasurementSystem): string {
+  return system === 'imperial' ? 'ft' : 'm';
+}
+
+export function getHeightUnit(system: MeasurementSystem): string {
+  return system === 'imperial' ? 'in' : 'cm';
+}
+
+export function getShortDistanceUnit(system: MeasurementSystem): string {
+  return system === 'imperial' ? 'ft' : 'm';
+}
+
+// Countries that primarily use imperial system
+export const IMPERIAL_COUNTRIES = ['US', 'LR', 'MM'];
+
+// Detect measurement system from country code
+export function getMeasurementSystemFromCountry(countryCode: string): MeasurementSystem {
+  return IMPERIAL_COUNTRIES.includes(countryCode.toUpperCase()) ? 'imperial' : 'metric';
+}
--- a/src/pages/ParkDetail.tsx
+++ b/src/pages/ParkDetail.tsx
@@ -19,6 +19,7 @@ import {
  Camera
 } from 'lucide-react';
 import { ReviewsSection } from '@/components/reviews/ReviewsSection';
+import { MeasurementDisplay } from '@/components/ui/measurement-display';
 import { Park, Ride } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';

@@ -412,12 +413,12 @@ export default function ParkDetail() {
                      <div className="flex items-center gap-2">
                        {ride.max_speed_kmh && (
                          <span className="bg-primary/10 text-primary px-2 py-1 rounded">
-                            {ride.max_speed_kmh} km/h
+                            <MeasurementDisplay value={ride.max_speed_kmh} type="speed" />
                          </span>
                        )}
                        {ride.max_height_meters && (
                          <span className="bg-accent/10 text-accent px-2 py-1 rounded">
-                            {ride.max_height_meters}m
+                            <MeasurementDisplay value={ride.max_height_meters} type="distance" />
                          </span>
                        )}
                      </div>
--- a/src/pages/RideDetail.tsx
+++ b/src/pages/RideDetail.tsx
@@ -21,6 +21,7 @@ import {
  AlertTriangle
 } from 'lucide-react';
 import { ReviewsSection } from '@/components/reviews/ReviewsSection';
+import { MeasurementDisplay } from '@/components/ui/measurement-display';
 import { Ride } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';

@@ -206,8 +207,9 @@ export default function RideDetail() {
            <Card>
              <CardContent className="p-4 text-center">
                <Zap className="w-6 h-6 text-primary mx-auto mb-2" />
-                <div className="text-2xl font-bold text-primary">{ride.max_speed_kmh}</div>
-                <div className="text-sm text-muted-foreground">km/h</div>
+                <div className="text-2xl font-bold text-primary">
+                  <MeasurementDisplay value={ride.max_speed_kmh} type="speed" />
+                </div>
              </CardContent>
            </Card>
          )}
@@ -216,8 +218,9 @@ export default function RideDetail() {
            <Card>
              <CardContent className="p-4 text-center">
                <TrendingUp className="w-6 h-6 text-accent mx-auto mb-2" />
-                <div className="text-2xl font-bold text-accent">{ride.max_height_meters}</div>
-                <div className="text-sm text-muted-foreground">meters</div>
+                <div className="text-2xl font-bold text-accent">
+                  <MeasurementDisplay value={ride.max_height_meters} type="distance" />
+                </div>
              </CardContent>
            </Card>
          )}
@@ -226,8 +229,10 @@ export default function RideDetail() {
            <Card>
              <CardContent className="p-4 text-center">
                <Ruler className="w-6 h-6 text-secondary mx-auto mb-2" />
-                <div className="text-2xl font-bold text-secondary">{Math.round(ride.length_meters)}</div>
-                <div className="text-sm text-muted-foreground">meters long</div>
+                <div className="text-2xl font-bold text-secondary">
+                  <MeasurementDisplay value={ride.length_meters} type="distance" />
+                </div>
+                <div className="text-sm text-muted-foreground">long</div>
              </CardContent>
            </Card>
          )}
@@ -267,7 +272,9 @@ export default function RideDetail() {
            <Card>
              <CardContent className="p-4 text-center">
                <div className="text-2xl mb-2">⬇️</div>
-                <div className="text-2xl font-bold text-destructive">{ride.drop_height_meters}m</div>
+                <div className="text-2xl font-bold text-destructive">
+                  <MeasurementDisplay value={ride.drop_height_meters} type="distance" />
+                </div>
                <div className="text-sm text-muted-foreground">drop</div>
              </CardContent>
            </Card>
@@ -296,7 +303,7 @@ export default function RideDetail() {
                  </h3>
                  <div className="text-sm space-y-1">
                    {ride.height_requirement && (
-                      <div>Minimum height: {ride.height_requirement}cm</div>
+                      <div>Minimum height: <MeasurementDisplay value={ride.height_requirement} type="height" /></div>
                    )}
                    {ride.age_requirement && (
                      <div>Minimum age: {ride.age_requirement} years</div>
--- a/supabase/config.toml
+++ b/supabase/config.toml
@@ -1 +1,6 @@
-project_id = "ydvtmnrszybqnbcqbdcy"
+project_id = "ydvtmnrszybqnbcqbdcy"
+
+[functions.detect-location]
+verify_jwt = false
+
+[functions.upload-image]
--- a/supabase/functions/detect-location/index.ts
+++ b/supabase/functions/detect-location/index.ts
@@ -0,0 +1,84 @@
+import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
+
+const corsHeaders = {
+  'Access-Control-Allow-Origin': '*',
+  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
+};
+
+interface IPLocationResponse {
+  country: string;
+  countryCode: string;
+  measurementSystem: 'metric' | 'imperial';
+}
+
+serve(async (req) => {
+  // Handle CORS preflight requests
+  if (req.method === 'OPTIONS') {
+    return new Response(null, { headers: corsHeaders });
+  }
+
+  try {
+    // Get the client's IP address
+    const forwarded = req.headers.get('x-forwarded-for');
+    const realIP = req.headers.get('x-real-ip');
+    const clientIP = forwarded?.split(',')[0] || realIP || '8.8.8.8'; // fallback to Google DNS for testing
+    
+    console.log('Detecting location for IP:', clientIP);
+
+    // Use a free IP geolocation service
+    const geoResponse = await fetch(`http://ip-api.com/json/${clientIP}?fields=status,country,countryCode`);
+    
+    if (!geoResponse.ok) {
+      throw new Error('Failed to fetch location data');
+    }
+    
+    const geoData = await geoResponse.json();
+    
+    if (geoData.status !== 'success') {
+      throw new Error('Invalid location data received');
+    }
+
+    // Countries that primarily use imperial system
+    const imperialCountries = ['US', 'LR', 'MM']; // USA, Liberia, Myanmar
+    const measurementSystem = imperialCountries.includes(geoData.countryCode) ? 'imperial' : 'metric';
+
+    const result: IPLocationResponse = {
+      country: geoData.country,
+      countryCode: geoData.countryCode,
+      measurementSystem
+    };
+
+    console.log('Location detected:', result);
+
+    return new Response(
+      JSON.stringify(result),
+      { 
+        headers: { 
+          ...corsHeaders, 
+          'Content-Type': 'application/json' 
+        } 
+      }
+    );
+
+  } catch (error) {
+    console.error('Error detecting location:', error);
+    
+    // Return default (metric) on error
+    const defaultResult: IPLocationResponse = {
+      country: 'Unknown',
+      countryCode: 'XX',
+      measurementSystem: 'metric'
+    };
+
+    return new Response(
+      JSON.stringify(defaultResult),
+      { 
+        headers: { 
+          ...corsHeaders, 
+          'Content-Type': 'application/json' 
+        },
+        status: 200 // Return 200 even on error to provide fallback
+      }
+    );
+  }
+});
--- a/supabase/migrations/20250928212339_9f1c7f40-cf4e-4729-8156-d794d5a13922.sql
+++ b/supabase/migrations/20250928212339_9f1c7f40-cf4e-4729-8156-d794d5a13922.sql
@@ -0,0 +1,6 @@
+-- Add unit preferences to user preferences table
+ALTER TABLE public.user_preferences 
+ADD COLUMN unit_preferences JSONB NOT NULL DEFAULT '{"measurement_system": "metric", "temperature": "celsius", "auto_detect": true}'::jsonb;
+
+-- Add comment for documentation
+COMMENT ON COLUMN public.user_preferences.unit_preferences IS 'User preferences for measurement units: measurement_system (metric/imperial), temperature (celsius/fahrenheit), auto_detect (boolean)';