feat: Distance is measured in mi for en (#153)

* Distance is measured in mi for en.

* Moved haversine unit to translations

App/Screens/Details/Details.tsx

@@ -26,7 +26,7 @@ import { Distance } from './Distance';
 import { Header } from './Header';
 import { i18n } from '../../localization';
 import { ApiContext, CurrentLocationContext } from '../../stores';
-import { distanceToStation, getCorrectLatLng } from '../../util/station';
+import { distanceToStation, getCorrectLatLng, DistanceUnit } from '../../util/station';
 
 interface DetailsProps extends NavigationInjectedProps {}
 
@@ -61,6 +61,9 @@ 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 station = {
  description: api!.shootISmoke.station || '',
  title: api!.shootISmoke.station,
@@ -102,7 +105,7 @@ export function Details (props: DetailsProps) {
  </MapView>
  )}
  </View>
- <Distance distance={distanceToStation(currentLocation!, api!)} />
+ <Distance distance={distance} />
  </View>
  );
 }

App/Screens/Details/Distance/Distance.tsx

@@ -26,11 +26,16 @@ interface DistanceProps {
 }
 
 export function Distance (props: DistanceProps) {
+ const distanceUnit = i18n.t('distance_unit');
+
  return (
  <Banner elevated shadowPosition="top" style={styles.banner}>
  <Text style={styles.distance}>
  {i18n
- .t('details_distance_label', { distanceToStation: props.distance })
+ .t('details_distance_label', {
+ distanceToStation: props.distance,
+ distanceUnit
+ })
  .toUpperCase()}
  </Text>
  </Banner>

App/Screens/Home/Header/Header.tsx

@@ -29,7 +29,7 @@ import alert from '../../../../assets/images/alert.png';
 import { CurrentLocation } from '../../../components';
 import { i18n } from '../../../localization';
 import { ApiContext, CurrentLocationContext } from '../../../stores';
-import { distanceToStation, isStationTooFar } from '../../../util/station';
+import { distanceToStation, isStationTooFar, DistanceUnit } from '../../../util/station';
 import * as theme from '../../../util/theme';
 
 interface HeaderProps {
@@ -41,7 +41,9 @@ export function Header (props: HeaderProps) {
  const { currentLocation, isGps } = useContext(CurrentLocationContext);
  const { onChangeLocationClick } = props;
 
- const distance = distanceToStation(currentLocation!, api!);
+ const distanceUnit = i18n.t('distance_unit');
+ const haversineDistanceUnit = i18n.t('haversine_distance_unit') as DistanceUnit;
+ const distance = distanceToStation(currentLocation!, api!, haversineDistanceUnit);
  const isTooFar = isStationTooFar(currentLocation!, api!);
 
  return (
@@ -57,7 +59,8 @@ export function Header (props: HeaderProps) {
  {isTooFar && <Image source={alert} style={styles.warning} />}
  <Text style={theme.text}>
  {i18n.t('home_header_air_quality_station_distance', {
- distanceToStation: distance
+ distanceToStation: distance,
+ distanceUnit
  })}{' '}
  {!isGps && i18n.t('home_header_from_search')}
  </Text>

App/localization/languages/en.json

@@ -7,7 +7,7 @@
  "home_station_too_far_message": "We couldn’t find a closer station to you.\nResults may be inaccurate at this distance.",
  "home_share_title": "Did you know that you may be smoking up to 20 cigarettes per day, just for living in a big city?",
  "home_share_message": "Shoot! I 'smoked' {{cigarettes}} cigarettes today by breathing urban air. And you? Find out here: https://shootismoke.github.io",
- "home_header_air_quality_station_distance": "Air Quality Station: {{distanceToStation}}km away",
+ "home_header_air_quality_station_distance": "Air Quality Station: {{distanceToStation}}{{distanceUnit}} away",
  "home_header_from_search": "from search",
  "home_btn_why_is_station_so_far": "Why is the station so far?",
  "home_btn_see_detailed_info": "See detailed info",
@@ -43,7 +43,9 @@
  "details_header_latest_update_label": "Latest Update:",
  "details_header_latest_update_ago": "ago",
  "details_header_primary_pollutant_label": "Primary Pollutant:",
- "details_distance_label": "AQI Station: {{distanceToStation}}km away",
+ "details_distance_label": "AQI Station: {{distanceToStation}}{{distanceUnit}} away",
+ "distance_unit": "mi",
+ "haversine_distance_unit": "mile",
  "past_stations_loading": "Loading",
  "past_stations_date_from_to": "{{startDate}} to {{endDate}}",
  "past_stations_monitored_weekly": "Stations monitored from you during the week",

App/localization/languages/es.json

@@ -7,7 +7,7 @@
  "home_station_too_far_message": "No encontramos una estación cerca\\nLos resultados pueden ser inexactos a esta distancia.",
  "home_share_title": "¿Sabías que por vivir en una gran ciudad puedes estar fumando hasta 20 cigarrillos al día?",
  "home_share_message": "Rayos! 'hoy fumé'' {{cigarettes}} cigarrillos respirando aire urbano. ¿Y tú? Encuentralo aquí: https://shootismoke.github.io",
- "home_header_air_quality_station_distance": "Estación de calidad del aire: a {{distanceToStation}}km",
+ "home_header_air_quality_station_distance": "Estación de calidad del aire: a {{distanceToStation}}{{distanceUnit}}",
  "home_btn_why_is_station_so_far": "¿Estación retirada?",
  "home_btn_see_detailed_info": "Ver detalles",
  "home_btn_more_details": "Más detalles",
@@ -34,7 +34,9 @@
  "details_your_position_marker": "Tu ubicación",
  "details_header_latest_update_label": "Última actualización:",
  "details_header_primary_pollutant_label": "Contaminante primario:",
- "details_distance_label": "Estación AQI: a {{distanceToStation}}km",
+ "details_distance_label": "Estación AQI: a {{distanceToStation}}{{distanceUnit}}",
+ "distance_unit": "km",
+ "haversine_distance_unit": "km",
  "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.",

App/util/station.ts

@@ -22,20 +22,24 @@ import { LatLng } from '../stores/fetchGpsPosition';
 // 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.
  *
  * @param currentLocation - The current location of the user.
  * @param api - The api object returned by remote data.
+ * @param unit - The unit of measure returned.
  */
-export function distanceToStation (currentLocation: LatLng, api: Api) {
+export function distanceToStation (currentLocation: LatLng, api: Api, unit: DistanceUnit = 'km') {
  return Math.round(
  haversine(
  currentLocation,
  getCorrectLatLng(currentLocation, {
  latitude: api.city.geo[0],
  longitude: api.city.geo[1]
- })
+ }),
+ { unit }
  )
  );
 }