React data fetching HOCs

data-fetching-hocs.js

// The same api state machine as before
const withApiState = TargetComponent =>
  class extends React.Component {
    state = {
      current: "idle"
    };

    apiState = {
      pending: () => this.setState({ current: "pending" }),
      success: () => this.setState({ current: "success" }),
      error: () => this.setState({ current: "error" }),
      idle: () => this.setState({ current: "idle" }),
      isPending: () => this.state.current === "pending",
      isSuccess: () => this.state.current === "success",
      isError: () => this.state.current === "error",
      isIdle: () => this.state.current === "idle"
    };

    render() {
      return <TargetComponent {...this.props} apiState={this.apiState} />;
    }
  };

// A new HOC that fetches data via a passed `fetcher` prop
const withData = TargetComponent => {
  class WithData extends React.Component {
    static defaultProps = { mapper: f => f };
    state = { data: null };
    componentDidMount() {
      this.fetchData();
    }
    fetchData = async () => {
      const { apiState, fetcher, mapper } = this.props;

      try {
        apiState.pending();
        const result = await fetcher();
        const data = mapper(result);
        this.setState({ data });
        apiState.success();
      } catch (e) {
        apiState.error();
      }
    };
    render() {
      const { mapper, fetcher, ...rest } = this.props;
      return (
        <TargetComponent
          {...rest}
          data={this.state.data}
          refetchData={this.fetchData}
        />
      );
    }
  }
  return withApiState(WithData);
};