fix: resolve review's comments

App/App.tsx

@@ -14,60 +14,60 @@
 // You should have received a copy of the GNU General Public License
 // along with Sh**t! I Smoke. If not, see <http:https://www.gnu.org/licenses/>.
 
-import * as Font from 'expo-font';
-import Constants from 'expo-constants';
-import React, { useEffect, useState } from 'react';
-import { AppState } from 'react-native';
-import * as Sentry from 'sentry-expo';
+import * as Font from 'expo-font'
+import Constants from 'expo-constants'
+import React, { useEffect, useState } from 'react'
+import { AppState } from 'react-native'
+import * as Sentry from 'sentry-expo'
 
-import { Screens } from './Screens';
-import { Background as LoadingBackground } from './Screens/Loading/Background';
+import { Screens } from './Screens'
+import { Background as LoadingBackground } from './Screens/Loading/Background'
 import {
  ApiContextProvider,
+ DistanceUnitProvider,
  ErrorContextProvider,
  FrequencyContextProvider,
  LocationContextProvider,
- DistanceUnitProvider
-} from './stores';
-import { setupAmplitude, track } from './util/amplitude';
+} from './stores'
+import { setupAmplitude, track } from './util/amplitude'
 
 // Add Sentry if available
 if (Constants.manifest.extra.sentryPublicDsn) {
  Sentry.init({
  dsn: Constants.manifest.extra.sentryPublicDsn,
- debug: true
- });
+ debug: true,
+ })
 
  if (Constants.manifest.revisionId) {
- Sentry.setRelease(Constants.manifest.revisionId);
+ Sentry.setRelease(Constants.manifest.revisionId)
  }
 }
 
 export function App () {
- const [ready, setReady] = useState(false);
+ const [ready, setReady] = useState(false)
  useEffect(() => {
  Promise.all([
  Font.loadAsync({
  'gotham-black': require('../assets/fonts/Gotham-Black.ttf'),
- 'gotham-book': require('../assets/fonts/Gotham-Book.ttf')
+ 'gotham-book': require('../assets/fonts/Gotham-Book.ttf'),
  }),
  // Add Amplitude if available
- setupAmplitude()
+ setupAmplitude(),
  ])
 
  .then(() => setReady(true))
- .catch(console.error);
- }, []);
+ .catch(console.error)
+ }, [])
 
  useEffect(() => {
  AppState.addEventListener('change', state => {
  if (state === 'active') {
- track('APP_REFOCUS');
+ track('APP_REFOCUS')
  } else if (state === 'background') {
- track('APP_EXIT');
+ track('APP_EXIT')
  }
- });
- }, []);
+ })
+ }, [])
 
  return ready ? (
  <ErrorContextProvider>
@@ -83,5 +83,5 @@ export function App () {
  </ErrorContextProvider>
  ) : (
  <LoadingBackground />
- );
+ )
 }

App/Screens/About/About.tsx

