canner/lib/hocs/containerQuery.js

Build CMS in few lines of code for different data sources

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = withContainerRouter;
exports.getValue = getValue;
exports.parseConnectionToNormal = parseConnectionToNormal;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var React = _interopRequireWildcard(require("react"));

var _lodash = require("lodash");

// $FlowFixMe
function withContainerRouter(Com) {
  return (
    /*#__PURE__*/
    function (_React$Component) {
      (0, _inherits2.default)(ContainerWithRouter, _React$Component);

      function ContainerWithRouter(_props) {
        var _this;

        (0, _classCallCheck2.default)(this, ContainerWithRouter);
        _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(ContainerWithRouter).call(this, _props));
        (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "state", {
          value: {},
          recordValue: {},
          originRootValue: {},
          rootValue: {},
          isFetching: false
        });
        (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "key", void 0);
        (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "subscription", void 0);
        (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "queryData", function (props) {
          var _ref = props || _this.props,
              refId = _ref.refId,
              fetch = _ref.fetch;

          return fetch(_this.key).then(function (data) {
            var rootValue = parseConnectionToNormal(data);

            _this.setState({
              originRootValue: data,
              rootValue: rootValue,
              recordValue: getRecordValue(rootValue, refId),
              value: getValue(data, refId.getPathArr()),
              isFetching: false
            });
          });
        });
        (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "subscribe", function () {
          var _this$props = _this.props,
              subscribe = _this$props.subscribe,
              refId = _this$props.refId;
          var subscription = subscribe(_this.key, function (data) {
            var rootValue = parseConnectionToNormal(data);

            _this.setState({
              originRootValue: data,
              rootValue: rootValue,
              recordValue: getRecordValue(rootValue, refId),
              value: getValue(data, refId.getPathArr()),
              isFetching: false
            });
          });
          _this.subscription = subscription;
        });
        (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "unsubscribe", function () {
          if (_this.subscription) {
            _this.subscription.unsubscribe();
          }
        });
        _this.key = _props.refId.getPathArr()[0];
        return _this;
      }

      (0, _createClass2.default)(ContainerWithRouter, [{
        key: "componentDidMount",
        value: function componentDidMount() {
          if (this.key) {
            this.queryData();
            this.subscribe();
          }
        }
      }, {
        key: "componentWillUnmount",
        value: function componentWillUnmount() {
          this.unsubscribe();
        }
      }, {
        key: "render",
        value: function render() {
          var _this$state = this.state,
              value = _this$state.value,
              recordValue = _this$state.recordValue;
          return React.createElement(Com, (0, _extends2.default)({}, this.props, {
            value: value,
            recordValue: recordValue
          }));
        }
      }]);
      return ContainerWithRouter;
    }(React.Component)
  );
}

function getValue(value, idPathArr) {
  return idPathArr.reduce(function (result, key) {
    if ((0, _lodash.isPlainObject)(result)) {
      if ('edges' in result && 'pageInfo' in result) {
        return (0, _lodash.get)(result, ['edges', key, 'node']);
      }

      return (0, _lodash.get)(result, key);
    } else if ((0, _lodash.isArray)(result)) {
      return (0, _lodash.get)(result, key);
    } else {
      return result;
    }
  }, value);
}

function parseConnectionToNormal(value) {
  if ((0, _lodash.isPlainObject)(value)) {
    if (value.edges && value.pageInfo) {
      return value.edges.map(function (edge) {
        return parseConnectionToNormal(edge.node);
      });
    }

    return (0, _lodash.mapValues)(value, function (item) {
      return parseConnectionToNormal(item);
    });
  } else if ((0, _lodash.isArray)(value)) {
    return value.map(function (item) {
      return parseConnectionToNormal(item);
    });
  } else {
    return value;
  }
}

function getRecordValue(rootValue, refId) {
  return (0, _lodash.get)(rootValue, refId.getPathArr(), {});
}