From 1fef76612527fa9e613ef5427481e2a0c4dcb8a0 Mon Sep 17 00:00:00 2001
From: Mate Papp <matepapp@icloud.com>
Date: Sat, 5 Oct 2019 16:42:18 +0200
Subject: [PATCH 01/11] feat: extend i18n data with distance

---
 App/localization/languages/en-us.json | 3 ++-
 App/localization/languages/en.json    | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/App/localization/languages/en-us.json b/App/localization/languages/en-us.json
index d569872a..ee075d74 100644
--- a/App/localization/languages/en-us.json
+++ b/App/localization/languages/en-us.json
@@ -76,6 +76,7 @@
   "about_weird_results_message_1": "We have also encountered a few surprising results: large cities with better air than small villages; sudden huge increases in the number of cigarettes; stations of the same town showing significantly different numbers... The fact is air quality depends on several factors such as temperature, pressure, humidity and even wind direction and intensity. If the result seems weird for you, check",
   "about_weird_results_link_1": "WAQI",
   "about_weird_results_message_2": "for more information and history on your station.",
+  "about_distance_title": "Distance",
   "about_credits_title": "Credits",
   "about_credits_concept_and_development": "Concept & Development by",
   "about_credits_design_and_copywriting": "Design & Copywriting by",
@@ -84,4 +85,4 @@
   "about_credits_available_github": "available on Github",
   "about_language": "Language",
   "current_location_unknown_station": "Unknown AQI station"
-}
\ No newline at end of file
+}
diff --git a/App/localization/languages/en.json b/App/localization/languages/en.json
index 5ffbe8f2..7a55241a 100644
--- a/App/localization/languages/en.json
+++ b/App/localization/languages/en.json
@@ -76,6 +76,7 @@
   "about_weird_results_message_1": "We have also encountered a few surprising results: large cities with better air than small villages; sudden huge increases in the number of cigarettes; stations of the same town showing significantly different numbers... The fact is air quality depends on several factors such as temperature, pressure, humidity and even wind direction and intensity. If the result seems weird for you, check",
   "about_weird_results_link_1": "WAQI",
   "about_weird_results_message_2": "for more information and history on your station.",
+  "about_distance_title": "Distance",
   "about_credits_title": "Credits",
   "about_credits_concept_and_development": "Concept & Development by",
   "about_credits_design_and_copywriting": "Design & Copywriting by",
@@ -84,4 +85,4 @@
   "about_credits_available_github": "available on Github",
   "about_language": "Language",
   "current_location_unknown_station": "Unknown AQI station"
-}
\ No newline at end of file
+}

From cb4f84eedc0313d2eb57967ce9ed3b90c193f3ba Mon Sep 17 00:00:00 2001
From: Mate Papp <matepapp@icloud.com>
Date: Sat, 5 Oct 2019 16:42:33 +0200
Subject: [PATCH 02/11] feat: implement initial switch logic and styling

---
 App/Screens/About/About.tsx | 181 ++++++++++++++++++------------------
 yarn.lock                   |   5 +
 2 files changed, 93 insertions(+), 93 deletions(-)

diff --git a/App/Screens/About/About.tsx b/App/Screens/About/About.tsx
index ce4c307a..540ad690 100644
--- a/App/Screens/About/About.tsx
+++ b/App/Screens/About/About.tsx
@@ -14,98 +14,78 @@
 // You should have received a copy of the GNU General Public License
 // along with Sh**t! I Smoke.  If not, see <http://www.gnu.org/licenses/>.
 
