feature: metric imperial choice

messages/en-US/primary.json

@@ -155,6 +155,12 @@
   "$1Screens.Settings.AppSettings.edit": {
     "message": "Edit"
   },
+  "$1Screens.Settings.AppSettings.imperial": {
+    "message": "Imperial"
+  },
+  "$1Screens.Settings.AppSettings.metric": {
+    "message": "Metric"
+  },
   "$1Screens.Settings.AppSettings.noPasscode": {
     "message": "No Passcode"
   },
@@ -920,6 +926,24 @@
   "$1screens.TrackCategoryChooser.title": {
     "message": "Choose a category"
   },
+  "$1screens.UnitSystemSettings.imperial": {
+    "description": "Label for imperial unit system option",
+    "message": "Imperial"
+  },
+  "$1screens.UnitSystemSettings.imperialSubtitle": {
+    "message": "Display Information (ft, mi)"
+  },
+  "$1screens.UnitSystemSettings.metric": {
+    "description": "Label for metric unit system option",
+    "message": "Metric"
+  },
+  "$1screens.UnitSystemSettings.metricSubtitle": {
+    "message": "Display Information (km, m)"
+  },
+  "$1screens.UnitSystemSettings.title": {
+    "description": "Title for unit system settings screen",
+    "message": "Unit System"
+  },
   "$1screens.YourTeam.RemoveDevice.removeAndNotifyButton": {
     "message": "Remove & Notify"
   },

messages/en-US/secondary.json

@@ -202,9 +202,6 @@
   "TrackEdit.HeaderLeft.discardTrackDescription": {
     "message": "Your changes will not be saved. This cannot be undone."
   },
-  "TrackStats.kilometers": {
-    "message": "km"
-  },
   "constants.blue": {
     "message": "Blue"
   },
@@ -1162,8 +1159,8 @@
   "screens.Settings.MapManagement.MapReceived.decline": {
     "message": "Decline"
   },
