Fix unit preferences logic

src/components/ui/measurement-display.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useAuth } from '@/hooks/useAuth';
+import { useUnitPreferences } from '@/hooks/useUnitPreferences';
 import { 
   convertSpeed, 
   convertDistance, 
@@ -8,8 +8,7 @@ import {
   getDistanceUnit,
   getHeightUnit,
   getShortDistanceUnit,
-  type MeasurementSystem,
+  type MeasurementSystem
-  type UnitPreferences
 } from '@/lib/units';
 
 interface MeasurementDisplayProps {
@@ -25,27 +24,7 @@ export function MeasurementDisplay({
   showBothUnits = false,
   className = "" 
 }: MeasurementDisplayProps) {
-  const { profile } = useAuth();
+  const { preferences: unitPreferences } = useUnitPreferences();
-  
-  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, tooltipText } = useMemo(() => {
     const system = unitPreferences.measurement_system;

src/hooks/useLocationAutoDetect.ts

@@ -22,5 +22,5 @@ export function useLocationAutoDetect() {
         localStorage.setItem('location_detection_attempted', 'true');
       });
     }
-  }, [user, loading, preferences.auto_detect, autoDetectPreferences]);
+  }, [user, loading, preferences.auto_detect]);
 }

src/hooks/useUnitPreferences.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { useAuth } from '@/hooks/useAuth';
 import { supabase } from '@/integrations/supabase/client';
 import { UnitPreferences, getMeasurementSystemFromCountry } from '@/lib/units';
@@ -56,14 +56,11 @@ export function useUnitPreferences() {
     }
   };
 
-  const autoDetectPreferences = async () => {
+  const autoDetectPreferences = useCallback(async () => {
-    console.log('🌐 Calling edge function for location detection...');
     try {
       const response = await supabase.functions.invoke('detect-location');
-      console.log('📡 Edge function response:', response);
       
       if (response.data && response.data.measurementSystem) {
-        console.log('🎯 Detected measurement system:', response.data.measurementSystem);
         const newPreferences: UnitPreferences = {
           ...DEFAULT_PREFERENCES,
           measurement_system: response.data.measurementSystem,
@@ -71,25 +68,34 @@ export function useUnitPreferences() {
         
         setPreferences(newPreferences);
         
-        // Save to localStorage for anonymous users
+        // Save to database for logged-in users, localStorage for anonymous users
-        if (!user) {
+        if (user) {
+          // Use upsert with merge
+          const { error } = await supabase
+            .from('user_preferences')
+            .upsert({ 
+              user_id: user.id,
+              unit_preferences: newPreferences as any,
+              updated_at: new Date().toISOString()
+            });
+          
+          if (error) {
+            console.error('Error saving preferences to database:', error);
+          }
+        } else {
           localStorage.setItem('unit_preferences', JSON.stringify(newPreferences));
-          console.log('💾 Saved preferences to localStorage:', newPreferences);
         }
         
         return newPreferences;
-      } else {
-        console.log('⚠️ No measurement system in response');
       }
     } catch (error) {
       console.error('❌ Error auto-detecting location:', error);
     }
     
     // Fallback to default
-    console.log('🔄 Falling back to default preferences');
     setPreferences(DEFAULT_PREFERENCES);
     return DEFAULT_PREFERENCES;
-  };
+  }, [user]);
 
   const updatePreferences = async (newPreferences: Partial<UnitPreferences>) => {
     const updated = { ...preferences, ...newPreferences };
@@ -101,7 +107,7 @@ export function useUnitPreferences() {
         await supabase
           .from('user_preferences')
           .update({ 
-            unit_preferences: updated,
+            unit_preferences: updated as any,
             updated_at: new Date().toISOString()
           })
           .eq('user_id', user.id);