-import Constants from 'expo-constants';
-import React from 'react';
-import {
-  Linking,
-  Platform,
-  ScrollView,
-  StyleSheet,
-  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'
+
+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://aqicn.org/');
-};
+  Linking.openURL('http://aqicn.org/')
+}
 
 const handleOpenArticle = () => {
-  Linking.openURL(
-    'http://berkeleyearth.org/air-pollution-and-cigarette-equivalence/'
-  );
-};
+  Linking.openURL('http://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;
+export function About(props: AboutProps) {
+  const { navigation } = props
+  const [milesDistance, setMilesDistance] = useState<boolean>(false)
 
-  trackScreen('ABOUT');
+  trackScreen('ABOUT')
+
+  const toggleDistanceSwitch = (value: boolean) => setMilesDistance(value)
 
   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={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'}
@@ -121,20 +101,13 @@ 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>
+        <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 +118,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 +136,18 @@ export function About (props: AboutProps) {
         </Text>
       </View>
 
+      <View style={styles.distance}>
+        <Text style={styles.h2}>{i18n.t('about_distance_title')}</Text>
+        <View style={styles.distanceSwitchWrapper}>
+          <Switch
+            onValueChange={toggleDistanceSwitch}
+            value={milesDistance}
+            trackColor={{ true: theme.primaryColor, false: theme.iconBackgroundColor }}
+          />
+          <Text style={styles.distanceText}>{milesDistance ? 'Mile' : 'Kilometer'}</Text>
+        </View>
+      </View>
+
       <View style={styles.credits}>
         <Text style={styles.h2}>{i18n.t('about_credits_title')}</Text>
         <Text style={theme.text}>
@@ -199,42 +178,58 @@ 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,
+  },
+  distanceSwitchWrapper: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  distanceText: {
+    ...theme.text,
+    fontSize: scale(14),
+    paddingLeft: theme.spacing.small,
   },
   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,
+  },
+})
diff --git a/yarn.lock b/yarn.lock
index 8adc22c2..64d60122 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3121,6 +3121,11 @@ expo-permissions@^7.0.0, expo-permissions@~7.0.0:
   resolved "https://registry.yarnpkg.com/expo-permissions/-/expo-permissions-7.0.0.tgz#f4135c3cf8e49c673a9a714459a1eb2b40fe2092"
   integrity sha512-C+qyVz+pdZO4YpVR2HSC3gsBZg0Qb8brCFgzmDmWcAtgrOiHClaLPdhI2XtQuGh8ubXcKPUGZp++UCEGiG0Jxg==
 
+expo-sharing@~7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/expo-sharing/-/expo-sharing-7.0.0.tgz#761d2f446d7bfea5f9b5026b03a743ccc40e72e3"
+  integrity sha512-yQb61xoN0nXp6bOiH3XVcgu58HLjylrrnYiLsXQPTkbtoLTjFgJkOhaQE3NEuNk3xAIXE35ED1K2s2s+xxuuQQ==
+
 expo-sqlite@~7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/expo-sqlite/-/expo-sqlite-7.0.0.tgz#f52585b342278b4034c06caac8384edb2531afa4"

From b181ffcafbca1261d5c7aa102ce5e12a0563ce34 Mon Sep 17 00:00:00 2001
From: Mate Papp <matepapp@icloud.com>
Date: Sat, 5 Oct 2019 18:33:28 +0200
Subject: [PATCH 03/11] chore: add prettier config file

---
 .prettierrc | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 .prettierrc

diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 00000000..5ac85e27
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "printWidth": 100,
+  "singleQuote": true
+}

From 9ffc59a5d35844ebd7d93848db06563eef2e3828 Mon Sep 17 00:00:00 2001
From: Mate Papp <matepapp@icloud.com>
Date: Sat, 5 Oct 2019 18:34:10 +0200
Subject: [PATCH 04/11] feat: extend translations with distance

---
 App/localization/languages/en-us.json | 8 +++++---
 App/localization/languages/en.json    | 8 +++++---
 App/localization/languages/es.json    | 9 ++++++---
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/App/localization/languages/en-us.json b/App/localization/languages/en-us.json
index ee075d74..3de8fa1a 100644
--- a/App/localization/languages/en-us.json
+++ b/App/localization/languages/en-us.json
@@ -50,8 +50,10 @@
   "details_header_latest_update_ago": "ago",
   "details_header_primary_pollutant_label": "Primary Pollutant:",
   "details_distance_label": "AQI Station: {{distanceToStation}}{{distanceUnit}} away",
-  "distance_unit": "mi",
-  "haversine_distance_unit": "mile",
+  "distance_unit_short_km": "km",
+  "distance_unit_short_mi": "mi",
+  "distance_unit_long_km": "kilometer",
+  "distance_unit_long_mi": "mile",
   "past_stations_loading": "Loading",
   "past_stations_date_from_to": "{{startDate}} to {{endDate}}",
   "past_stations_monitored_weekly": "Stations monitored from you during the week",
