openreplay/frontend/app/components/hocs/withRequest.js

import React from 'react';
import APIClient from 'App/api_client';

export default ({
    initialData = null,
    endpoint = '',
    method = 'GET',
    requestName = 'request',
    loadingName = 'loading',
    errorName = 'requestError',
    dataName = 'data',
    dataWrapper = (data) => data,
    loadOnInitialize = false,
    resetBeforeRequest = false, // Probably  use handler?
  }) =>
  (BaseComponent) =>
    class extends React.PureComponent {
      constructor(props) {
        super(props);
        this.state = {
          data:
            typeof initialData === 'function'
              ? initialData(props)
              : initialData,
          loading: loadOnInitialize,
          error: false,
        };
        if (loadOnInitialize) {
          this.request();
        }
      }

      request = (params, edpParams) => {
        this.setState({
          loading: true,
          error: false,
          data: resetBeforeRequest
            ? typeof initialData === 'function'
              ? initialData(this.props)
              : initialData
            : this.state.data,
        });
        const edp =
          typeof endpoint === 'function'
            ? endpoint(this.props, edpParams)
            : endpoint;
        return new APIClient()
          [method.toLowerCase()](edp, params)
          .then((response) => response.json())
          .then(({ errors, data }) => {
            if (errors) {
              return this.setError();
            }
            this.setState({
              data: dataWrapper(data, this.state.data),
              loading: false,
            });
          })
          .catch(this.setError);
      };

      setError = () =>
        this.setState({
          loading: false,
          error: true,
        });

      render() {
        const ownProps = {
          [requestName]: this.request,
          [loadingName]: this.state.loading,
          [dataName]: this.state.data,
          [errorName]: this.state.error,
        };
        return <BaseComponent {...this.props} {...ownProps} />;
      }
    };