Make search work

App/App.tsx

@@ -14,53 +14,38 @@
 // 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 React, { PureComponent } from 'react';
 import * as Font from 'expo-font';
 import Constants from 'expo-constants';
-import { Provider } from 'mobx-react';
+import React, { useEffect, useState } from 'react';
 import Sentry from 'sentry-expo';
 
-import { RootStore } from './stores';
-import { Background as LoadingBackground } from './Screens/Loading/Background';
 import { Screens } from './Screens';
-
-// Set up global MST stores
-const stores = RootStore.create({
- api: undefined,
- error: undefined,
- location: {}
-});
+import { Background as LoadingBackground } from './Screens/Loading/Background';
+import { ErrorContextProvider, LocationContextProvider } from './stores';
 
 // Add sentry if available
 if (Constants.manifest.extra.sentryPublicDsn) {
  Sentry.config(Constants.manifest.extra.sentryPublicDsn).install();
 }
 
-export class App extends PureComponent {
- state = {
- fontLoaded: false
- };
-
- async componentDidMount () {
- // Using custom fonts with Expo
- // https://docs.expo.io/versions/latest/guides/using-custom-fonts
- await Font.loadAsync({
+export function App() {
+ const [fontLoaded, setFontLoaded] = useState(false);
+ useEffect(() => {
+ Font.loadAsync({
  'gotham-black': require('../assets/fonts/Gotham-Black.ttf'),
  'gotham-book': require('../assets/fonts/Gotham-Book.ttf')
- });
-
- this.setState({ fontLoaded: true });
- }
-
- render () {
- const { fontLoaded } = this.state;
-
- return fontLoaded ? (
- <Provider stores={stores}>
+ })
+ .then(() => setFontLoaded(true))
+ .catch(console.error);
+ }, []);
+
+ return fontLoaded ? (
+ <ErrorContextProvider>
+ <LocationContextProvider>
  <Screens />
- </Provider>
- ) : (
-  <LoadingBackground />
- );
- }
+ </LocationContextProvider>
+ </ErrorContextProvider>
+ ) : (
+ <LoadingBackground />
+ );
 }

App/Screens/About/About.ts → App/Screens/About/About.tsx

@@ -16,7 +16,14 @@
 
 import React, { PureComponent } from 'react';
 import Constants from 'expo-constants';
-import { Linking, Platform, ScrollView, StyleSheet, Text, View } from 'react-native';
+import {
+ Linking,
+ Platform,
+ ScrollView,
+ StyleSheet,
+ Text,
+ View
+} from 'react-native';
 
 import { Box } from './Box';
 import { BackButton } from '../../components/BackButton';
@@ -39,22 +46,30 @@ export class About extends PureComponent {
  handleOpenMarcelo = () =>
  Linking.openURL('https://www.behance.net/marceloscoelho');
 
- render () {
+ render() {
  const { navigation } = this.props;
  return (
  <ScrollView style={theme.withPadding}>
  <BackButton onClick={navigation.pop} style={styles.backButton} />
 
  <View style={styles.section}>
  <Text style={styles.h2}>
- {i18n.t('about_how_do_you_calculate_the_number_of_cigarettes_title')}
+ {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={this.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'}
@@ -71,7 +86,9 @@ export class About extends PureComponent {
  </View>
 
  <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={this.handleOpenAqi} style={theme.link}>
@@ -91,9 +108,7 @@ export class About extends PureComponent {
  </View>
 
  <View style={styles.section}>
- <Text style={styles.h2}>
- {i18n.t('about_weird_results_title')}
- </Text>
+ <Text style={styles.h2}>{i18n.t('about_weird_results_title')}</Text>
  <Text style={theme.text}>
  {i18n.t('about_weird_results_message_1')}{' '}
  <Text onPress={this.handleOpenAqi} style={theme.link}>

App/Screens/ErrorScreen/ErrorScreen.tsx

@@ -14,43 +14,44 @@
 // 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 { inject, observer } from 'mobx-react';
-import React, { Component } from 'react';
+import React, { useContext } from 'react';
 import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { NavigationInjectedProps } from 'react-navigation';
 
 import error from '../../../assets/images/error.png';
 import { i18n } from '../../localization';
+import { ErrorContext } from '../../stores';
 import * as theme from '../../utils/theme';
 
-@inject('stores')
-@observer
-export class ErrorScreen extends Component {
- goToSearch = () => this.props.navigation.navigate('Search');
+interface ErrorScreenProps extends NavigationInjectedProps {}
 
- render () {
-  const { error: errorText } = this.props.stores;
+export function ErrorScreen(props: ErrorScreenProps) {
+ const { error: errorText } = useContext(ErrorContext);
 
-  return (
-  <View style={styles.container}>
-  <Image source={error} />
-  <View>
-  <Text style={styles.errorText}>
-  <Text style={styles.sorry}>{i18n.t('error_screen_common_sorry')}</Text>
- {i18n.t('error_screen_error_cannot_load_cigarettes')}
+ return (
+ <View style={styles.container}>
+ <Image source={error} />
+ <View>
+ <Text style={styles.errorText}>
+ <Text style={styles.sorry}>
+ {i18n.t('error_screen_common_sorry')}
  </Text>
- </View>
- <TouchableOpacity onPress={this.goToSearch}>
- <View style={styles.chooseOther}>
- <Text style={theme.bigButtonText}>{i18n.t('error_screen_choose_other_location').toUpperCase()}</Text>
- </View>
- </TouchableOpacity>
- <Text style={theme.text}>
- {i18n.t('error_screen_error_description')}
+ {i18n.t('error_screen_error_cannot_load_cigarettes')}
  </Text>
- <Text style={styles.errorMessage}>{i18n.t('error_screen_error_message', { errorText })}</Text>
  </View>
- );
- }
+ <TouchableOpacity onPress={() => props.navigation.navigate('Search')}>
+ <View style={styles.chooseOther}>
+ <Text style={theme.bigButtonText}>
+ {i18n.t('error_screen_choose_other_location').toUpperCase()}
+ </Text>
+ </View>
+ </TouchableOpacity>
+ <Text style={theme.text}>{i18n.t('error_screen_error_description')}</Text>
+ <Text style={styles.errorMessage}>
+ {i18n.t('error_screen_error_message', { errorText })}
+ </Text>
+ </View>
+ );
 }
 
 const styles = StyleSheet.create({

App/Screens/Loading/Loading.tsx

@@ -173,39 +173,39 @@ export class Loading extends Component {
  };
 }
 
-TaskManager.defineTask(TASK_STORE_AQI_HISTORY, async ({ data, error }) => {
- if (error) {
- console.log('<Loading> - TaskManager - defineTask - Error', error.message);
- return;
- }
- if (data) {
- const { locations } = data;
- const { coords } = locations[0];
-
- // We currently have 2 sources, aqicn, and windWaqi
- // We put them in an array
- const sources = [dataSources.aqicn, dataSources.windWaqi];
-
- const api = await retry(
- async (_, attempt) => {
- // Attempt starts at 1
- console.log(
- `<Loading> - fetchData - Attempt #${attempt}: ${
- sources[(attempt - 1) % 2].name
- }`
- );
- const result = await sources[(attempt - 1) % 2](coords);
- console.log('<Loading> - fetchData - Got result', result);
-
- return result;
- },
- { retries: 3 } // 2 attempts per source
- );
-
- if (await AqiHistoryDb.isSaveNeeded()) {
- await AqiHistoryDb.saveData(api.city.name, api.rawPm25, coords);
- }
- }
+// TaskManager.defineTask(TASK_STORE_AQI_HISTORY, async ({ data, error }) => {
+//  if (error) {
+//  console.log('<Loading> - TaskManager - defineTask - Error', error.message);
+//  return;
+//  }
+//  if (data) {
+//  const { locations } = data;
+//  const { coords } = locations[0];
+
+//  // We currently have 2 sources, aqicn, and windWaqi
+//  // We put them in an array
+//  const sources = [dataSources.aqicn, dataSources.windWaqi];
+
+//  const api = await retry(
+//  async (_, attempt) => {
+//  // Attempt starts at 1
+//  console.log(
+//  `<Loading> - fetchData - Attempt #${attempt}: ${
+//  sources[(attempt - 1) % 2].name
+//  }`
+//  );
+//  const result = await sources[(attempt - 1) % 2](coords);
+//  console.log('<Loading> - fetchData - Got result', result);
+
+//  return result;
+//  },
+//  { retries: 3 } // 2 attempts per source
+//  );
+
+//  if (await AqiHistoryDb.isSaveNeeded()) {
+//  await AqiHistoryDb.saveData(api.city.name, api.rawPm25, coords);
+//  }
+//  }
 });
 
 const styles = StyleSheet.create({