From 9d66b58f200fb5f4b5bdb78faa17f4702b534d68 Mon Sep 17 00:00:00 2001
From: Andrei <andrei@cloudz.ro>
Date: Fri, 3 Oct 2025 12:57:25 +0000
Subject: [PATCH] fix: Connect measurement unit preference to backend storage
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed measurement unit not persisting across page refreshes:

- Settings page now includes measurementUnit in the preferences object when saving
- MeasurementUnitSelector now accepts value/onChange props for controlled usage
- Settings state properly loads and saves measurementUnit from user preferences
- UnitInput component will now correctly read imperial/metric from user.preferences.measurementUnit

Previously, measurementUnit was only saved to localStorage but not synced to backend,
causing UnitInput to always default to metric since it reads from user.preferences.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 maternal-web/app/settings/page.tsx            |  7 ++++++-
 maternal-web/components/forms/UnitInput.tsx   |  3 +++
 .../settings/MeasurementUnitSelector.tsx      | 20 +++++++++++++------
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/maternal-web/app/settings/page.tsx b/maternal-web/app/settings/page.tsx
index 561cb85..229040c 100644
--- a/maternal-web/app/settings/page.tsx
+++ b/maternal-web/app/settings/page.tsx
@@ -28,6 +28,7 @@ export default function SettingsPage() {
     notifications: true,
     emailUpdates: false,
     darkMode: false,
+    measurementUnit: 'metric' as 'metric' | 'imperial',
   });
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -41,6 +42,7 @@ export default function SettingsPage() {
         notifications: user.preferences.notifications ?? true,
         emailUpdates: user.preferences.emailUpdates ?? false,
         darkMode: user.preferences.darkMode ?? false,
+        measurementUnit: (user.preferences.measurementUnit as 'metric' | 'imperial') || 'metric',
       });
       setTimeFormat(user.preferences.timeFormat || '12h');
     }
@@ -169,7 +171,10 @@ export default function SettingsPage() {
             <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, mt: 2 }}>
               <LanguageSelector />
               <Divider />
-              <MeasurementUnitSelector />
+              <MeasurementUnitSelector
+                value={settings.measurementUnit}
+                onChange={(value) => setSettings(prev => ({ ...prev, measurementUnit: value }))}
+              />
               <Divider />
               <TimeZoneSelector value={timezone} onChange={setTimezone} />
               <Divider />
diff --git a/maternal-web/components/forms/UnitInput.tsx b/maternal-web/components/forms/UnitInput.tsx
index deb72d2..d6bfac6 100644
--- a/maternal-web/components/forms/UnitInput.tsx
+++ b/maternal-web/components/forms/UnitInput.tsx
@@ -44,6 +44,9 @@ export function UnitInput({ type, value, onChange, ...textFieldProps }: UnitInpu
   const measurementSystem: MeasurementSystem =
     (user?.preferences?.measurementUnit as MeasurementSystem) || 'metric';
 
+  // Debug logging
+  console.log('[UnitInput] Measurement system:', measurementSystem, 'User preferences:', user?.preferences);
+
   // Get the display unit symbol
   const unitSymbol = getUnitSymbol(type, measurementSystem);
 
diff --git a/maternal-web/components/settings/MeasurementUnitSelector.tsx b/maternal-web/components/settings/MeasurementUnitSelector.tsx
index f9f82b5..3ece52e 100644
--- a/maternal-web/components/settings/MeasurementUnitSelector.tsx
+++ b/maternal-web/components/settings/MeasurementUnitSelector.tsx
@@ -17,6 +17,8 @@ interface MeasurementUnitSelectorProps {
   variant?: 'standard' | 'outlined' | 'filled';
   fullWidth?: boolean;
   showDescription?: boolean;
+  value?: MeasurementSystem;
+  onChange?: (value: MeasurementSystem) => void;
 }
 
 /**
@@ -26,19 +28,25 @@ export function MeasurementUnitSelector({
   variant = 'outlined',
   fullWidth = true,
   showDescription = true,
+  value,
+  onChange,
 }: MeasurementUnitSelectorProps) {
   const { measurementSystem, setMeasurementSystem } = useLocale();
   const { t } = useTranslation('settings');
-  const [selectedSystem, setSelectedSystem] = useState<MeasurementSystem>(measurementSystem);
 
-  useEffect(() => {
-    setSelectedSystem(measurementSystem);
-  }, [measurementSystem]);
+  // Use controlled value if provided, otherwise use hook value
+  const selectedSystem = value !== undefined ? value : measurementSystem;
 
   const handleSystemChange = (event: SelectChangeEvent) => {
     const newSystem = event.target.value as MeasurementSystem;
-    setSelectedSystem(newSystem);
-    setMeasurementSystem(newSystem);
+
+    // If onChange is provided (controlled), use it
+    if (onChange) {
+      onChange(newSystem);
+    } else {
+      // Otherwise use the hook (uncontrolled)
+      setMeasurementSystem(newSystem);
+    }
   };
 
   return (