-  "screens.Settings.MapManagement.MapReceived.kmAway": {
-    "message": "{distance} km away"
+  "screens.Settings.MapManagement.MapReceived.distanceAway": {
+    "message": "{distance} away"
   },
   "screens.Settings.MapManagement.MapReceived.locationNotCovered": {
     "message": "Current location not covered!"

src/frontend/App.tsx

@@ -31,6 +31,7 @@ import {createDraftObservationStore} from './contexts/PersistedStores/DraftObser
 import {createTrackStore} from './contexts/TrackStoreContext';
 import {createSecurityStore} from './contexts/SecurityStoreContext';
 import {createCoordinateFormatStore} from './contexts/CoordinateFormatStoreContext';
+import {createUnitSystemStore} from './contexts/UnitSystemStoreContext';
 import {createManualEntryCoordinateFormatStore} from './contexts/ManualEntryCoordinateFormatStoreContext';
 import {createActiveProjectIdStore} from './contexts/ActiveProjectIdStoreContext';
 import {createMetricsDiagnosticsStore} from './contexts/MetricsDiagnosticsStoreContext';
@@ -160,6 +161,7 @@ const persistedMetricsDiagnosticsStore = createMetricsDiagnosticsStore({
 const savedLocationStore = createSavedLocationStore({persist: true});
 const lowStorageBannerStore = createLowStorageBannerStore();
 const earlyAccessStore = createEarlyAccessStore({persist: true});
+const persistedUnitSystemStore = createUnitSystemStore({persist: true});
 
 // Ensure that these metrics instances are initially in sync with initial state of relevant store
 const metricsIsEnabled =
@@ -245,7 +247,8 @@ const App = () => {
                   metricsDiagnosticsStore={persistedMetricsDiagnosticsStore}
                   appUsageStatsStore={appUsagePromptStore}
                   lowStorageBannerStore={lowStorageBannerStore}
-                  earlyAccessStore={earlyAccessStore}>
+                  earlyAccessStore={earlyAccessStore}
+                  unitSystemStore={persistedUnitSystemStore}>
                   <AppNavigator
                     permissionAsked={permissionsAsked}
                     navigationIntegration={navigationIntegration}

src/frontend/Navigation/Stack/AppScreens.tsx

@@ -55,6 +55,7 @@ import {HomeTabs} from '../Tab';
 import {SaveTrackScreen} from '../../screens/SaveTrack/SaveTrackScreen';
 import {ObservationFields} from '../../screens/ObservationFields';
 import {LanguageSettings} from '../../screens/ComapeoSettings/LanguageSettings.tsx';
+import {UnitSystemSettings} from '../../screens/ComapeoSettings/UnitSystemSettings';
 import {
   ObservationCreate,
   createNavigationOptions as createObservationCreateNavigationOptions,
@@ -357,6 +358,11 @@ export const createAppScreens = ({
         component={LanguageSettings}
         options={{headerTitle: intl(LanguageSettings.navTitle)}}
       />
+      <RootStack.Screen
+        name="UnitSystemSettings"
+        component={UnitSystemSettings}
+        options={{headerTitle: intl(UnitSystemSettings.navTitle)}}
+      />
       <RootStack.Screen
         name="Track"
         component={TrackScreen}

src/frontend/contexts/AppProviders.tsx

@@ -23,6 +23,10 @@ import {
   type CoordinateFormatStore,
   CoordinateFormatStoreProvider,
 } from './CoordinateFormatStoreContext';
+import {
+  type UnitSystemStore,
+  UnitSystemStoreContext,
+} from './UnitSystemStoreContext';
 import {
   type ManualEntryCoordinateFormatStore,
   ManualEntryCoordinateFormatStoreProvider,
@@ -66,6 +70,7 @@ type AppProvidersProps = {
   lowStorageBannerStore: LowStorageBannerStore;
   appUsageStatsStore: AppUsageStatsStore;
   earlyAccessStore: EarlyAccessStore;
+  unitSystemStore: UnitSystemStore;
 };
 
 export const AppProviders = ({
@@ -85,54 +90,59 @@ export const AppProviders = ({
   lowStorageBannerStore,
   earlyAccessStore,
   appUsageStatsStore,
+  unitSystemStore,
 }: AppProvidersProps) => {
   return (
-    <MetricsDiagnosticsStoreProvider value={metricsDiagnosticsStore}>
-      <AppUsageStatsProvider value={appUsageStatsStore}>
-        <SecurityStoreProvider value={securityStore}>
-          <CoordinateFormatStoreProvider value={coordinateFormatStore}>
-            <ManualEntryCoordinateFormatStoreProvider
-              value={manualEntryCoordinateFormatStore}>
-              <TrackStoreProvider value={trackStore}>
-                <QueryClientProvider client={queryClient}>
-                  <LowStorageBannerStoreProvider value={lowStorageBannerStore}>
-                    <SafeAreaProvider>
-                      <GestureHandlerRootView style={styles.flex}>
-                        <SavedLocationStoreProvider value={savedLocationStore}>
-                          <LocationProvider>
-                            <LocalDiscoveryProvider
-                              value={localDiscoveryController}>
-                              <ComapeoCoreProvider
-                                clientApi={mapeoApi}
-                                getMapServerBaseUrl={mapServerApi.getBaseUrl}
-                                fetch={fetch}
-                                queryClient={queryClient}>
-                                <ActiveProjectIdStoreProvider
-                                  store={activeProjectIdStore}>
-                                  <DraftObservationProvider
-                                    draftObservationStore={
-                                      persistedDrafObservationStore
-                                    }>
-                                    <EarlyAccessStoreProvider
-                                      value={earlyAccessStore}>
-                                      <AuthProvider>{children}</AuthProvider>
-                                    </EarlyAccessStoreProvider>
-                                  </DraftObservationProvider>
-                                </ActiveProjectIdStoreProvider>
-                              </ComapeoCoreProvider>
-                            </LocalDiscoveryProvider>
-                          </LocationProvider>
-                        </SavedLocationStoreProvider>
-                      </GestureHandlerRootView>
-                    </SafeAreaProvider>
-                  </LowStorageBannerStoreProvider>
-                </QueryClientProvider>
-              </TrackStoreProvider>
-            </ManualEntryCoordinateFormatStoreProvider>
-          </CoordinateFormatStoreProvider>
-        </SecurityStoreProvider>
-      </AppUsageStatsProvider>
-    </MetricsDiagnosticsStoreProvider>
+    <UnitSystemStoreContext value={unitSystemStore}>
+      <MetricsDiagnosticsStoreProvider value={metricsDiagnosticsStore}>
+        <AppUsageStatsProvider value={appUsageStatsStore}>
+          <SecurityStoreProvider value={securityStore}>
+            <CoordinateFormatStoreProvider value={coordinateFormatStore}>
+              <ManualEntryCoordinateFormatStoreProvider
+                value={manualEntryCoordinateFormatStore}>
+                <TrackStoreProvider value={trackStore}>
+                  <QueryClientProvider client={queryClient}>
+                    <LowStorageBannerStoreProvider
+                      value={lowStorageBannerStore}>
+                      <SafeAreaProvider>
+                        <GestureHandlerRootView style={styles.flex}>
+                          <SavedLocationStoreProvider
+                            value={savedLocationStore}>
+                            <LocationProvider>
+                              <LocalDiscoveryProvider
+                                value={localDiscoveryController}>
+                                <ComapeoCoreProvider
+                                  clientApi={mapeoApi}
+                                  getMapServerBaseUrl={mapServerApi.getBaseUrl}
+                                  fetch={fetch}
+                                  queryClient={queryClient}>
+                                  <ActiveProjectIdStoreProvider
+                                    store={activeProjectIdStore}>
+                                    <DraftObservationProvider
+                                      draftObservationStore={
+                                        persistedDrafObservationStore
+                                      }>
+                                      <EarlyAccessStoreProvider
+                                        value={earlyAccessStore}>
+                                        <AuthProvider>{children}</AuthProvider>
+                                      </EarlyAccessStoreProvider>
+                                    </DraftObservationProvider>
+                                  </ActiveProjectIdStoreProvider>
+                                </ComapeoCoreProvider>
+                              </LocalDiscoveryProvider>
+                            </LocationProvider>
+                          </SavedLocationStoreProvider>
+                        </GestureHandlerRootView>
+                      </SafeAreaProvider>
+                    </LowStorageBannerStoreProvider>
+                  </QueryClientProvider>
+                </TrackStoreProvider>
+              </ManualEntryCoordinateFormatStoreProvider>
+            </CoordinateFormatStoreProvider>
+          </SecurityStoreProvider>
+        </AppUsageStatsProvider>
+      </MetricsDiagnosticsStoreProvider>
+    </UnitSystemStoreContext>
   );
 };
 

src/frontend/contexts/UnitSystemStoreContext.ts

@@ -0,0 +1,76 @@
+import {createContext, useContext} from 'react';
+import {createStore, useStore, type StoreApi} from 'zustand';
+import {
+  createJSONStorage,
+  persist as createPersistedState,
+} from 'zustand/middleware';
+
+import {MMKVStoreInitializer} from '../hooks/persistedState/createPersistedState';
+
+export type UnitSystem = 'metric' | 'imperial';
+
+type UnitSystemState = {
+  value: UnitSystem;
+};
+
+// NOTE: Do not change!
+const STORAGE_KEY = 'unit-system' as const;
+
+function createInitialState(): UnitSystemState {
+  return {
+    value: 'metric',
+  };
+}
+
+export function createUnitSystemStore({persist} = {persist: false}) {
+  let store: StoreApi<UnitSystemState>;
+
+  if (persist) {
+    store = createStore(
+      createPersistedState(createInitialState, {
+        name: STORAGE_KEY,
+        storage: createJSONStorage(() => MMKVStoreInitializer),
+        version: 0,
+      }),
+    );
+  } else {
+    store = createStore(createInitialState);
+  }
+
+  const actions = {
+    setUnitSystem: (unitSystem: UnitSystem) => {
+      store.setState({value: unitSystem});
+    },
+  };
+
+  return {
+    instance: store,
+    actions,
+  };
+}
+
+export type UnitSystemStore = ReturnType<typeof createUnitSystemStore>;
+
+export const UnitSystemStoreContext = createContext<UnitSystemStore | null>(
+  null,
+);
+
+function useUnitSystemStoreContext() {
+  const value = useContext(UnitSystemStoreContext);
+
+  if (!value) {
+    throw new Error('Must set up the UnitSystemStoreContext first');
+  }
+
+  return value;
+}
+
+export function useUnitSystem(): UnitSystem {
+  const {instance} = useUnitSystemStoreContext();
+  return useStore(instance).value;
+}
+
+export function useUnitSystemActions() {
+  const {actions} = useUnitSystemStoreContext();
+  return actions;
+}

src/frontend/lib/unitConversion.test.ts

@@ -0,0 +1,78 @@
+import {
+  metersOrConversion,
+  kmOrConversion,
+  metersPerSecondOrConversion,
+} from './unitConversion';
+
+describe('metersOrConversion', () => {
+  it('returns meters in metric', () => {
+    expect(metersOrConversion(10, 'metric')).toEqual({value: 10, unit: 'm'});
+    expect(metersOrConversion(10.75, 'metric')).toEqual({
+      value: 10.75,
+      unit: 'm',
+    });
+    expect(metersOrConversion(0.4, 'metric')).toEqual({value: 0.4, unit: 'm'});
+  });
+
+  it('converts to feet in imperial', () => {
+    expect(metersOrConversion(1, 'imperial')).toEqual({
+      value: 3.28084,
+      unit: 'ft',
+    });
+    expect(metersOrConversion(10, 'imperial')).toEqual({
+      value: 32.8084,
+      unit: 'ft',
+    });
+    expect(metersOrConversion(100, 'imperial')).toEqual({
+      value: 328.084,
+      unit: 'ft',
+    });
+  });
+});
+
+describe('kmOrConversion', () => {
+  it('returns km in metric', () => {
+    expect(kmOrConversion(1, 'metric')).toEqual({value: 1, unit: 'km'});
+    expect(kmOrConversion(5.678, 'metric')).toEqual({value: 5.678, unit: 'km'});
+  });
+
+  it('converts to miles in imperial', () => {
+    expect(kmOrConversion(1, 'imperial')).toEqual({
+      value: 0.621371,
+      unit: 'mi',
+    });
+    expect(kmOrConversion(10, 'imperial')).toEqual({
+      value: 6.21371,
+      unit: 'mi',
+    });
+    expect(kmOrConversion(0, 'imperial')).toEqual({value: 0, unit: 'mi'});
+  });
+});
+
+describe('metersPerSecondOrConversion', () => {
+  it('returns m/s in metric', () => {
+    expect(metersPerSecondOrConversion(1, 'metric')).toEqual({
+      value: 1,
+      unit: 'm/s',
+    });
+    expect(metersPerSecondOrConversion(9.81, 'metric')).toEqual({
+      value: 9.81,
+      unit: 'm/s',
+    });
+  });
+
+  it('converts to ft/s in imperial', () => {
+    expect(metersPerSecondOrConversion(1, 'imperial')).toEqual({
+      value: 3.28084,
+      unit: 'ft/s',
+    });
+    expect(metersPerSecondOrConversion(10, 'imperial')).toEqual({
+      value: 32.8084,
+      unit: 'ft/s',
+    });
+    expect(metersPerSecondOrConversion(0, 'imperial')).toEqual({
+      value: 0,
+      unit: 'ft/s',
+    });
+  });
+});