feat: Implement miles/kilometer selector

App/App.tsx

@@ -14,72 +14,74 @@
 // 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
-} from './stores';
-import { setupAmplitude, track } from './util/amplitude';
+ LocationContextProvider,
+} 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>
  <LocationContextProvider>
  <ApiContextProvider>
  <FrequencyContextProvider>
- <Screens />
+ <DistanceUnitProvider>
+ <Screens />
+ </DistanceUnitProvider>
  </FrequencyContextProvider>
  </ApiContextProvider>
  </LocationContextProvider>
  </ErrorContextProvider>
  ) : (
  <LoadingBackground />
- );
+ )
 }

App/Screens/About/About.tsx

@@ -16,14 +16,7 @@
 
 import Constants from 'expo-constants';
 import React from 'react';
-import {
- Linking,
- Platform,
- ScrollView,
- StyleSheet,
- Text,
- View
-} from 'react-native';
+import { Linking, Platform, ScrollView, StyleSheet, Switch, Text, View } from 'react-native';
 import { ScrollIntoView, wrapScrollView } from 'react-native-scroll-into-view';
 import { scale } from 'react-native-size-matters';
 import { NavigationInjectedProps } from 'react-navigation';
@@ -33,6 +26,7 @@ import { BackButton } from '../../components';
 import { i18n } from '../../localization';
 import { trackScreen } from '../../util/amplitude';
 import * as theme from '../../util/theme';