@@ -76,7 +78,7 @@
   "about_weird_results_message_1": "We have also encountered a few surprising results: large cities with better air than small villages; sudden huge increases in the number of cigarettes; stations of the same town showing significantly different numbers... The fact is air quality depends on several factors such as temperature, pressure, humidity and even wind direction and intensity. If the result seems weird for you, check",
   "about_weird_results_link_1": "WAQI",
   "about_weird_results_message_2": "for more information and history on your station.",
-  "about_distance_title": "Distance",
+  "about_distance_unit_title": "Distance Unit",
   "about_credits_title": "Credits",
   "about_credits_concept_and_development": "Concept & Development by",
   "about_credits_design_and_copywriting": "Design & Copywriting by",
diff --git a/App/localization/languages/en.json b/App/localization/languages/en.json
index 7a55241a..115e0490 100644
--- a/App/localization/languages/en.json
+++ b/App/localization/languages/en.json
@@ -50,8 +50,10 @@
   "details_header_latest_update_ago": "ago",
   "details_header_primary_pollutant_label": "Primary Pollutant:",
   "details_distance_label": "AQI Station: {{distanceToStation}}{{distanceUnit}} away",
-  "distance_unit": "km",
-  "haversine_distance_unit": "km",
+  "distance_unit_short_km": "km",
+  "distance_unit_short_mi": "mi",
+  "distance_unit_long_km": "kilometer",
+  "distance_unit_long_mi": "mile",
   "past_stations_loading": "Loading",
   "past_stations_date_from_to": "{{startDate}} to {{endDate}}",
   "past_stations_monitored_weekly": "Stations monitored from you during the week",
@@ -76,7 +78,7 @@
   "about_weird_results_message_1": "We have also encountered a few surprising results: large cities with better air than small villages; sudden huge increases in the number of cigarettes; stations of the same town showing significantly different numbers... The fact is air quality depends on several factors such as temperature, pressure, humidity and even wind direction and intensity. If the result seems weird for you, check",
   "about_weird_results_link_1": "WAQI",
   "about_weird_results_message_2": "for more information and history on your station.",
-  "about_distance_title": "Distance",
+  "about_distance_unit_title": "Distance Unit",
   "about_credits_title": "Credits",
   "about_credits_concept_and_development": "Concept & Development by",
   "about_credits_design_and_copywriting": "Design & Copywriting by",
diff --git a/App/localization/languages/es.json b/App/localization/languages/es.json
index 6b45d5a8..093f8964 100644
--- a/App/localization/languages/es.json
+++ b/App/localization/languages/es.json
@@ -36,8 +36,10 @@
   "details_header_latest_update_label": "Última actualización:",
   "details_header_primary_pollutant_label": "Contaminante primario:",
   "details_distance_label": "Estación AQI: a {{distanceToStation}}{{distanceUnit}}",
-  "distance_unit": "km",
-  "haversine_distance_unit": "km",
+  "distance_unit_short_km": "km",
+  "distance_unit_short_mi": "mi",
+  "distance_unit_long_km": "kilómetro",
+  "distance_unit_long_mi": "milla",
   "about_how_do_you_calculate_the_number_of_cigarettes_title": "Cálculo de cigarrillos",
   "about_how_do_you_calculate_the_number_of_cigarettes_message_1": "Esta aplicación se inspiró en los hallazgos de Berkeley Earth sobre la",
   "about_how_do_you_calculate_the_number_of_cigarettes_link_1": "Equivalencia entre la contaminación del aire y el tabaquismo.",
@@ -54,6 +56,7 @@
   "about_weird_results_message_1": "Hemos encontrado algunos resultados sorprendentes: ciudades grandes con mejor aire que pequeñas aldeas;grandes aumentos en el número de cigarrillos; Las estaciones de la misma ciudad muestran números significativamente diferentes ... El hecho es que la calidad del aire depende de varios factores, como la temperatura, la presión, la humedad e incluso la dirección e intensidad del viento. Si el resultado te parece extraño, verifica",
   "about_weird_results_link_1": "WAQI",
   "about_weird_results_message_2": "Para más información en su estación.",
