refactor: use new DistanceUnit Store

App/App.tsx

@@ -26,7 +26,8 @@ import {
  ApiContextProvider,
  ErrorContextProvider,
  FrequencyContextProvider,
- LocationContextProvider
+ LocationContextProvider,
+ DistanceUnitProvider
 } from './stores';
 import { setupAmplitude, track } from './util/amplitude';
 
@@ -42,11 +43,10 @@ if (Constants.manifest.extra.sentryPublicDsn) {
  }
 }
 
-export function App () {
+export function App() {
  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')
@@ -74,7 +74,9 @@ export function App () {
  <LocationContextProvider>
  <ApiContextProvider>
  <FrequencyContextProvider>
- <Screens />
+ <DistanceUnitProvider>
+ <Screens />
+ </DistanceUnitProvider>
  </FrequencyContextProvider>
  </ApiContextProvider>
  </LocationContextProvider>

App/Screens/About/About.tsx

@@ -14,72 +14,75 @@
 // 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 Constants from 'expo-constants'
-import React, { useState } from 'react'
-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'
-
-import { Box } from './Box'
-import { BackButton } from '../../components'
-import { i18n } from '../../localization'
-import { trackScreen } from '../../util/amplitude'
-import * as theme from '../../util/theme'
-
-const CustomScrollView = wrapScrollView(ScrollView)
+import Constants from 'expo-constants';
+import React, { useState } from 'react';
+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';
+
+import { Box } from './Box';
+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 = {
  align: 'top' as 'top',
  insets: {
  bottom: 0,
- top: scale(theme.spacing.normal),
- },
-}
+ top: scale(theme.spacing.normal)
+ }
+};
 
 export const aboutSections = {
  aboutBetaInaccurate: 'aboutBetaInaccurate',
- aboutWhyIsTheStationSoFarTitle: 'aboutWhyIsTheStationSoFarTitle',
-}
+ aboutWhyIsTheStationSoFarTitle: 'aboutWhyIsTheStationSoFarTitle'
+};
 
 const handleOpenAmaury = () => {
- Linking.openURL('https://twitter.com/amaurymartiny')
-}
+ Linking.openURL('https://twitter.com/amaurymartiny');
+};
 
 const handleOpenAqi = () => {
- Linking.openURL('http:https://aqicn.org/')
-}
+ Linking.openURL('http:https://aqicn.org/');
+};
 
 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 = () => {
- Linking.openURL('https://github.com/amaurymartiny/shoot-i-smoke')
-}
+ Linking.openURL('https://github.com/amaurymartiny/shoot-i-smoke');
+};
 
 const handleOpenMarcelo = () => {
- Linking.openURL('https://www.behance.net/marceloscoelho')
-}
+ Linking.openURL('https://www.behance.net/marceloscoelho');
+};
 
 interface AboutProps
  extends NavigationInjectedProps<{
- scrollInto?: keyof typeof aboutSections
+ scrollInto?: keyof typeof aboutSections;
  }> {}
 
 export function About(props: AboutProps) {
- const { navigation } = props
- const [milesDistance, setMilesDistance] = useState<boolean>(false)
+ const { navigation } = props;
+ const { distanceUnit, setDistanceUnit, localizedDistanceUnit } = useDistanceUnit();
 
- trackScreen('ABOUT')
+ trackScreen('ABOUT');
 
- const toggleDistanceSwitch = (value: boolean) => setMilesDistance(value)
+ const toggleDistanceSwitch = (value: boolean) => setDistanceUnit(value ? 'km' : 'mile');
 
  return (
  <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={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')}{' '}
  <Text onPress={handleOpenArticle} style={theme.link}>
@@ -101,7 +104,10 @@ export function About(props: AboutProps) {
  </Text>
  </View>
 
- <ScrollIntoView onMount={navigation.getParam('scrollInto') === 'aboutBetaInaccurate'} style={styles.section}>
+ <ScrollIntoView
+ onMount={navigation.getParam('scrollInto') === 'aboutBetaInaccurate'}
+ 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>
  </ScrollIntoView>
@@ -137,14 +143,14 @@ export function About(props: AboutProps) {
  </View>
 
  <View style={styles.distance}>
- <Text style={styles.h2}>{i18n.t('about_distance_title')}</Text>
+ <Text style={styles.h2}>{i18n.t('about_distance_unit_title')}</Text>
  <View style={styles.distanceSwitchWrapper}>
  <Switch
  onValueChange={toggleDistanceSwitch}
- value={milesDistance}
+ value={distanceUnit === 'km'}
  trackColor={{ true: theme.primaryColor, false: theme.iconBackgroundColor }}
  />
- <Text style={styles.distanceText}>{milesDistance ? 'Mile' : 'Kilometer'}</Text>
+ <Text style={styles.distanceText}>{localizedDistanceUnit('long')}</Text>
  </View>
  </View>
 
@@ -178,58 +184,59 @@ export function About(props: AboutProps) {
  {/* Add languages https://github.com/amaurymartiny/shoot-i-smoke/issues/73 */}
  </View>
  </CustomScrollView>
- )
+ );
 }
 
 const styles = StyleSheet.create({
  articleLink: {
  ...theme.text,
- fontSize: scale(8),
+ fontSize: scale(8)
  },
  backButton: {
  marginBottom: theme.spacing.normal,
- marginTop: theme.spacing.normal,
+ marginTop: theme.spacing.normal
  },
  credits: {
  borderTopColor: theme.iconBackgroundColor,
  borderTopWidth: 1,
  marginBottom: theme.spacing.normal,
- paddingTop: theme.spacing.big,
+ paddingTop: theme.spacing.big
  },
  distance: {
  borderTopColor: theme.iconBackgroundColor,
  borderTopWidth: 1,
  marginBottom: theme.spacing.big,
- paddingTop: theme.spacing.big,
+ paddingTop: theme.spacing.big
  },
  distanceSwitchWrapper: {
  display: 'flex',
  flexDirection: 'row',
- alignItems: 'center',
+ alignItems: 'center'
  },
  distanceText: {
  ...theme.text,
  fontSize: scale(14),
  paddingLeft: theme.spacing.small,
+ textTransform: 'capitalize'
  },
  h2: {
  ...theme.title,
  fontSize: scale(20),
  letterSpacing: 0,
  lineHeight: scale(24),
- marginBottom: theme.spacing.small,
+ marginBottom: theme.spacing.small
  },
  micro: {
  ...Platform.select({
  ios: {
- fontFamily: 'Georgia',
+ fontFamily: 'Georgia'
  },
  android: {
- fontFamily: 'normal',
- },
- }),
+ fontFamily: 'normal'
+ }
+ })
  },
  section: {
- marginBottom: theme.spacing.big,
- },
-})
+ marginBottom: theme.spacing.big
+ }
+});

