canner/lib/components/toolbar/actions/importModal.js

Build CMS in few lines of code for different data sources

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

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

var _modal = _interopRequireDefault(require("antd/lib/modal"));

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

var _alert = _interopRequireDefault(require("antd/lib/alert"));

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

var _button = _interopRequireDefault(require("antd/lib/button"));

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

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

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 _getPrototypeOf3 = _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"));

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

var _form = _interopRequireDefault(require("antd/lib/form"));

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

var _upload = _interopRequireDefault(require("antd/lib/upload"));

var _react = _interopRequireDefault(require("react"));

var _cannerHelpers = require("canner-helpers");

var _antd = require("antd");

var _lodash = require("lodash");

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

var _reactIntl = require("react-intl");

var _dec, _class;

var Dragger = _upload.default.Dragger;
var ImportModal = ( // $FlowFixMe
_dec = _form.default.create(), (0, _reactIntl.injectIntl)(_class = (0, _reactApollo.withApollo)(_class = _dec(_class =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2.default)(ImportModal, _React$Component);

  function ImportModal() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, ImportModal);

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

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(ImportModal)).call.apply(_getPrototypeOf2, [this].concat(args)));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "state", {
      success: false,
      error: false,
      errorMessage: '',
      list: []
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "download", function (e) {
      e.preventDefault();
      var _this$props = _this.props,
          fileName = _this$props.fileName,
          triggerModal = _this$props.triggerModal,
          fields = _this$props.fields;
      var csv = genCSV([], fields);
      download(fileName, csv);
      triggerModal();
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleCancel", function () {
      _this.props.triggerModal();
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "customRequest", function (_ref) {
      var onSuccess = _ref.onSuccess,
          onError = _ref.onError,
          file = _ref.file;
      var _this$props2 = _this.props,
          deploy = _this$props2.deploy,
          keyName = _this$props2.keyName;
      var reader = new FileReader();
      reader.readAsText(file);

      reader.onload = function (e) {
        var csv = parseCSV(e.target.result, '\n', ',');

        _this.setState({
          list: csv.slice(1)
        });

        _this.request(csv).then(function () {
          return deploy(keyName);
        }).then(function () {
          onSuccess('done');
        }).catch(function (e) {
          onError(e);
        });
      };
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "request", function (csv) {
      var _this$props3 = _this.props,
          request = _this$props3.request,
          fields = _this$props3.fields,
          keyName = _this$props3.keyName,
          items = _this$props3.items,
          intl = _this$props3.intl;
      var fieldsLength = fields.length;
      return new Promise(function (resolve, reject) {
        try {
          csv.slice(1).reduce(function (preRequest, values) {
            var payload = fields.reduce(function (result, field, index) {
              var value = values[index];

              if (field.type === 'number') {
                value = Number(value);
              } else if (field.type === 'boolean') {
                value = Boolean(value);
              }

              (0, _lodash.set)(result, field.keyName, value);
              return result;
            }, {});

            if (values.length !== fieldsLength) {
              throw new Error(intl.formatMessage({
                id: 'actions.import.error.invalidFormat'
              }));
            }

            var tmpId = Math.random().toString(36).substr(2, 12);
            return preRequest.then(function () {
              return request({
                type: 'CREATE_ARRAY',
                payload: {
                  key: keyName,
                  id: tmpId,
                  value: (0, _objectSpread2.default)({}, (0, _cannerHelpers.createEmptyData)(items), payload, {
                    id: tmpId,
                    __typename: null
                  })
                }
              }).catch(function (e) {
                return e;
              });
            });
          }, Promise.resolve()).then(resolve);
        } catch (e) {
          reject(e);
        }
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "uploadChange", function (info) {
      var file = info.file;

      if (file.status === 'done') {
        _this.setState({
          success: true
        });
      } else if (file.status === 'error') {
        _this.setState({
          success: false,
          error: true,
          errorMessage: file.error.message
        });
      } else {
        _this.setState({
          success: false,
          error: false
        });
      }
    });
    return _this;
  }

  (0, _createClass2.default)(ImportModal, [{
    key: "render",
    value: function render() {
      var _this$props4 = this.props,
          visible = _this$props4.visible,
          title = _this$props4.title,
          keyName = _this$props4.keyName;
      var _this$state = this.state,
          success = _this$state.success,
          list = _this$state.list,
          error = _this$state.error,
          errorMessage = _this$state.errorMessage;
      return _react.default.createElement(_modal.default, {
        title: _react.default.createElement(_reactIntl.FormattedMessage, {
          id: "actions.import.modal.title"
        }),
        visible: visible,
        footer: null,
        closable: true,
        maskClosable: true,
        onCancel: this.handleCancel
      }, _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("div", {
        style: {
          marginBottom: 24
        }
      }, _react.default.createElement(_reactIntl.FormattedMessage, {
        id: "actions.import.step1",
        tagName: "div"
      }), _react.default.createElement(_button.default, {
        onClick: this.download,
        "data-testid": "actions-import-download-button"
      }, _react.default.createElement(_icon.default, {
        type: "download"
      }), _react.default.createElement(_reactIntl.FormattedMessage, {
        id: "actions.import.download"
      }))), _react.default.createElement(_reactIntl.FormattedMessage, {
        id: "actions.import.step2",
        tagName: "div"
      }), _react.default.createElement(Dragger, {
        name: "file",
        "data-testid": "actions-import-dragger",
        customRequest: this.customRequest,
        accept: "text/csv",
        onChange: this.uploadChange
      }, _react.default.createElement("p", {
        className: "ant-upload-drag-icon"
      }, _react.default.createElement(_icon.default, {
        type: "inbox"
      })), _react.default.createElement(_reactIntl.FormattedMessage, {
        id: "actions.import.upload.hint"
      }, function (text) {
        return _react.default.createElement("p", {
          className: "ant-upload-text"
        }, text);
      })), success && _react.default.createElement(_alert.default, {
        message: _react.default.createElement(_reactIntl.FormattedMessage, {
          id: "actions.import.upload.success",
          values: {
            length: list.length,
            title: title || keyName
          }
        }),
        type: "success"
      }), error && _react.default.createElement(_alert.default, {
        message: errorMessage,
        type: "error"
      })));
    }
  }]);
  return ImportModal;
}(_react.default.Component)) || _class) || _class) || _class);
exports.default = ImportModal;

