canner/lib/hocs/relation.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 = withQuery;
exports.removeSelf = removeSelf;

require("antd/lib/spin/style");

var _spin = _interopRequireDefault(require("antd/lib/spin"));

require("antd/lib/icon/style");

var _icon = _interopRequireDefault(require("antd/lib/icon"));

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

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

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

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

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

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 _antd = require("antd");

var _cannerRefId = _interopRequireDefault(require("canner-ref-id"));

var _index = _interopRequireDefault(require("../components/toolbar/index"));

var _lodash = require("lodash");

var _utils = require("./utils");

var _reactApollo = require("react-apollo");

var _graphqlTag = _interopRequireDefault(require("graphql-tag"));

var _query = require("../query");

var _reactContentLoader = require("react-content-loader");

function _templateObject2() {
  var data = (0, _taggedTemplateLiteral2.default)(["", ""]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = (0, _taggedTemplateLiteral2.default)(["", ""]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function withQuery(Com) {
  var _class;

  return (0, _reactApollo.withApollo)(_class =
  /*#__PURE__*/
  function (_React$PureComponent) {
    (0, _inherits2.default)(ComponentWithQuery, _React$PureComponent);

    function ComponentWithQuery(_props) {
      var _this;

      (0, _classCallCheck2.default)(this, ComponentWithQuery);
      _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(ComponentWithQuery).call(this, _props));
      (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "query", void 0);
      (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "queryData", function (props) {
        var _ref = props || _this.props,
            relation = _ref.relation,
            client = _ref.client,
            type = _ref.type,
            graphql = _ref.graphql,
            variables = _ref.variables,
            fetchPolicy = _ref.fetchPolicy,
            beforeFetch = _ref.beforeFetch;

        if (!relation) {
          return Promise.resolve();
        }

        _this.setState({
          isFetching: true
        });

        if (type === 'relation' && graphql) {
          var _finalQuery = graphql;

          var _finalVariables = variables || _this.query.getVairables();

          if (beforeFetch) {
            var updated = beforeFetch(relation.to, {
              relation: relation,
              query: _finalQuery,
              variables: _finalVariables
            });
            _finalQuery = updated.query;
            _finalVariables = updated.variables;
          }

          return client.query({
            query: (0, _graphqlTag.default)(_templateObject(), _finalQuery),
            variables: _finalVariables,
            fetchPolicy: fetchPolicy
          }).then(function (_ref2) {
            var data = _ref2.data,
                error = _ref2.error,
                errors = _ref2.errors;

            if (error) {
              throw new Error(errors);
            }

            return data;
          }).then(_this.updateData);
        }

        var finalQuery = _this.query.toGQL(relation.to);

        var finalVariables = _this.query.getVairables();

        if (beforeFetch) {
          var _updated = beforeFetch(relation.to, {
            relation: relation,
            query: finalQuery,
            variables: finalVariables
          });

          finalQuery = _updated.query;
          finalVariables = _updated.variables;
        }

        return client.query({
          query: (0, _graphqlTag.default)(_templateObject2(), finalQuery),
          variables: finalVariables,
          fetchPolicy: fetchPolicy
        }).then(function (_ref3) {
          var data = _ref3.data;

          _this.updateData(data);
        }).catch(function () {
          _this.setState({
            isFetching: false
          });
        });
      });
      (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "updateData", function (data) {
        _this.setState({
          originRootValue: data,
          isFetching: false
        });
      });
      (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "getArgs", function () {
        var relation = _this.props.relation;
        var queries = _this.query.getQueries([relation.to]).args || {
          pagination: {
            first: 10
          }
        };

        var variables = _this.query.getVairables();

        var args = (0, _lodash.mapValues)(queries, function (v) {
          return variables[v.substr(1)];
        });
        return args;
      });
      (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "updateQuery", function (paths, args) {
        _this.query.updateQueries(paths, 'args', args);

        _this.queryData();
      });
      _this.state = {
        originRootValue: null,
        isFetching: true,
        current: 0
      };

      if (_props.relation) {
        _this.query = new _query.Query({
          schema: _props.schema
        });
      }

      return _this;
    }

    (0, _createClass2.default)(ComponentWithQuery, [{
      key: "componentDidMount",
      value: function componentDidMount() {
        var _this$props = this.props,
            relation = _this$props.relation,
            toolbar = _this$props.toolbar;

        if (!relation) {
          return;
        }

        var args = this.getArgs();

        if (toolbar && toolbar.async) {
          args = (0, _objectSpread2.default)({}, args, {
            first: 10
          });
        }

        if (!toolbar || !toolbar.async) {
          args.first = undefined;
          delete args.last;
          delete args.after;
          delete args.before;
        }

        if (toolbar && toolbar.async && toolbar.filter && toolbar.filter.permanentFilter) {
          args = (0, _objectSpread2.default)({}, args, {
            where: toolbar.filter.permanentFilter
          });
        } // this method will also query data


        this.updateQuery([relation.to], args);
      }
    }, {
      key: "UNSAFE_componentWillReceiveProps",
      value: function UNSAFE_componentWillReceiveProps(props) {
        var _this$props2 = this.props,
            refId = _this$props2.refId,
            relation = _this$props2.relation;

        if (!relation) {
          return;
        }

        if (refId.toString() !== props.refId.toString()) {
          // refetch when route change
          this.queryData(props);
        }
      }
    }, {
      key: "render",
      value: function render() {
        var _this2 = this;

        var _this$state = this.state,
            originRootValue = _this$state.originRootValue,
            isFetching = _this$state.isFetching;
        var _this$props3 = this.props,
            toolbar = _this$props3.toolbar,
            relation = _this$props3.relation,
            schema = _this$props3.schema,
            refId = _this$props3.refId;

        if (!relation) {
          return React.createElement(Com, this.props);
        }

        if (!originRootValue) {
          return React.createElement(_reactContentLoader.List, {
            style: {
              maxWidth: 500
            }
          });
        }

        var args = this.getArgs();
        var removeSelfRootValue = (0, _defineProperty2.default)({}, relation.to, removeSelf(originRootValue[relation.to], refId, relation.to));
        var parsedRootValue = removeSelfRootValue;

        var tb = function tb(_ref4) {
          var children = _ref4.children,
              restProps = (0, _objectWithoutProperties2.default)(_ref4, ["children"]);
          return React.createElement(_index.default, (0, _extends2.default)({}, restProps, {
            items: schema[relation.to].items.items,
            toolbar: toolbar || {
              pagination: {
                type: 'pagination'
              }
            },
            args: args,
            query: _this2.query,
            keyName: relation.to,
            refId: new _cannerRefId.default(relation.to),
            originRootValue: parsedRootValue,
            updateQuery: _this2.updateQuery,
            parseConnectionToNormal: _utils.parseConnectionToNormal,
            getValue: _utils.getValue,
            defaultValue: _utils.defaultValue
          }), React.createElement(SpinWrapper, {
            isFetching: isFetching
          }, children));
        };

        return React.createElement(Com, (0, _extends2.default)({}, this.props, {
          isRelationFetching: isFetching,
          relationArgs: args,
          updateRelationQuery: this.updateQuery,
          Toolbar: tb,
          relationValue: removeSelfRootValue[relation.to]
        }));
      }
    }]);
    return ComponentWithQuery;
  }(React.PureComponent)) || _class;
}

function removeSelf(value, refId, relationTo) {
  var _refId$getPathArr$sli = refId.getPathArr().slice(0, 2),
      _refId$getPathArr$sli2 = (0, _slicedToArray2.default)(_refId$getPathArr$sli, 2),
      key = _refId$getPathArr$sli2[0],
      index = _refId$getPathArr$sli2[1];

  if (key !== relationTo) {
    return value;
  }

  return (0, _objectSpread2.default)({}, value, {
    edges: value.edges.filter(function (v, i) {
      return i !== Number(index);
    })
  });
}

var antIcon = React.createElement(_icon.default, {
  type: "loading",
  style: {
    fontSize: 24
  },
  spin: true
});

function SpinWrapper(_ref5) {
  var isFetching = _ref5.isFetching,
      children = _ref5.children,
      value = _ref5.value;
  return React.createElement(_spin.default, {
    indicator: antIcon,
    spinning: isFetching
  }, children(value));
}