provideAppAsyncData.js

import React from 'react';
import { AppLoading } from 'expo';
import { Centered } from 'common/components/utils/Layout';
import { BaseText } from 'common/styleguide/texts';
import SimpleButton from 'common/components/buttons/SimpleButton';
import CustomSafeAreaView from 'common/components/utils/CustomSafeAreaView';
import { reportError } from 'AppSentry';

const TechnicalErrorScreen = ({ onRetry }) => (
  <CustomSafeAreaView>
    <Centered width="100%" flex={1}>
      <BaseText red l>
        Technical error
      </BaseText>
      <SimpleButton marginTop={50} text="Retry ?" onPress={onRetry} />
    </Centered>
  </CustomSafeAreaView>
);

export const provideAppAsyncData = (propName, loader) => Comp => {
  class AppAsyncDataLoader extends React.Component {
    state = {
      isReady: false,
      data: undefined,
      error: undefined,
    };

    loadAsyncData = () => {
      console.debug(`AppAsyncDataLoader, loading prop=${propName}`);
      return loader()
        .then(data => {
          console.debug(
            `AppAsyncDataLoader, loaded successfully prop=${propName}`,
            data,
          );
          this.setState({ data });
        })
        .catch(error => {
          reportError(error);
          this.setState({ error });
        });
    };

    render() {
      const { isReady, error, data } = this.state;
      if (!isReady) {
        return (
          <AppLoading
            startAsync={this.loadAsyncData}
            onFinish={() => this.setState({ isReady: true })}
          />
        );
      }
      if (error || !data) {
        return <TechnicalErrorScreen onRetry={this.loadAsyncData} />;
      }
      const props = {
        ...this.props,
        [propName]: data,
      };
      return <Comp {...props} />;
    }
  }
  return AppAsyncDataLoader;
};