+import { useDistanceUnit } from '../../stores/distanceUnit';
 
 const CustomScrollView = wrapScrollView(ScrollView);
 const scrollViewOptions = {
@@ -57,9 +51,7 @@ const handleOpenAqi = () => {
 };
 
 const handleOpenArticle = () => {
- Linking.openURL(
- 'http:https://berkeleyearth.org/air-pollution-and-cigarette-equivalence/'
- );
+ Linking.openURL('http:https://berkeleyearth.org/air-pollution-and-cigarette-equivalence/');
 };
 
 const handleOpenGithub = () => {
@@ -77,35 +69,26 @@ interface AboutProps
 
 export function About (props: AboutProps) {
  const { navigation } = props;
+ const { distanceUnit, localizedDistanceUnit, setDistanceUnit } = useDistanceUnit();
 
  trackScreen('ABOUT');
 
+ const toggleDistanceSwitch = (value: boolean) => setDistanceUnit(value ? 'km' : 'mile');
+
  return (
- <CustomScrollView
- scrollIntoViewOptions={scrollViewOptions}
- style={theme.withPadding}
- >
- <BackButton
- onPress={() => navigation.goBack()}
- style={styles.backButton}
- />
+ <CustomScrollView scrollIntoViewOptions={scrollViewOptions} style={theme.withPadding}>
+ <BackButton onPress={() => navigation.goBack()} style={styles.backButton} />
 
  <View style={styles.section}>
  <Text style={styles.h2}>
  {i18n.t('about_how_do_you_calculate_the_number_of_cigarettes_title')}
  </Text>
  <Text style={theme.text}>
- {i18n.t(
- 'about_how_do_you_calculate_the_number_of_cigarettes_message_1'
- )}{' '}
+ {i18n.t('about_how_do_you_calculate_the_number_of_cigarettes_message_1')}{' '}
  <Text onPress={handleOpenArticle} style={theme.link}>
- {i18n.t(
- 'about_how_do_you_calculate_the_number_of_cigarettes_link_1'
- )}
+ {i18n.t('about_how_do_you_calculate_the_number_of_cigarettes_link_1')}
  </Text>
- {i18n.t(
- 'about_how_do_you_calculate_the_number_of_cigarettes_message_2'
- )}
+ {i18n.t('about_how_do_you_calculate_the_number_of_cigarettes_message_2')}
  <Text style={styles.micro}>&micro;</Text>
  g/m&sup3;
  {' \u207D'}
@@ -126,15 +109,11 @@ export function About (props: AboutProps) {
  style={styles.section}
  >
  <Text style={styles.h2}>{i18n.t('about_beta_inaccurate_title')}</Text>
- <Text style={theme.text}>
- {i18n.t('about_beta_inaccurate_message')}
- </Text>
+ <Text style={theme.text}>{i18n.t('about_beta_inaccurate_message')}</Text>
  </ScrollIntoView>
 
  <View style={styles.section}>
- <Text style={styles.h2}>
- {i18n.t('about_where_does_data_come_from_title')}
- </Text>
+ <Text style={styles.h2}>{i18n.t('about_where_does_data_come_from_title')}</Text>
  <Text style={theme.text}>
  {i18n.t('about_where_does_data_come_from_message_1')}{' '}
  <Text onPress={handleOpenAqi} style={theme.link}>
@@ -145,17 +124,11 @@ export function About (props: AboutProps) {
  </View>
 
  <ScrollIntoView
- onMount={
- navigation.getParam('scrollInto') === 'aboutWhyIsTheStationSoFarTitle'
- }
+ onMount={navigation.getParam('scrollInto') === 'aboutWhyIsTheStationSoFarTitle'}
  style={styles.section}
  >
- <Text style={styles.h2}>
- {i18n.t('about_why_is_the_station_so_far_title')}
- </Text>
- <Text style={theme.text}>
- {i18n.t('about_why_is_the_station_so_far_message')}
- </Text>
+ <Text style={styles.h2}>{i18n.t('about_why_is_the_station_so_far_title')}</Text>
+ <Text style={theme.text}>{i18n.t('about_why_is_the_station_so_far_message')}</Text>
  </ScrollIntoView>
 
  <View style={styles.section}>
@@ -169,6 +142,18 @@ export function About (props: AboutProps) {
  </Text>
  </View>
 
+ <View style={styles.distance}>
+ <Text style={styles.h2}>{i18n.t('about_distance_unit_title')}</Text>
+ <View style={styles.distanceSwitchWrapper}>
+ <Switch
+ onValueChange={toggleDistanceSwitch}
+ trackColor={{ true: theme.primaryColor, false: theme.iconBackgroundColor }}
+ value={distanceUnit === 'km'}
+ />
+ <Text style={styles.distanceText}>{localizedDistanceUnit('long')}</Text>
+ </View>
+ </View>
+
  <View style={styles.credits}>
  <Text style={styles.h2}>{i18n.t('about_credits_title')}</Text>
  <Text style={theme.text}>
@@ -217,6 +202,23 @@ const styles = StyleSheet.create({
  marginBottom: theme.spacing.normal,
  paddingTop: theme.spacing.big
  },
+ distance: {
+ borderTopColor: theme.iconBackgroundColor,
+ borderTopWidth: 1,
+ marginBottom: theme.spacing.big,
+ paddingTop: theme.spacing.big
+ },
+ distanceSwitchWrapper: {
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'center'
+ },
+ distanceText: {
+ ...theme.text,
+ fontSize: scale(14),
+ paddingLeft: theme.spacing.small,
+ textTransform: 'capitalize'
+ },
  h2: {
  ...theme.title,
  fontSize: scale(20),

App/Screens/Details/Details.tsx

@@ -27,11 +27,8 @@ import { Header } from './Header';
 import { i18n } from '../../localization';
 import { ApiContext, CurrentLocationContext } from '../../stores';
 import { trackScreen } from '../../util/amplitude';
-import {
- distanceToStation,
- getCorrectLatLng,
- DistanceUnit
-} from '../../util/station';
+import { useDistanceUnit } from '../../stores/distanceUnit';
+import { distanceToStation, getCorrectLatLng } from '../../util/station';
 
 interface DetailsProps extends NavigationInjectedProps {}
 
@@ -43,9 +40,8 @@ export function Details (props: DetailsProps) {
 
  const [showMap, setShowMap] = useState(false);
  const { api } = useContext(ApiContext);
- const { currentLocation: _currentLocation } = useContext(
- CurrentLocationContext
- );
+ const { currentLocation: _currentLocation } = useContext(CurrentLocationContext);
+ const { distanceUnit } = useDistanceUnit();
 
  trackScreen('DETAILS');
 
@@ -68,14 +64,7 @@ export function Details (props: DetailsProps) {
  // object` error. It's related to the MapView below.
  const currentLocation = { ..._currentLocation! };
 
- const haversineDistanceUnit = i18n.t(
- 'haversine_distance_unit'
- ) as DistanceUnit;
- const distance = distanceToStation(
- currentLocation!,
- api!,
- haversineDistanceUnit
- );
+ const distance = distanceToStation(currentLocation!, api!, distanceUnit);
 
  const station = {
  description: api!.shootISmoke.station || '',
@@ -94,11 +83,9 @@ export function Details (props: DetailsProps) {
  <MapView
  initialRegion={{
  latitude: (currentLocation.latitude + station.latitude) / 2,
- latitudeDelta:
- Math.abs(currentLocation.latitude - station.latitude) * 2,
+ latitudeDelta: Math.abs(currentLocation.latitude - station.latitude) * 2,
  longitude: (currentLocation.longitude + station.longitude) / 2,
- longitudeDelta:
- Math.abs(currentLocation.longitude - station.longitude) * 2
+ longitudeDelta: Math.abs(currentLocation.longitude - station.longitude) * 2
  }}
  onMapReady={handleMapReady}
  style={styles.map}

App/Screens/Details/Distance/Distance.tsx

@@ -20,13 +20,15 @@ import { StyleSheet, Text } from 'react-native';
 import { Banner } from '../../../components';
 import { i18n } from '../../../localization';
 import * as theme from '../../../util/theme';
+import { useDistanceUnit } from '../../../stores/distanceUnit';
 
 interface DistanceProps {
  distance: number;
 }
 
 export function Distance (props: DistanceProps) {
- const distanceUnit = i18n.t('distance_unit');
+ const { localizedDistanceUnit } = useDistanceUnit();
+ const distanceUnit = localizedDistanceUnit('short');
 
  return (
  <Banner elevated shadowPosition="top" style={styles.banner}>