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 _isFunction = require('lodash/isFunction');

var _isFunction2 = _interopRequireDefault(_isFunction);

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);

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, _temp2, _initialiseProps;

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

      function ReactReduxFetch() {
        var _temp, _this, _ret;

        _classCallCheck(this, ReactReduxFetch);

        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
          args[_key] = arguments[_key];
        }

        return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _initialiseProps.call(_this), _temp), _possibleConstructorReturn(_this, _ret);
      }

      /**
       * @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;
        var fetchData = _props.fetchData;

        var other = _objectWithoutProperties(_props, ['fetchData']);

        var mappings = this.buildMappings(this.props, this.context);
        var actions = 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.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 () {
        var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this2.props;
        var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _this2.context;
        return (0, _isFunction2.default)(mapPropsToRequestsToProps) ? mapPropsToRequestsToProps(props, context || {}) : mapPropsToRequestsToProps;
      };
    }, _temp2);


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

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

    var mapStateToProps = function mapStateToProps(state, props) {
      return (0, _merge2.default)({
        fetchData: (0, _selectors.getModel)(state)
      }, (0, _isFunction2.default)(componentMapStateToProps) ? componentMapStateToProps(state, props) : {});
    };

    var mapDispatchToProps = function mapDispatchToProps(dispatch) {
      return (0, _merge2.default)({
        dispatch: dispatch
      }, (0, _isFunction2.default)(componentMapDispatchToProps) ? 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({
  // TODO add defaults
});