Loading data

withLoadingData.jsx

import React, { Component } from "react";
import Loading from "./../components/Loading";
import fetchData from "./../data";

/*
  variables - function that returns parameters (based on the component props) for the fetchData()
*/
const withLoadingData = variables => WrappedComponent => {
  class WithLoadingData extends Component {
    state = {
      loading: true,
      response: null
    };

    componentDidMount() {
      const vars = variables ? variables(this.props) : null;
      fetchData(vars).then(response => {
        this.setState({ loading: false, response });
      });
    }
    render() {
      if (this.state.loading) {
        return <Loading />;
      }

      return <WrappedComponent data={this.state.response} {...this.props} />;
    }
  }

  return WithLoadingData;
};

export default withLoadingData;