+  "about_distance_unit_title": "Unidad de Distancia",
   "about_credits_title": "Creditos",
   "about_credits_concept_and_development": "Concepto y Desarrollo por",
   "about_credits_design_and_copywriting": "Diseño y Copywriting por",
@@ -61,4 +64,4 @@
   "about_credits_source_code": "Código fuente",
   "about_credits_available_github": "disponible en Github",
   "about_language": "Idioma"
-}
\ No newline at end of file
+}

From e9f80e07d91aba0692f061f122bccd064386050c Mon Sep 17 00:00:00 2001
From: Mate Papp <matepapp@icloud.com>
Date: Sat, 5 Oct 2019 18:34:49 +0200
Subject: [PATCH 05/11] feat: create DistanceUnit Store

---
 App/stores/distanceUnit.tsx | 54 +++++++++++++++++++++++++++++++++++++
 App/stores/index.ts         |  1 +
 2 files changed, 55 insertions(+)
 create mode 100644 App/stores/distanceUnit.tsx

diff --git a/App/stores/distanceUnit.tsx b/App/stores/distanceUnit.tsx
new file mode 100644
index 00000000..fdde91cd
--- /dev/null
+++ b/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);
diff --git a/App/stores/index.ts b/App/stores/index.ts
index 49c36226..86ace7fa 100644
--- a/App/stores/index.ts
+++ b/App/stores/index.ts
@@ -18,3 +18,4 @@ export * from './api';
 export * from './error';
 export * from './frequency';
 export * from './location';
+export * from './distanceUnit';

From 97853e60e7cf4ccbf61608d93282a2e1a9b83f67 Mon Sep 17 00:00:00 2001
From: Mate Papp <matepapp@icloud.com>
Date: Sat, 5 Oct 2019 18:36:05 +0200
Subject: [PATCH 06/11] refactor: use new DistanceUnit Store

---
 App/App.tsx                               |  10 +-
 App/Screens/About/About.tsx               | 113 ++++++++++++----------
 App/Screens/Details/Details.tsx           |  29 ++----
 App/Screens/Details/Distance/Distance.tsx |   6 +-
 App/Screens/Home/Header/Header.tsx        |  38 ++------
 App/util/station.ts                       |   7 +-
 6 files changed, 91 insertions(+), 112 deletions(-)

diff --git a/App/App.tsx b/App/App.tsx
index 614260e8..76463847 100644
--- a/App/App.tsx
+++ b/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>
diff --git a/App/Screens/About/About.tsx b/App/Screens/About/About.tsx
index 540ad690..e03219fb 100644
--- a/App/Screens/About/About.tsx
+++ b/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://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://aqicn.org/')
-}
+  Linking.openURL('http://aqicn.org/');
+};
 
 const handleOpenArticle = () => {
-  Linking.openURL('http://berkeleyearth.org/air-pollution-and-cigarette-equivalence/')
-}
+  Linking.openURL('http://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
+  }
+});
diff --git a/App/Screens/Details/Details.tsx b/App/Screens/Details/Details.tsx
index a49b9b78..8e7174c2 100644
--- a/App/Screens/Details/Details.tsx
+++ b/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}
diff --git a/App/Screens/Details/Distance/Distance.tsx b/App/Screens/Details/Distance/Distance.tsx
index 84286ba2..bbc66031 100644
--- a/App/Screens/Details/Distance/Distance.tsx
+++ b/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}>
diff --git a/App/Screens/Home/Header/Header.tsx b/App/Screens/Home/Header/Header.tsx
index 4c9fe407..91c4fa20 100644
--- a/App/Screens/Home/Header/Header.tsx
+++ b/App/Screens/Home/Header/Header.tsx
@@ -15,60 +15,42 @@
 // along with Sh**t! I Smoke.  If not, see <http://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>
diff --git a/App/util/station.ts b/App/util/station.ts
index ee19f1cd..20691f26 100644
--- a/App/util/station.ts
+++ b/App/util/station.ts
@@ -18,12 +18,11 @@ import haversine from 'haversine';
 
 import { Api } from '../stores/fetchApi';
 import { LatLng } from '../stores/fetchGpsPosition';
