canner
Version:
Build CMS in few lines of code for different data sources
323 lines (276 loc) • 11.8 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = connectId;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
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 _cannerRefId = _interopRequireDefault(require("canner-ref-id"));
var _cannerHelpers = require("canner-helpers");
var _lodash = require("lodash");
var _reactContentLoader = require("react-content-loader");
function connectId(Com) {
return (
/*#__PURE__*/
function (_React$Component) {
(0, _inherits2.default)(ComponentConnectId, _React$Component);
function ComponentConnectId(props) {
var _this;
(0, _classCallCheck2.default)(this, ComponentConnectId);
_this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(ComponentConnectId).call(this, props));
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "refId", void 0);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "query", void 0);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "reset", void 0);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "args", void 0);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "fetchById", function (id, timeIntervale) {
var _this$props = _this.props,
query = _this$props.query,
keyName = _this$props.keyName,
updateQuery = _this$props.updateQuery,
fetch = _this$props.fetch;
var paths = [keyName];
var queries = query.getQueries(paths).args || {
pagination: {
first: 10
}
};
var variables = query.getVairables(); // get current args
_this.args = (0, _lodash.mapValues)(queries, function (v) {
return variables[v.substr(1)];
});
_this.setState({
canRender: false
});
updateQuery(paths, (0, _objectSpread2.default)({}, _this.args, {
where: {
id: id
}
})).then(function () {
return fetch(keyName);
}).then(function (result) {
var index = 0;
if (result[keyName].edges) {
index = result[keyName].edges.findIndex(function (edge) {
return edge.cursor === id;
});
} else {
index = result[keyName].findIndex(function (item) {
return item.id === id;
});
}
setTimeout(function () {
_this.setState({
canRender: true,
refId: new _cannerRefId.default("".concat(keyName, "/").concat(index))
});
}, timeIntervale || 0);
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "createArray",
/*#__PURE__*/
function () {
var _ref = (0, _asyncToGenerator2.default)(
/*#__PURE__*/
_regenerator.default.mark(function _callee(keyName, value) {
var _this$props2, fetch, request, updateQuery;
return _regenerator.default.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_this$props2 = _this.props, fetch = _this$props2.fetch, request = _this$props2.request, updateQuery = _this$props2.updateQuery;
_context.next = 3;
return updateQuery([keyName], {
first: 0
});
case 3:
_context.next = 5;
return fetch(keyName).then(function (result) {
var size = (0, _lodash.get)(result, [keyName, 'edges']).length; // $FlowFixMe
return request({
type: 'CREATE_ARRAY',
payload: {
id: value.id,
value: value,
key: keyName
}
}).then(function () {
return size;
});
}).then(function (size) {
_this.setState({
canRender: true,
refId: new _cannerRefId.default("".concat(keyName, "/").concat(size))
});
});
case 5:
case "end":
return _context.stop();
}
}
}, _callee, this);
}));
return function (_x, _x2) {
return _ref.apply(this, arguments);
};
}());
var routerParams = props.routerParams,
pattern = props.pattern,
refId = props.refId,
_keyName = props.keyName,
routes = props.routes;
var myRefId = refId; // route to children
if (routerParams.operator === 'create' && pattern === 'array') {
_this.state = {
canRender: false,
refId: refId
};
} else if (pattern === 'array' && routes.length > 1) {
// in this case,
// this hoc will fetch data with query {where: {id: id}} in componentDidMount
_this.state = {
canRender: false,
refId: null
};
} else {
myRefId = myRefId ? myRefId.child(_keyName) : new _cannerRefId.default(_keyName);
_this.state = {
canRender: true,
refId: myRefId
};
}
return _this;
}
(0, _createClass2.default)(ComponentConnectId, [{
key: "UNSAFE_componentWillReceiveProps",
value: function UNSAFE_componentWillReceiveProps(props) {
var _this2 = this;
var _props$routerParams = props.routerParams,
operator = _props$routerParams.operator,
payload = _props$routerParams.payload,
pattern = props.pattern,
items = props.items,
keyName = props.keyName,
routes = props.routes,
updateQuery = props.updateQuery;
if (operator === 'create' && this.props.routerParams.operator === 'update' && pattern === 'array') {
// posts => posts?op=create
var value = (0, _cannerHelpers.createEmptyData)(items);
(0, _lodash.update)(value, 'id', function (id) {
return id || randomId();
});
(0, _lodash.update)(value, '__typename', function (typename) {
return typename || null;
});
this.setState({
canRender: false
});
if (payload) {
value = (0, _lodash.merge)(value, payload);
}
this.createArray(keyName, value);
}
if (operator === 'update' && this.props.routerParams.operator === 'create' && pattern === 'array') {
// posts?op=create => posts
updateQuery([keyName], {
first: 10,
where: {}
}).then(function () {
_this2.setState({
refId: new _cannerRefId.default(keyName)
});
});
}
if (pattern === 'array' && routes.length > 1 && this.props.routes.length === 1) {
// posts => posts/<postId>
this.setState({
canRender: false
});
this.fetchById(routes[1], 400);
}
if (pattern === 'array' && routes.length === 1 && this.args && this.props.routes.length > 1) {
// posts/<postId> => posts
this.setState({
refId: new _cannerRefId.default("".concat(keyName))
});
updateQuery([keyName], this.args).then(function () {
delete _this2.args;
});
}
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
var _this$props3 = this.props,
routerParams = _this$props3.routerParams,
pattern = _this$props3.pattern,
keyName = _this$props3.keyName,
items = _this$props3.items,
routes = _this$props3.routes;
if (routerParams.operator === 'create' && pattern === 'array') {
// posts?op=create
var value = (0, _cannerHelpers.createEmptyData)(items);
(0, _lodash.update)(value, 'id', function (id) {
return id || randomId();
});
(0, _lodash.update)(value, '__typename', function (typename) {
return typename || null;
});
if (routerParams.payload) {
value = (0, _lodash.merge)(value, routerParams.payload);
}
this.createArray(keyName, value);
} else if (pattern === 'array' && routes.length > 1) {
// posts/<postId>/title
this.fetchById(routes[1]);
} else {
this.setState({
canRender: true
});
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
var _this$props4 = this.props,
updateQuery = _this$props4.updateQuery,
keyName = _this$props4.keyName,
pattern = _this$props4.pattern;
if (pattern === 'array' && this.args) {
updateQuery([keyName], this.args);
}
}
}, {
key: "render",
value: function render() {
var _this$state = this.state,
canRender = _this$state.canRender,
refId = _this$state.refId;
if (!canRender) return React.createElement(_reactContentLoader.List, {
style: {
maxWidth: 600
}
});
return React.createElement(Com, (0, _extends2.default)({}, this.props, {
refId: refId
}));
}
}]);
return ComponentConnectId;
}(React.Component)
);
}
function randomId() {
return Math.random().toString(36).substr(2, 12);
}