Fix details page

App/Screens/Details/Details.js

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0
 
 import React, { Component } from 'react';
+import { inject, observer } from 'mobx-react';
 import { MapView } from 'expo';
 import { StyleSheet, View } from 'react-native';
 import truncate from 'truncate';
@@ -13,26 +14,16 @@ import homeIcon from '../../../assets/images/home.png';
 import stationIcon from '../../../assets/images/station.png';
 import * as theme from '../../utils/theme';
 
+@inject('stores')
+@observer
 export class Details extends Component {
- static navigationOptions = {
- header: props => {
- return (
- <Header
- {...props.screenProps}
- elevated
- onBackClick={props.navigation.pop}
- showBackButton
- style={styles.header}
- />
- );
- }
- };
+ static navigationOptions = { header: null };
 
  state = {
  showMap: false
  };
 
- componentWillMount() {
+ componentDidMount() {
  // Show map after 200ms for smoother screen transition
  setTimeout(() => this.setState({ showMap: true }), 500);
  }
@@ -49,7 +40,8 @@ export class Details extends Component {
 
  render() {
  const {
- screenProps: { api, currentLocation }
+ navigation,
+ stores: { api, location }
  } = this.props;
  const { showMap } = this.state;
 
@@ -59,24 +51,25 @@ export class Details extends Component {
  ? api.attributions[0].name
  : null,
  title: api.city.name,
- ...getCorrectLatLng(currentLocation, {
+ ...getCorrectLatLng(location.current, {
  latitude: api.city.geo[0],
  longitude: api.city.geo[1]
  })
  };
 
  return (
  <View style={styles.container}>
+ <Header onBackClick={navigation.pop} style={styles.header} />
  <View style={styles.mapContainer}>
  {showMap && (
  <MapView
  initialRegion={{
- latitude: (currentLocation.latitude + station.latitude) / 2,
+ latitude: (location.current.latitude + station.latitude) / 2,
  latitudeDelta:
- Math.abs(currentLocation.latitude - station.latitude) * 2,
- longitude: (currentLocation.longitude + station.longitude) / 2,
+ Math.abs(location.current.latitude - station.latitude) * 2,
+ longitude: (location.current.longitude + station.longitude) / 2,
  longitudeDelta:
- Math.abs(currentLocation.longitude - station.longitude) * 2
+ Math.abs(location.current.longitude - station.longitude) * 2
  }}
  onMapReady={this.handleMapReady}
  style={styles.map}
@@ -91,14 +84,14 @@ export class Details extends Component {
  />
  <MapView.Marker
  color="blue"
- coordinate={currentLocation}
+ coordinate={location.current}
  image={homeIcon}
  title="Your position"
  />
  </MapView>
  )}
  </View>
- <Distance api={api} currentLocation={currentLocation} />
+ <Distance />
  </View>
  );
  }

App/Screens/Details/Distance/Distance.js

@@ -2,29 +2,25 @@
 // SPDX-License-Identifier: GPL-3.0
 
 import React, { Component } from 'react';
-import haversine from 'haversine';
+import { inject, observer } from 'mobx-react';
 import { StyleSheet, Text } from 'react-native';
 
 import { Banner } from '../../../components/Banner';
-import { getCorrectLatLng } from '../../../utils/getCorrectLatLng';
 import * as theme from '../../../utils/theme';
 
+@inject('stores')
+@observer
 export class Distance extends Component {
  render() {
- const { api, currentLocation } = this.props;
- const distance = Math.round(
- haversine(
- currentLocation,
- getCorrectLatLng(currentLocation, {
- latitude: api.city.geo[0],
- longitude: api.city.geo[1]
- })
- )
- );
+ const {
+ stores: { distanceToStation }
+ } = this.props;
 
  return (
  <Banner elevated="very" style={styles.banner}>
- <Text style={styles.distance}>AQI STATION: {distance}KM AWAY</Text>
+ <Text style={styles.distance}>
+ AQI STATION: {distanceToStation}KM AWAY
+ </Text>
  </Banner>
  );
  }

App/Screens/Details/Header/Header.js

@@ -3,6 +3,7 @@
 
 import React, { Component } from 'react';
 import { Image, StyleSheet, Text, View } from 'react-native';
+import { inject, observer } from 'mobx-react';
 
 import { BackButton } from '../../../components/BackButton';
 import changeLocation from '../../../../assets/images/changeLocation.png';
@@ -34,18 +35,23 @@ const weekdays = [
  'Saturday'
 ];
 
+@inject('stores')
+@observer
 export class Header extends Component {
- static defaultProps = {
- showChangeLocation: false
- };
-
  render() {
- const { api, currentLocation, onBackClick } = this.props;
+ const {
+ onBackClick,
+ stores: { api }
+ } = this.props;
 
  const lastUpdated =
- api && api.debug && api.debug.sync ? new Date(api.debug.sync) : null;
- const { dominantpol } = api;
- const { no2, o3, pm10, pm25 } = api.iaqi || {};
+ api.time && api.time.v ? new Date(api.time.v * 1000) : null;
+ const {
+ dominantpol,
+ iaqi: { no2, o3, pm10, pm25 }
+ } = api;
+
+ console.log(api.iaqi);
 
  return (
  <View style={styles.container}>
@@ -55,11 +61,7 @@ export class Header extends Component {
  <Image source={changeLocation} style={styles.changeLocation} />
 
  <View>
- <CurrentLocation
- api={api}
- currentLocation={currentLocation}
- style={styles.currentLocation}
- />
+ <CurrentLocation style={styles.currentLocation} />
  {lastUpdated &&
  this.renderInfo(
  'Latest Update:',

App/Screens/Search/Search.js

@@ -5,6 +5,7 @@ import React, { Component } from 'react';
 import axios from 'axios';
 import { Constants } from 'expo';
 import { FlatList, Modal, StyleSheet, Text, View } from 'react-native';
+import { inject, observer } from 'mobx-react';
 import retry from 'async-retry';
 
 import { BackButton } from '../../components/BackButton';
@@ -20,6 +21,8 @@ const algoliaUrls = [
  'https://places-3.algolianet.com'
 ];
 
+@inject('stores')
+@observer
 export class Search extends Component {
  state = {
  hasErrors: false, // Error from algolia
@@ -30,12 +33,17 @@ export class Search extends Component {
 
  typingTimeout = null; // Timeout to detect when user stops typing
 
- componentWillUnmount () {
+ componentWillUnmount() {
  clearTimeout(this.typingTimeout);
  }
 
  fetchResults = async search => {
- const { gps } = this.props;
+ const {
+ stores: {
+ location: { gps }
+ }
+ } = this.props;
+
  try {
  this.setState({ loading: true });
  await retry(
@@ -57,11 +65,11 @@ export class Search extends Component {
  Constants.manifest.extra.algoliaApplicationId &&
  Constants.manifest.extra.algoliaApiKey
  ? {
- 'X-Algolia-Application-Id':
+  'X-Algolia-Application-Id':
  Constants.manifest.extra.algoliaApplicationId,
- 'X-Algolia-API-Key':
+  'X-Algolia-API-Key':
  Constants.manifest.extra.algoliaApiKey
- }
+  }
  : undefined,
 
  timeout: 3000
@@ -94,12 +102,12 @@ export class Search extends Component {
  this.props.onLocationChanged(item);
  };
 
- render () {
+ render() {
  const { onRequestClose, ...rest } = this.props;
  const { hits, search } = this.state;
 
  return (
- <Modal animationType='slide' onRequestClose={onRequestClose} {...rest}>
+ <Modal animationType="slide" onRequestClose={onRequestClose} {...rest}>
  <View style={styles.container}>
  <BackButton onClick={onRequestClose} style={styles.backButton} />
  <SearchHeader
@@ -111,7 +119,7 @@ export class Search extends Component {
  <FlatList
  data={hits}
  ItemSeparatorComponent={this.renderSeparator}
- keyboardShouldPersistTaps='always'
+ keyboardShouldPersistTaps="always"
  keyExtractor={({ objectID }) => objectID}
  ListEmptyComponent={
  <Text style={styles.noResults}>{this.renderInfoText()}</Text>

App/components/CurrentLocation/CurrentLocation.js

@@ -4,31 +4,36 @@
 import React, { Component } from 'react';
 import axios from 'axios';
 import { Constants } from 'expo';
+import { inject, observer } from 'mobx-react';
 import { StyleSheet, Text } from 'react-native';
 
 import * as theme from '../../utils/theme';
 
+@inject('stores')
+@observer
 export class CurrentLocation extends Component {
  state = {
  locationName: 'Fetching...'
  };
 
  async componentDidMount() {
- const { api, currentLocation } = this.props;
+ const {
+ stores: { api, location }
+ } = this.props;
 
  // If our currentLocation already has a name (from Algolia), then we don't
  // need Google Geocoding for the name
- if (currentLocation.name) {
- this.setState({ locationName: currentLocation.name.toUpperCase() });
+ if (location.name) {
+ this.setState({ locationName: location.name.toUpperCase() });
  return;
  }
 
  try {
  const { data } = await axios.get(
  `https://us1.locationiq.com/v1/reverse.php?key=${
  Constants.manifest.extra.locationIqKey
- }&lat=${currentLocation.latitude}&lon=${
- currentLocation.longitude
+ }&lat=${location.current.latitude}&lon=${
+ location.current.longitude
  }&format=json`
  );
 
@@ -59,7 +64,7 @@ export class CurrentLocation extends Component {
  }
 
  render() {
- const { api, currentLocation, style, ...rest } = this.props;
+ const { stores, style, ...rest } = this.props;
  const { locationName } = this.state;
 
  return (

App/stores/api.js

@@ -3,34 +3,26 @@
 
 import { types } from 'mobx-state-tree';
 
-const pollutant = () =>
- types.maybe(
- types.model({
- v: types.number
- })
- );
-
 export const ApiStore = types.maybe(
  types.model('ApiStore', {
  aqi: types.number,
+ attributions: types.array(
+ types.model({
+ name: types.string,
+ url: types.string
+ })
+ ),
  city: types.model({
  geo: types.array(types.number),
  name: types.string,
  url: types.string
  }),
  dominentpol: types.string,
- iaqi: types.model({
- h: pollutant(),
- no2: pollutant(),
- o3: pollutant(),
- p: pollutant(),
- pm10: pollutant(),
- pm25: pollutant(),
- so2: pollutant(),
- t: pollutant(),
- w: pollutant(),
- wg: pollutant()
- }),
+ iaqi: types.map(
+ types.model({
+ v: types.number
+ })
+ ),
  idx: types.number,
  rawPm25: types.number,
  time: types.model({

App/utils/dataSources/aqicn.js

@@ -86,6 +86,7 @@ export const aqicn = async ({ latitude, longitude }) => {
 
  return {
  aqi: response.data.aqi,
+ attributions: response.data.attributions,
  city: response.data.city,
  dominentpol: response.data.dominentpol,
  iaqi: response.data.iaqi,

App/utils/dataSources/windWaqi.js

@@ -43,6 +43,7 @@ export const windWaqi = async ({ latitude, longitude }) => {
 
  return {
  aqi: data.v,
+ attributions: [],
  city: { geo: [+data.geo[0], +data.geo[1]], name: data.nlo },
  dominentpol: data.pol,
  iaqi: {