canner/lib/hocs/graphqlQuery.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;

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

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

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

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

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 React = _interopRequireWildcard(require("react"));

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

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

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

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

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

  return data;
}

function withQuery(Com) {
  return (
    /*#__PURE__*/
    function (_React$Component) {
      (0, _inherits2.default)(ComWithQuery, _React$Component);

      function ComWithQuery() {
        (0, _classCallCheck2.default)(this, ComWithQuery);
        return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(ComWithQuery).apply(this, arguments));
      }

      (0, _createClass2.default)(ComWithQuery, [{
        key: "render",
        value: function render() {
          var _this$props = this.props,
              graphql = _this$props.graphql,
              variables = _this$props.variables,
              transformData = _this$props.transformData,
              restProps = (0, _objectWithoutProperties2.default)(_this$props, ["graphql", "variables", "transformData"]);

          if (!graphql) {
            return React.createElement(Com, restProps);
          }

          return React.createElement(_reactApollo.Query, {
            query: (0, _graphqlTag.default)(_templateObject(), graphql),
            variables: variables
          }, function (_ref) {
            var loading = _ref.loading,
                error = _ref.error,
                data = _ref.data,
                graphqlProps = (0, _objectWithoutProperties2.default)(_ref, ["loading", "error", "data"]);
            if (loading) return React.createElement(_reactContentLoader.List, {
              style: {
                maxWidth: '600px'
              }
            });
            if (error) return "Error!: ".concat(error);
            var key = Object.keys(data)[0];
            var value = data[key];

            if (Array.isArray(value)) {
              // delete symbol in every item to let vega works
              value = value.map(function (v) {
                return (0, _objectSpread2.default)({}, v);
              });
            }

            if (transformData) {
              value = transformData(value);
            }

            return React.createElement(Com, (0, _extends2.default)({
              value: value
            }, restProps, graphqlProps));
          });
        }
      }]);
      return ComWithQuery;
    }(React.Component)
  );
}