@@ -69,7 +69,7 @@ interface AboutProps
 
 export function About (props: AboutProps) {
  const { navigation } = props;
- const { distanceUnit, setDistanceUnit, localizedDistanceUnit } = useDistanceUnit();
+ const { distanceUnit, localizedDistanceUnit, setDistanceUnit } = useDistanceUnit();
 
  trackScreen('ABOUT');
 
@@ -147,8 +147,8 @@ export function About (props: AboutProps) {
  <View style={styles.distanceSwitchWrapper}>
  <Switch
  onValueChange={toggleDistanceSwitch}
- value={distanceUnit === 'km'}
  trackColor={{ true: theme.primaryColor, false: theme.iconBackgroundColor }}
+ value={distanceUnit === 'km'}
  />
  <Text style={styles.distanceText}>{localizedDistanceUnit('long')}</Text>
  </View>

App/Screens/Details/Details.tsx

@@ -27,8 +27,8 @@ import { Header } from './Header';
 import { i18n } from '../../localization';
 import { ApiContext, CurrentLocationContext } from '../../stores';
 import { trackScreen } from '../../util/amplitude';
-import { distanceToStation, getCorrectLatLng } from '../../util/station';
 import { useDistanceUnit } from '../../stores/distanceUnit';
+import { distanceToStation, getCorrectLatLng } from '../../util/station';
 
 interface DetailsProps extends NavigationInjectedProps {}
 

App/Screens/Home/Header/Header.tsx

@@ -14,32 +14,31 @@
 // You should have received a copy of the GNU General Public License
 // along with Sh**t! I Smoke. If not, see <http:https://www.gnu.org/licenses/>.
 
-import React, { useContext } from 'react';
-import { GestureResponderEvent, Image, StyleSheet, Text, View } from 'react-native';
-import { scale } from 'react-native-size-matters';
+import React, { useContext } from 'react'
+import { GestureResponderEvent, Image, StyleSheet, Text, View } from 'react-native'
+import { scale } from 'react-native-size-matters'
 
-import alert from '../../../../assets/images/alert.png';
-import { ChangeLocation, CurrentLocation } from '../../../components';
-import { i18n } from '../../../localization';
-import { ApiContext, CurrentLocationContext } from '../../../stores';
-import { distanceToStation, isStationTooFar } from '../../../util/station';
-import { useDistanceUnit } from '../../../stores/distanceUnit';
-import * as theme from '../../../util/theme';
+import alert from '../../../../assets/images/alert.png'
+import { ChangeLocation, CurrentLocation } from '../../../components'
+import { i18n } from '../../../localization'
+import { ApiContext, CurrentLocationContext } from '../../../stores'
+import { distanceToStation, isStationTooFar } from '../../../util/station'
+import { useDistanceUnit } from '../../../stores/distanceUnit'
+import * as theme from '../../../util/theme'
 
 interface HeaderProps {
- onChangeLocationClick: (event: GestureResponderEvent) => void;
+ onChangeLocationClick: (event: GestureResponderEvent) => void
 }
 
 export function Header (props: HeaderProps) {
- const { api } = useContext(ApiContext)!;
- const { currentLocation, isGps } = useContext(CurrentLocationContext);
- const { localizedDistanceUnit, distanceUnit } = useDistanceUnit();
- const { onChangeLocationClick } = props;
+ const { api } = useContext(ApiContext)!
+ const { currentLocation, isGps } = useContext(CurrentLocationContext)
+ const { distanceUnit, localizedDistanceUnit } = useDistanceUnit()
+ const { onChangeLocationClick } = props
 
- const shortDistanceUnit = localizedDistanceUnit('short');
- const distance = distanceToStation(currentLocation!, api!, distanceUnit);
- console.log('distance', distance + distanceUnit);
- const isTooFar = isStationTooFar(currentLocation!, api!);
+ const shortDistanceUnit = localizedDistanceUnit('short')
+ const distance = distanceToStation(currentLocation!, api!, distanceUnit)
+ const isTooFar = isStationTooFar(currentLocation!, api!)
 
  return (
  <View style={styles.container}>
@@ -50,7 +49,7 @@ export function Header (props: HeaderProps) {
  <Text style={styles.distanceText}>
  {i18n.t('home_header_air_quality_station_distance', {
  distanceToStation: distance,
- distanceUnit: shortDistanceUnit
+ distanceUnit: shortDistanceUnit,
  })}{' '}
  {!isGps && i18n.t('home_header_from_search')}
  </Text>
@@ -59,31 +58,31 @@ export function Header (props: HeaderProps) {
 
  <ChangeLocation onPress={onChangeLocationClick} />
  </View>
- );
+ )
 }
 
 const styles = StyleSheet.create({
  container: {
  ...theme.withPadding,
  alignItems: 'center',
  flexDirection: 'row',
- paddingTop: theme.spacing.normal
+ paddingTop: theme.spacing.normal,
  },
  currentLocation: {
  flex: 1,
- marginRight: theme.spacing.mini
+ marginRight: theme.spacing.mini,
  },
  distance: {
  alignItems: 'center',
  flexDirection: 'row',
- marginTop: theme.spacing.mini
+ marginTop: theme.spacing.mini,
  },
  distanceText: {
  ...theme.text,
- flex: 1
+ flex: 1,
  },
  warning: {
  marginRight: theme.spacing.mini,
- marginTop: scale(-2) // FIXME We shouldn't need that, with `alignItems: 'center'` on .distance
- }
-});
+ marginTop: scale(-2), // FIXME We shouldn't need that, with `alignItems: 'center'` on .distance
+ },
+})

App/stores/distanceUnit.tsx

@@ -1,5 +1,5 @@
+import React, { createContext, ReactNode, useContext, useEffect, useState } from 'react';
 import { AsyncStorage } from 'react-native';
-import React, { useState, useEffect, createContext, FC, useContext } from 'react';
 
 import { i18n } from '../localization';
 
@@ -20,8 +20,8 @@ const Context = createContext<ContextType>({
  setDistanceUnit: () => {}
 });
 
-export const DistanceUnitProvider: FC = ({ children }) => {
- const [distanceUnit, setDistanceUnit] = useState<DistanceUnit>('km');
+export function DistanceUnitProvider ({ children }: { children: ReactNode }) {
+ const [distanceUnit, setDistanceUnit] = useState<DistanceUnit>(i18n.locale === 'en-US' ? 'mile' : 'km');
 
  const getDistanceUnit = async (): Promise<void> => {
  const unit = await AsyncStorage.getItem(STORAGE_KEY);