Make api call work

App/App.tsx

@@ -21,7 +21,11 @@ import Sentry from 'sentry-expo';
 
 import { Screens } from './Screens';
 import { Background as LoadingBackground } from './Screens/Loading/Background';
-import { ErrorContextProvider, LocationContextProvider } from './stores';
+import {
+ ApiContextProvider,
+ ErrorContextProvider,
+ LocationContextProvider
+} from './stores';
 
 // Add sentry if available
 if (Constants.manifest.extra.sentryPublicDsn) {
@@ -42,7 +46,9 @@ export function App() {
  return fontLoaded ? (
  <ErrorContextProvider>
  <LocationContextProvider>
- <Screens />
+ <ApiContextProvider>
+ <Screens />
+ </ApiContextProvider>
  </LocationContextProvider>
  </ErrorContextProvider>
  ) : (

App/Screens/Home/Home.tsx

@@ -15,7 +15,6 @@
 // along with Sh**t! I Smoke. If not, see <http:https://www.gnu.org/licenses/>.
 
 import React, { Component } from 'react';
-import { inject, observer } from 'mobx-react';
 import {
  ScrollView,
  Share,
@@ -33,9 +32,7 @@ import { SmokeVideo } from './SmokeVideo';
 import swearWords from './swearWords';
 import * as theme from '../../utils/theme';
 
-@inject('stores')
-@observer
-export class Home extends Component {
+export function
  goToAbout = () => this.props.navigation.navigate('About');
 
  goToDetails = () => this.props.navigation.navigate('Details');

App/Screens/Loading/Background.tsx

@@ -14,19 +14,18 @@
 // 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 { StyleSheet, View } from 'react-native';
+import React from 'react';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import * as theme from '../../utils/theme';
 
-export class Background extends PureComponent {
- render () {
- return (
- <View style={[styles.container, this.props.style]}>
- {this.props.children}
- </View>
- );
- }
+interface BackgroundProps {
+ children?: JSX.Element;
+ style?: StyleProp<ViewStyle>;
+}
+
+export function Background(props: BackgroundProps) {
+ return <View style={[styles.container, props.style]}>{props.children}</View>;
 }
 
 const styles = StyleSheet.create({

App/Screens/Loading/Loading.tsx

@@ -14,50 +14,60 @@
 // 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, { Component } from 'react';
-import { inject, observer } from 'mobx-react';
+import * as ExpoLocation from 'expo-location';
 import * as Permissions from 'expo-permissions';
 import * as TaskManager from 'expo-task-manager';
-import * as Location from 'expo-location';
-import retry from 'async-retry';
+import React, { useContext, useEffect, useState } from 'react';
 import { StyleSheet, Text } from 'react-native';
 import { Background } from './Background';
-import * as dataSources from '../../utils/dataSources';
-import * as theme from '../../utils/theme';
+
 import { i18n } from '../../localization';
 import { AqiHistoryDb } from '../../managers';
+import {
+ CurrentLocationContext,
+ GpsLocationContext,
+ Location
+} from '../../stores';
+import * as dataSources from '../../utils/dataSources';
+import * as theme from '../../utils/theme';
 
 const TASK_STORE_AQI_HISTORY = 'store-aqi-history';
 
-@inject('stores')
-@observer
-export class Loading extends Component {
- state = {
- longWaiting: false // If api is taking a long time
- };
+interface LoadingProps {}
 
- longWaitingTimeout = null; // The variable returned by setTimeout for longWaiting
+// The variable returned by setTimeout for longWaiting
+let longWaitingTimeout: number | null = null;
 
- async componentDidMount () {
- await this.fetchData();
- await this._startRecordingAqiHistory();
- }
+function fetchApi() {}
 
- componentWillUnmount () {
- if (this.longWaitingTimeout) {
- clearTimeout(this.longWaitingTimeout);
- }
- }
+export function Loading() {
+ const currentLocation = useContext(CurrentLocationContext);
+ const gps = useContext(GpsLocationContext);
 
- _startRecordingAqiHistory = async () => {
- await Location.startLocationUpdatesAsync(TASK_STORE_AQI_HISTORY, {
- accuracy: Location.Accuracy.BestForNavigation,
- timeInterval: AqiHistoryDb.SAVE_DATA_INTERVAL,
- distanceInterval: 0
- });
- };
+ const [longWaiting, setLongWaiting] = useState(false); // If api is taking a long time
+
+ useEffect(() => {}, []);
+
+ // async componentDidMount () {
+ // await this.fetchData();
+ // await this._startRecordingAqiHistory();
+ // }
+
+ // componentWillUnmount () {
+ // if (this.longWaitingTimeout) {
+ // clearTimeout(this.longWaitingTimeout);
+ // }
+ // }
+
+ // _startRecordingAqiHistory = async () => {
+ // await Location.startLocationUpdatesAsync(TASK_STORE_AQI_HISTORY, {
+ // accuracy: Location.Accuracy.BestForNavigation,
+ // timeInterval: AqiHistoryDb.SAVE_DATA_INTERVAL,
+ // distanceInterval: 0
+ // });
+ // };
 
- _apiCall = async (currentPosition) => {
+ const _apiCall = async currentPosition => {
  // We currently have 2 sources, aqicn, and windWaqi
  // We put them in an array
  const sources = [dataSources.aqicn, dataSources.windWaqi];
@@ -79,7 +89,7 @@ export class Loading extends Component {
  );
  };
 
- async fetchData () {
+ async function fetchData() {
  const { stores } = this.props;
  const { location } = stores;
 
@@ -132,45 +142,38 @@ export class Loading extends Component {
  }
  }
 
- render () {
- return (
- <Background style={theme.withPadding}>
- <Text style={styles.text}>{this.renderText()}</Text>
- </Background>
- );
- }
+ return (
+ <Background style={theme.withPadding}>
+ <Text style={styles.text}>{renderText(longWaiting, gps, api)}</Text>
+ </Background>
+ );
+}
 
- renderCough = index => (
+function renderCough(index: number) {
+ return (
  <Text key={index}>
  {i18n.t('loading_title_cough')}
  <Text style={styles.dots}>...</Text>
  </Text>
  );
+}
 
- renderText = () => {
- const {
- stores: {
- api,
- location: { gps }
- }
- } = this.props;
- const { longWaiting } = this.state;
- let coughs = 0; // Number of times to show "Cough..."
- if (gps)++coughs;
- if (longWaiting)++coughs;
- if (api)++coughs;
-
- return (
- <Text>
- {i18n.t('loading_title_loading')}
- <Text style={styles.dots}>...</Text>
- {Array.from({ length: coughs }, (_, index) => index + 1).map(
- // Create array 1..N and rendering Cough...
- this.renderCough
- )}
- </Text>
- );
- };
+function renderText(longWaiting: boolean, gps: Location | undefined, api: any) {
+ let coughs = 0; // Number of times to show "Cough..."
+ if (gps) ++coughs;
+ if (longWaiting) ++coughs;
+ if (api) ++coughs;
+
+ return (
+ <Text>
+ {i18n.t('loading_title_loading')}
+ <Text style={styles.dots}>...</Text>
+ {Array.from({ length: coughs }, (_, index) => index + 1).map(
+ // Create array 1..N and rendering Cough...
+ renderCough
+ )}
+ </Text>
+ );
 }
 
 // TaskManager.defineTask(TASK_STORE_AQI_HISTORY, async ({ data, error }) => {
@@ -206,7 +209,6 @@ export class Loading extends Component {
 // await AqiHistoryDb.saveData(api.city.name, api.rawPm25, coords);
 // }
 // }
-});
 
 const styles = StyleSheet.create({
  dots: {

App/Screens/Screens.tsx

@@ -27,7 +27,7 @@ import {
 // import { Details } from './Details';
 import { ErrorScreen } from './ErrorScreen';
 // import { Home } from './Home';
-// import { Loading } from './Loading';
+import { Loading } from './Loading';
 import { Search } from './Search';
 import * as theme from '../utils/theme';
 
@@ -44,24 +44,24 @@ function stackNavigatorOptions(initialRouteName: string) {
  } as StackNavigatorConfig;
 }
 
-// /**
-//  * The main stack navigator, for the app.
-//  */
+/**
+ * The main stack navigator, for the app.
+ */
 // const RootStack = createAppContainer(
 // createStackNavigator(
 // {
-// About: {
-// screen: About
-// },
-// Details: {
-// screen: Details
-// },
-// Home: {
-// screen: Home
-// },
-// Search: {
-// screen: Search
-// }
+// // About: {
+// //  screen: About
+// // },
+// // Details: {
+// //  screen: Details
+// // },
+// // Home: {
+// //  screen: Home
+// // },
+// // Search: {
+// //  screen: Search
+// // }
 // },
 // stackNavigatorOptions('Home')
 // )
@@ -114,7 +114,8 @@ const ErrorStack = createAppContainer(
 
 const RootNavigator = createAppContainer(
  createSwitchNavigator({
- Error: ErrorStack
+ Error: ErrorStack,
+ Loading: Loading
  })
 );
 

App/Screens/Search/Search.tsx

@@ -41,6 +41,7 @@ import {
  Location
 } from '../../stores';
 import { sideEffect } from '../../utils/fp';
+import { noop } from '../../utils/noop';
 import * as theme from '../../utils/theme';
 
 // As per https://community.algolia.com/places/rest.html
@@ -78,11 +79,8 @@ const AxiosResponseT = t.type({
 });
 
 function fetchAlgolia(search: string, gps?: LatLng) {
- // THe attempt number
- let attempt = 0;
-
  return retrying(
- capDelay(2000, limitRetries(4)), // Do 4 times max, and set limit to 2s
+ capDelay(2000, limitRetries(algoliaUrls.length)), // Do 4 times max, and set limit to 2s
  status =>
  pipe(
  status.previousDelay,
@@ -91,24 +89,21 @@ function fetchAlgolia(search: string, gps?: LatLng) {
  () =>
  pipe(
  TE.rightIO(
- sideEffect(() => {
- ++attempt;
- }, undefined)
- ),
- TE.chain(() =>
- TE.rightIO(
- C.log(
- `<Search> - handleChangeSearch - Attempt #${attempt}: ${
- algoliaUrls[attempt - (1 % algoliaUrls.length)]
- }/1/places/query`
- )
+ C.log(
+ `<Search> - fetchAlgolia - Attempt #${status.iterNumber}: ${
+ algoliaUrls[(status.iterNumber - 1) % algoliaUrls.length]
+ }/1/places/query`
  )
  ),
  TE.chain(() =>
  TE.tryCatch(
  () =>
  axios.post(
- `${algoliaUrls[attempt - 1]}/1/places/query`,
+ `${
+ algoliaUrls[
+ (status.iterNumber - 1) % algoliaUrls.length
+ ]
+ }/1/places/query`,
  {
  aroundLatLng: gps
  ? `${gps.latitude},${gps.longitude}`
@@ -150,9 +145,7 @@ function fetchAlgolia(search: string, gps?: LatLng) {
  TE.rightIO(
  sideEffect(
  C.log(
- `<Search> - handleChangeSearch - Got ${
- hits.length
- } results`
+ `<Search> - fetchAlgolia - Got ${hits.length} results`
  ),
  hits
  )
@@ -161,7 +154,13 @@ function fetchAlgolia(search: string, gps?: LatLng) {
  )
  )
  ),
- E.isLeft
+ e => {
+ E.fold(err => {
+ console.log(`<Search> - fetchAlgolia - Error ${err}`);
+ }, noop)(e);
+
+ return E.isLeft(e);
+ }
  );
 }