+import { DistanceUnit } from '../stores/distanceUnit';
 
 // Above this distance (km), we consider the station too far from the user
 export const MAX_DISTANCE_TO_STATION = 10;
 
-export type DistanceUnit = 'km' | 'mile';
-
 /**
  * Get distance from current location to station.
  *
@@ -31,7 +30,7 @@ export type DistanceUnit = 'km' | 'mile';
  * @param api - The api object returned by remote data.
  * @param unit - The unit of measure returned.
  */
-export function distanceToStation (currentLocation: LatLng, api: Api, unit: DistanceUnit = 'km') {
+export function distanceToStation(currentLocation: LatLng, api: Api, unit: DistanceUnit = 'km') {
   return Math.round(
     haversine(
       currentLocation,
@@ -51,7 +50,7 @@ export function distanceToStation (currentLocation: LatLng, api: Api, unit: Dist
  * @param currentLocation - The current location of the user.
  * @param api - The api object returned by remote data.
  */
-export function isStationTooFar (currentLocation: LatLng, api: Api) {
+export function isStationTooFar(currentLocation: LatLng, api: Api) {
   return distanceToStation(currentLocation, api) > MAX_DISTANCE_TO_STATION;
 }
 

From b457cc9c1978afe6985eeedba8275abcf1aaeae9 Mon Sep 17 00:00:00 2001
From: Mate Papp <matepapp@icloud.com>
Date: Sat, 5 Oct 2019 19:00:47 +0200
Subject: [PATCH 07/11] fix: add missing whitespaces

---
 App/App.tsx                               | 2 +-
 App/Screens/About/About.tsx               | 4 ++--
 App/Screens/Details/Details.tsx           | 2 +-
 App/Screens/Details/Distance/Distance.tsx | 2 +-
 App/Screens/Home/Header/Header.tsx        | 2 +-
 App/stores/distanceUnit.tsx               | 5 ++---
 App/util/station.ts                       | 4 ++--
 7 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/App/App.tsx b/App/App.tsx
index 76463847..0793a2d2 100644
--- a/App/App.tsx
+++ b/App/App.tsx
@@ -43,7 +43,7 @@ if (Constants.manifest.extra.sentryPublicDsn) {
   }
 }
 
-export function App() {
+export function App () {
   const [ready, setReady] = useState(false);
   useEffect(() => {
     Promise.all([
diff --git a/App/Screens/About/About.tsx b/App/Screens/About/About.tsx
index e03219fb..d362c51b 100644
--- a/App/Screens/About/About.tsx
+++ b/App/Screens/About/About.tsx
@@ -15,7 +15,7 @@
 // along with Sh**t! I Smoke.  If not, see <http://www.gnu.org/licenses/>.
 
 import Constants from 'expo-constants';
-import React, { useState } from 'react';
+import React 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';
@@ -67,7 +67,7 @@ interface AboutProps
     scrollInto?: keyof typeof aboutSections;
   }> {}
 
-export function About(props: AboutProps) {
+export function About (props: AboutProps) {
   const { navigation } = props;
   const { distanceUnit, setDistanceUnit, localizedDistanceUnit } = useDistanceUnit();
 
diff --git a/App/Screens/Details/Details.tsx b/App/Screens/Details/Details.tsx
index 8e7174c2..8d65dbc3 100644
--- a/App/Screens/Details/Details.tsx
+++ b/App/Screens/Details/Details.tsx
@@ -35,7 +35,7 @@ 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);
diff --git a/App/Screens/Details/Distance/Distance.tsx b/App/Screens/Details/Distance/Distance.tsx
index bbc66031..9e6c9968 100644
--- a/App/Screens/Details/Distance/Distance.tsx
+++ b/App/Screens/Details/Distance/Distance.tsx
@@ -26,7 +26,7 @@ interface DistanceProps {
   distance: number;
 }
 
-export function Distance(props: DistanceProps) {
+export function Distance (props: DistanceProps) {
   const { localizedDistanceUnit } = useDistanceUnit();
   const distanceUnit = localizedDistanceUnit('short');
 
diff --git a/App/Screens/Home/Header/Header.tsx b/App/Screens/Home/Header/Header.tsx
index 91c4fa20..3bcf5ef9 100644
--- a/App/Screens/Home/Header/Header.tsx
+++ b/App/Screens/Home/Header/Header.tsx
@@ -30,7 +30,7 @@ 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();
diff --git a/App/stores/distanceUnit.tsx b/App/stores/distanceUnit.tsx
index fdde91cd..1c2b87b1 100644
--- a/App/stores/distanceUnit.tsx
+++ b/App/stores/distanceUnit.tsx
@@ -2,7 +2,6 @@ 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';
@@ -17,8 +16,8 @@ type ContextType = {
 
 const Context = createContext<ContextType>({
   distanceUnit: 'km',
-  localizedDistanceUnit: (format: DistanceUnitFormat) => '',
-  setDistanceUnit: (unit: DistanceUnit) => {}
+  localizedDistanceUnit: () => '',
+  setDistanceUnit: () => {}
 });
 
 export const DistanceUnitProvider: FC = ({ children }) => {
diff --git a/App/util/station.ts b/App/util/station.ts
index 20691f26..27f56756 100644
--- a/App/util/station.ts
+++ b/App/util/station.ts
@@ -30,7 +30,7 @@ export const MAX_DISTANCE_TO_STATION = 10;
  * @param api - The api object returned by remote data.
  * @param unit - The unit of measure returned.
  */
-export function distanceToStation(currentLocation: LatLng, api: Api, unit: DistanceUnit = 'km') {
+export function distanceToStation (currentLocation: LatLng, api: Api, unit: DistanceUnit = 'km') {
   return Math.round(
     haversine(
       currentLocation,
@@ -50,7 +50,7 @@ export function distanceToStation(currentLocation: LatLng, api: Api, unit: Dista
  * @param currentLocation - The current location of the user.
  * @param api - The api object returned by remote data.
  */
-export function isStationTooFar(currentLocation: LatLng, api: Api) {
+export function isStationTooFar (currentLocation: LatLng, api: Api) {
   return distanceToStation(currentLocation, api) > MAX_DISTANCE_TO_STATION;
 }
 

From 48c542037d95a9eff5df3f73bfb10a2b74a462e2 Mon Sep 17 00:00:00 2001
From: Mate Papp <matepapp@icloud.com>
Date: Sat, 5 Oct 2019 19:04:36 +0200
Subject: [PATCH 08/11] chore: remove prettierrc

---
 .prettierrc | 4 ----
 1 file changed, 4 deletions(-)
 delete mode 100644 .prettierrc

diff --git a/.prettierrc b/.prettierrc
deleted file mode 100644
index 5ac85e27..00000000
--- a/.prettierrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "printWidth": 100,
-  "singleQuote": true
-}

From 699dfbf8e748b53cf2861a06fbf11f3f9d6aa9ef Mon Sep 17 00:00:00 2001
From: Mate Papp <matepapp@icloud.com>
Date: Sun, 6 Oct 2019 17:31:26 +0200
Subject: [PATCH 09/11] Update App/stores/distanceUnit.tsx

Co-Authored-By: Amaury Martiny <amaury.martiny@protonmail.com>
---
 App/stores/distanceUnit.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/App/stores/distanceUnit.tsx b/App/stores/distanceUnit.tsx
index 1c2b87b1..12ab8866 100644
--- a/App/stores/distanceUnit.tsx
+++ b/App/stores/distanceUnit.tsx
@@ -25,7 +25,7 @@ export const DistanceUnitProvider: FC = ({ children }) => {
 
   const getDistanceUnit = async (): Promise<void> => {
     const unit = await AsyncStorage.getItem(STORAGE_KEY);
-    if ((unit && unit === 'km') || (unit && unit === 'mile')) {
+    if (unit === 'km' || unit === 'mile') {
       setDistanceUnit(unit);
     }
   };

From f67dcdd1b4472d0dd0b2d7d2d96c48b12925f015 Mon Sep 17 00:00:00 2001
From: Mate Papp <matepapp@icloud.com>
Date: Sun, 6 Oct 2019 17:35:38 +0200
Subject: [PATCH 10/11] fix: resolve review's comments

---
 App/App.tsx                        | 46 ++++++++++++-------------
 App/Screens/About/About.tsx        |  4 +--
 App/Screens/Details/Details.tsx    |  2 +-
 App/Screens/Home/Header/Header.tsx | 55 +++++++++++++++---------------
 App/stores/distanceUnit.tsx        |  6 ++--
 5 files changed, 56 insertions(+), 57 deletions(-)

diff --git a/App/App.tsx b/App/App.tsx
index 0793a2d2..0c90f278 100644
--- a/App/App.tsx
+++ b/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://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 />
-  );
+  )
 }
diff --git a/App/Screens/About/About.tsx b/App/Screens/About/About.tsx
index d362c51b..44d17e72 100644
--- a/App/Screens/About/About.tsx
+++ b/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>
diff --git a/App/Screens/Details/Details.tsx b/App/Screens/Details/Details.tsx
index 8d65dbc3..5efd3ca9 100644
--- a/App/Screens/Details/Details.tsx
+++ b/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 {}
 
diff --git a/App/Screens/Home/Header/Header.tsx b/App/Screens/Home/Header/Header.tsx
index 3bcf5ef9..27294d9c 100644
--- a/App/Screens/Home/Header/Header.tsx
+++ b/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://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,7 +58,7 @@ export function Header (props: HeaderProps) {
 
       <ChangeLocation onPress={onChangeLocationClick} />
     </View>
-  );
+  )
 }
 
 const styles = StyleSheet.create({
@@ -67,23 +66,23 @@ const styles = StyleSheet.create({
     ...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
+  },
+})
diff --git a/App/stores/distanceUnit.tsx b/App/stores/distanceUnit.tsx
index 12ab8866..7f389b6e 100644
--- a/App/stores/distanceUnit.tsx
+++ b/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);

From a9bedb40877bacce26c4ef3d5945353b7496abae Mon Sep 17 00:00:00 2001
From: Mate Papp <matepapp@icloud.com>
Date: Sun, 6 Oct 2019 19:47:38 +0200
Subject: [PATCH 11/11] fix: resolve lint errors

---
 App/App.tsx                        | 46 +++++++++++++-------------
 App/Screens/Home/Header/Header.tsx | 52 +++++++++++++++---------------
 App/stores/distanceUnit.tsx        |  2 +-
 3 files changed, 50 insertions(+), 50 deletions(-)

diff --git a/App/App.tsx b/App/App.tsx
index 0c90f278..5399539f 100644
--- a/App/App.tsx
+++ b/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://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>
@@ -83,5 +83,5 @@ export function App () {
     </ErrorContextProvider>
   ) : (
     <LoadingBackground />
-  )
+  );
 }
diff --git a/App/Screens/Home/Header/Header.tsx b/App/Screens/Home/Header/Header.tsx
index 27294d9c..004a3224 100644
--- a/App/Screens/Home/Header/Header.tsx
+++ b/App/Screens/Home/Header/Header.tsx
@@ -14,31 +14,31 @@
 // You should have received a copy of the GNU General Public License
 // along with Sh**t! I Smoke.  If not, see <http://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
 }
 
 export function Header (props: HeaderProps) {
-  const { api } = useContext(ApiContext)!
-  const { currentLocation, isGps } = useContext(CurrentLocationContext)
-  const { distanceUnit, localizedDistanceUnit } = 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)
-  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}>
@@ -49,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>
@@ -58,7 +58,7 @@ export function Header (props: HeaderProps) {
 
       <ChangeLocation onPress={onChangeLocationClick} />
     </View>
-  )
+  );
 }
 
 const styles = StyleSheet.create({
@@ -66,23 +66,23 @@ const styles = StyleSheet.create({
     ...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
+  }
+});
diff --git a/App/stores/distanceUnit.tsx b/App/stores/distanceUnit.tsx
index 7f389b6e..e2fe9bef 100644
--- a/App/stores/distanceUnit.tsx
+++ b/App/stores/distanceUnit.tsx
@@ -48,6 +48,6 @@ export function DistanceUnitProvider ({ children }: { children: ReactNode }) {
       {children}
     </Context.Provider>
   );
-};
+}
 
 export const useDistanceUnit = () => useContext(Context);