feat: create DistanceUnit Store

App/stores/distanceUnit.tsx

@@ -0,0 +1,54 @@
+import { AsyncStorage } from 'react-native';
+import React, { useState, useEffect, createContext, FC, useContext } from 'react';
+
+import { i18n } from '../localization';
+import { noop } from '../util/noop';
+
+export type DistanceUnit = 'km' | 'mile';
+type DistanceUnitFormat = 'short' | 'long';
+
+const STORAGE_KEY = 'DISTANCE_UNIT';
+
+type ContextType = {
+ distanceUnit: DistanceUnit;
+ setDistanceUnit: (distanceUnit: DistanceUnit) => void;
+ localizedDistanceUnit: (format: DistanceUnitFormat) => string;
+};
+
+const Context = createContext<ContextType>({
+ distanceUnit: 'km',
+ localizedDistanceUnit: (format: DistanceUnitFormat) => '',
+ setDistanceUnit: (unit: DistanceUnit) => {}
+});
+
+export const DistanceUnitProvider: FC = ({ children }) => {
+ const [distanceUnit, setDistanceUnit] = useState<DistanceUnit>('km');
+
+ const getDistanceUnit = async (): Promise<void> => {
+ const unit = await AsyncStorage.getItem(STORAGE_KEY);
+ if ((unit && unit === 'km') || (unit && unit === 'mile')) {
+ setDistanceUnit(unit);
+ }
+ };
+
+ const localizedDistanceUnit = (format: 'short' | 'long'): string =>
+ distanceUnit === 'km'
+ ? i18n.t(`distance_unit_${format}_km`)
+ : i18n.t(`distance_unit_${format}_mi`);
+
+ useEffect(() => {
+ getDistanceUnit();
+ }, []);
+
+ useEffect(() => {
+ AsyncStorage.setItem(STORAGE_KEY, distanceUnit);
+ }, [distanceUnit]);
+
+ return (
+ <Context.Provider value={{ distanceUnit, setDistanceUnit, localizedDistanceUnit }}>
+ {children}
+ </Context.Provider>
+ );
+};
+
+export const useDistanceUnit = () => useContext(Context);

App/stores/index.ts

@@ -18,3 +18,4 @@ export * from './api';
 export * from './error';
 export * from './frequency';
 export * from './location';
+export * from './distanceUnit';