react-redux-fetch/lib/components/connect.js

A declarative and customizable way to fetch data for React components and manage that data in the Redux state

'use strict';

exports.__esModule = true;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactRedux = require('react-redux');

var _redux = require('redux');

var _isFunction = require('lodash/isFunction');

var _isFunction2 = _interopRequireDefault(_isFunction);

var _isObject = require('lodash/isObject');

var _isObject2 = _interopRequireDefault(_isObject);

var _merge = require('lodash/merge');

var _merge2 = _interopRequireDefault(_merge);

var _each = require('lodash/each');

var _each2 = _interopRequireDefault(_each);

var _reduce = require('lodash/reduce');

var _reduce2 = _interopRequireDefault(_reduce);

var _selectors = require('../reducers/selectors');

var _capitalizeFirstLetter = require('../utils/capitalizeFirstLetter');

var _capitalizeFirstLetter2 = _interopRequireDefault(_capitalizeFirstLetter);

var _buildActionsFromMappings = require('../utils/buildActionsFromMappings');

var _buildActionsFromMappings2 = _interopRequireDefault(_buildActionsFromMappings);

var _helpers = require('../utils/helpers');

var _helpers2 = _interopRequireDefault(_helpers);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
// import reactReduxFetchActions from '../actions';

// import container from '../container';


// const defaultRequestType = 'get';

function getDisplayName(WrappedComponent) {
  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
}

function connect(mapPropsToRequestsToProps) {
  var componentMapStateToProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
  var componentMapDispatchToProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;

  return function wrapWithReactReduxFetch(WrappedComponent) {
    var _class, _temp, _initialiseProps;

    var ReactReduxFetch = (_temp = _class = function (_Component) {
      _inherits(ReactReduxFetch, _Component);

      function ReactReduxFetch(props) {
        _classCallCheck(this, ReactReduxFetch);

        // if mapPropsToRequestsToProps is a function,
        // we can't cache our dispatch functions because they might depend on the props.
        // We could support this in the future by building the functions again when te props change.
        var _this = _possibleConstructorReturn(this, _Component.call(this, props));

        _initialiseProps.call(_this);

        if (typeof mapPropsToRequestsToProps === 'function') {
          return _possibleConstructorReturn(_this);
        }

        _this.state = {
          dispatchFunctions: _this.actionsFromProps(props.dispatch, mapPropsToRequestsToProps)
        };
        return _this;
      }

      /**
       * @param {Object} fetchData The complete react-redux-fetch state leaf
       * @param {Array} mappings Array of objects with shape:
       *                {resource: ..., method: ..., request: ...}
       * @return {Object} all the resources the WrappedComponent requested
       */


      /**
       * @param {Function} dispatch Redux dispatch function
       * @param {Array} mappings Array of objects with shape:
       *                {resource: ..., method: ..., request: ...}
       * @return {Object} functions for the WrappedComponent e.g.: 'dispatchUserFetch()'
       * */


      /**
       * If the value passed to connect() is a function,
       *    execute the function and pass the props + context
       * @param {Object} props React props
       * @param {Object} context React context
       * @return {Array} an array with request configurations
       * */


      ReactReduxFetch.prototype.render = function render() {
        var _props = this.props,
            fetchData = _props.fetchData,
            other = _objectWithoutProperties(_props, ['fetchData']);

        var dispatchFunctions = this.state.dispatchFunctions;


        var mappings = this.buildMappings(this.props, this.context);
        var actions = dispatchFunctions || this.actionsFromProps(this.props.dispatch, mappings);
        var data = this.getFilteredFetchData(fetchData, mappings);

        return _react2.default.createElement(WrappedComponent, _extends({}, other, actions, data));
      };

      return ReactReduxFetch;
    }(_react.Component), _initialiseProps = function _initialiseProps() {
      var _this2 = this;

      this.state = {};

      this.getFilteredFetchData = function (fetchData, mappings) {
        var data = {};

        (0, _each2.default)(mappings, function (mapping) {
          var resource = (0, _buildActionsFromMappings.ensureResourceIsObject)(mapping);
          (0, _buildActionsFromMappings.validateResourceObject)(resource);
          var resourceName = resource.name;

          data[resourceName + 'Fetch'] = fetchData[resourceName] || {};
        });

        return data;
      };

      this.actionsFromProps = function (dispatch, mappings) {
        return (0, _reduce2.default)((0, _buildActionsFromMappings2.default)(mappings), function (actions, actionCreator, key) {
          var _Object$assign;

          return Object.assign({}, actions, (_Object$assign = {}, _Object$assign['dispatch' + (0, _capitalizeFirstLetter2.default)(key)] = function undefined() {
            var action = actionCreator.apply(undefined, arguments);
            if (action) {
              dispatch(action);
            }
          }, _Object$assign));
        }, {});
      };

      this.buildMappings = function (props, context) {
        var finalProps = props || _this2.props;
        var finalContext = context || _this2.context || {};

        return (0, _isFunction2.default)(mapPropsToRequestsToProps) ? // $FlowFixMe
        mapPropsToRequestsToProps(finalProps, finalContext) : // $FlowFixMe
        mapPropsToRequestsToProps;
      };
    }, _temp);


    ReactReduxFetch.displayName = 'ReactReduxFetch.connect(' + getDisplayName(WrappedComponent) + ')';

    // ReactReduxFetch.propTypes = {
    //   dispatch: PropTypes.func.isRequired,
    //   fetchData: PropTypes.object.isRequired,
    // };

    var mapStateToProps = function mapStateToProps(state, props) {
      return (0, _merge2.default)({ fetchData: (0, _selectors.getModel)(state) }, _helpers2.default.ensureObject(componentMapStateToProps, [state, props]));
    };

    var mapDispatchToProps = void 0;

    if ((0, _isFunction2.default)(componentMapDispatchToProps)) {
      mapDispatchToProps = function mapDispatchToProps(dispatch
      // $FlowFixMe: suppressing until assert issue is resolved (https://github.com/facebook/flow/issues/34)
      ) {
        return (0, _merge2.default)({ dispatch: dispatch }, componentMapDispatchToProps(dispatch));
      };
    } else if ((0, _isObject2.default)(componentMapDispatchToProps)) {
      mapDispatchToProps = function mapDispatchToProps(dispatch
      // $FlowFixMe: suppressing until assert issue is resolved (https://github.com/facebook/flow/issues/34)
      ) {
        return (0, _merge2.default)({ dispatch: dispatch }, (0, _redux.bindActionCreators)(componentMapDispatchToProps, dispatch));
      };
    }

    return (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(ReactReduxFetch);
  };
}

// function factory(defaults = {}, options = {}) {
function factory() {
  function connectImpl(map, mapStateToProps, mapDispatchToProps) {
    return connect(map, mapStateToProps, mapDispatchToProps);
  }

  return connectImpl;
}

exports.default = factory();