App/Screens/Details/Details.tsx

@@ -27,25 +27,21 @@ 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 { distanceToStation, getCorrectLatLng } from '../../util/station';
+import { useDistanceUnit } from '../../stores/distanceUnit';
 
 interface DetailsProps extends NavigationInjectedProps {}
 
 // Holds the ref to the MapView.Marker representing the AQI station
 let stationMarker: Marker | undefined;
 
-export function Details (props: DetailsProps) {
+export function Details(props: DetailsProps) {
  const { navigation } = props;
 
  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');
+export function Distance(props: DistanceProps) {
+ const { localizedDistanceUnit } = useDistanceUnit();
+ const distanceUnit = localizedDistanceUnit('short');
 
  return (
  <Banner elevated shadowPosition="top" style={styles.banner}>

App/Screens/Home/Header/Header.tsx

@@ -15,60 +15,42 @@
 // 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 { 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,
- DistanceUnit
-} from '../../../util/station';
+import { distanceToStation, isStationTooFar } from '../../../util/station';
+import { useDistanceUnit } from '../../../stores/distanceUnit';
 import * as theme from '../../../util/theme';
 
 interface HeaderProps {
  onChangeLocationClick: (event: GestureResponderEvent) => void;
 }
 
-export function Header (props: HeaderProps) {
+export function Header(props: HeaderProps) {
  const { api } = useContext(ApiContext)!;
  const { currentLocation, isGps } = useContext(CurrentLocationContext);
+ const { localizedDistanceUnit, distanceUnit } = useDistanceUnit();
  const { onChangeLocationClick } = props;
 
- const distanceUnit = i18n.t('distance_unit');
- const haversineDistanceUnit = i18n.t(
- 'haversine_distance_unit'
- ) as DistanceUnit;
- const distance = distanceToStation(
- currentLocation!,
- api!,
- haversineDistanceUnit
- );
+ const shortDistanceUnit = localizedDistanceUnit('short');
+ const distance = distanceToStation(currentLocation!, api!, distanceUnit);
+ console.log('distance', distance + distanceUnit);
  const isTooFar = isStationTooFar(currentLocation!, api!);
 
  return (
  <View style={styles.container}>
  <View style={styles.currentLocation}>
- <CurrentLocation
- api={api!}
- currentLocation={currentLocation!}
- numberOfLines={2}
- />
+ <CurrentLocation api={api!} currentLocation={currentLocation!} numberOfLines={2} />
  <View style={styles.distance}>
  {isTooFar && <Image source={alert} style={styles.warning} />}
  <Text style={styles.distanceText}>
  {i18n.t('home_header_air_quality_station_distance', {
  distanceToStation: distance,
- distanceUnit
+ distanceUnit: shortDistanceUnit
  })}{' '}
  {!isGps && i18n.t('home_header_from_search')}
  </Text>