function parseCSV(text, lineTerminator, cellTerminator) {
  var rows = []; //break the lines apart

  var lines = text.split(lineTerminator);

  for (var j = 0; j < lines.length; j++) {
    var values = [];

    if (lines[j] != "") {
      //create a table row 
      //split the rows at the cellTerminator character
      var information = lines[j].split(cellTerminator);

      for (var k = 0; k < information.length; k++) {
        //append the cell to the row
        values.push(information[k]);
      }
    }

    rows.push(values);
  }

  return rows;
}

function genCSV(data, fields) {
  var fieldNames = fields.map(function (field) {
    return field.title || field.keyName;
  });
  var rows = [fieldNames];
  data.forEach(function (datum) {
    var values = [];
    fields.forEach(function (field) {
      var value = (0, _lodash.get)(datum, field.keyName);

      if (field.render) {
        value = field.render(value);
      }

      values.push(value);
    });
    rows.push(values);
  });
  var csvContent = 'data:text/csv;charset=utf-8,';
  rows.forEach(function (rowArray) {
    var row = rowArray.join(',');
    csvContent += "".concat(row, "\r\n");
  });
  return csvContent;
}

function download(fileName, csvContent) {
  var encodedUri = encodeURI(csvContent);
  var link = document.createElement('a');
  link.setAttribute('href', encodedUri);
  link.setAttribute('download', "".concat(fileName, ".csv"));
  link.innerHTML = '';
  document.body && document.body.appendChild(link); // Required for FF

  link.click();
}