Refactor: Complete API and cache improvements

src/components/settings/LocationTab.tsx

@@ -13,6 +13,7 @@ import { Skeleton } from '@/components/ui/skeleton';
 import { useAuth } from '@/hooks/useAuth';
 import { useProfile } from '@/hooks/useProfile';
 import { useUnitPreferences } from '@/hooks/useUnitPreferences';
+import { useProfileLocationMutation } from '@/hooks/profile/useProfileLocationMutation';
 import { supabase } from '@/integrations/supabase/client';
 import { handleError, handleSuccess, AppError } from '@/lib/errorHandler';
 import { logger } from '@/lib/logger';
@@ -30,8 +31,8 @@ export function LocationTab() {
   const { user } = useAuth();
   const { data: profile, refreshProfile } = useProfile(user?.id);
   const { preferences: unitPreferences, updatePreferences: updateUnitPreferences } = useUnitPreferences();
+  const { updateLocation, isUpdating } = useProfileLocationMutation();
   const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
   const [parks, setParks] = useState<ParkOption[]>([]);
   const [accessibility, setAccessibility] = useState<AccessibilityOptions>(DEFAULT_ACCESSIBILITY_OPTIONS);
   
@@ -171,42 +172,11 @@ export function LocationTab() {
   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) {
-        logger.error('Failed to update profile', {
-          userId: user.id,
-          action: 'update_profile_location',
-          error: profileError.message,
-          errorCode: profileError.code
-        });
-        throw profileError;
-      }
-
+      // Update accessibility preferences first
       const { error: accessibilityError } = await supabase
         .from('user_preferences')
         .update({
@@ -227,34 +197,20 @@ export function LocationTab() {
 
       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()
-        }))
-      }]);
+      // Update profile via mutation hook with complete validated data
+      const locationData: LocationFormData = {
+        personal_location: validatedData.personal_location || null,
+        home_park_id: validatedData.home_park_id || null,
+        timezone: validatedData.timezone,
+        preferred_language: validatedData.preferred_language,
+        preferred_pronouns: validatedData.preferred_pronouns || null,
+      };
 
-      await refreshProfile();
-      
-      logger.info('Location and info settings updated', {
-        userId: user.id,
-        action: 'update_location_info'
+      updateLocation.mutate(locationData, {
+        onSuccess: () => {
+          refreshProfile();
+        }
       });
-
-      handleSuccess(
-        'Settings saved',
-        'Your location, personal information, accessibility, and unit preferences have been updated.'
-      );
     } catch (error: unknown) {
       logger.error('Error saving location settings', {
         userId: user.id,
@@ -277,8 +233,6 @@ export function LocationTab() {
           userId: user.id
         });
       }
-    } finally {
-      setSaving(false);
     }
   };
 
@@ -558,8 +512,8 @@ export function LocationTab() {
 
         {/* Save Button */}
         <div className="flex justify-end">
-          <Button type="submit" disabled={saving}>
-            {saving ? 'Saving...' : 'Save Settings'}
+          <Button type="submit" disabled={isUpdating}>
+            {isUpdating ? 'Saving...' : 'Save Settings'}
           </Button>
         </div>
       </form>