@talend/react-containers/lib/ComponentForm/ComponentForm.sagas.js

Provide connected components aka containers for @talend/react-cmf based on @talend/react-components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.checkFormComponentId = checkFormComponentId;
exports.default = void 0;
exports.fetchDefinition = fetchDefinition;
exports.handle = handle;
exports.handleSetDirtyState = handleSetDirtyState;
exports.onDidMount = onDidMount;
exports.onFormSubmit = onFormSubmit;
var _effects = require("redux-saga/effects");
var _reactCmf = _interopRequireDefault(require("@talend/react-cmf"));
var _immutable = require("immutable");
var _ComponentForm = _interopRequireDefault(require("./ComponentForm.component"));
var _ComponentForm2 = require("./ComponentForm.actions");
var _lodash = require("lodash");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
 * @param {Action{definitionURL: String, uiSpecPath: String, componentId: String }} action
 */
function* fetchDefinition(action) {
  const {
    data,
    response
  } = yield (0, _effects.call)(_reactCmf.default.sagas.http.get, action.definitionURL);
  if (!response.ok) {
    yield (0, _effects.put)(_ComponentForm.default.setStateAction(prev => prev.set('jsonSchema').set('uiSchema').set('response', response).set('dirty', false), action.componentId));
  } else if (action.uiSpecPath) {
    const formSpec = (0, _lodash.get)(data, action.uiSpecPath);
    yield (0, _effects.put)(_ComponentForm.default.setStateAction({
      definition: data,
      initialState: formSpec,
      ...formSpec,
      ...action.data
    }, action.componentId));
  } else {
    yield (0, _effects.put)(_ComponentForm.default.setStateAction({
      initialState: data,
      ...data,
      ...action.data
    }, action.componentId));
  }
}
function* onDidMount({
  componentId = 'default',
  definition,
  definitionURL,
  uiSpecPath,
  data
}) {
  const jsonSchema = yield (0, _effects.select)(state => _ComponentForm.default.getState(state, componentId).get('jsonSchema'));
  if (!jsonSchema) {
    if (definition) {
      yield (0, _effects.put)(_ComponentForm.default.setStateAction({
        initialState: definition,
        ...definition,
        ...data
      }, componentId));
    } else {
      yield fetchDefinition({
        definitionURL,
        componentId,
        uiSpecPath,
        data
      });
    }
  }
}
function* onFormSubmit(componentId, submitURL, action) {
  if (action.componentId !== componentId) {
    return;
  }
  /**
   * below is a workaround, Component.setStateAction when called with a function as parameter
   * doesn't produce an object as result but a function.
   * a function that require as second parameter a function that uppon call return the state
   */
  const prevState = yield (0, _effects.select)();
  function getReduxState() {
    return prevState;
  }
  yield (0, _effects.put)(_ComponentForm.default.setStateAction(prev => prev.setIn(['initialState', 'jsonSchema'], prev.get('jsonSchema')).setIn(['initialState', 'uiSchema'], prev.get('uiSchema')).setIn(['initialState', 'properties'], (0, _immutable.fromJS)(action.properties)), componentId)(undefined, getReduxState));
  if (!submitURL) {
    return;
  }
  const {
    response,
    data
  } = yield (0, _effects.call)(_reactCmf.default.sagas.http.post, submitURL, action.properties);
  yield (0, _effects.put)({
    type: response.ok ? _ComponentForm.default.ON_SUBMIT_SUCCEED : _ComponentForm.default.ON_SUBMIT_FAILED,
    data,
    formData: action.properties,
    response,
    componentId
  });
}

/**
 * check that the formId and action type match with the provided actions
 * @param {String} componentId
 * @return {(Action{type: String, componentid: String}) => Bool}
 */
function checkFormComponentId(componentId, actionType) {
  return function matchActionComponentid(action) {
    return action.type === actionType && action.componentId === componentId;
  };
}

/**
 * This function handle a change of the dirty state for a given component form id
 * @param {object} reduxAction with a componentId (string) & the dirtyState (boolean) to apply
 */
function* handleSetDirtyState({
  componentId,
  dirty
}) {
  const componentFormState = yield (0, _effects.select)(_ComponentForm.default.getState, componentId);
  yield (0, _effects.put)(_ComponentForm.default.setStateAction(componentFormState.set('dirty', !!dirty), componentId));
}
function* handle(props) {
  yield (0, _effects.call)(onDidMount, props);
  yield (0, _effects.takeLatest)(_ComponentForm2.COMPONENT_FORM_SET_DIRTY, handleSetDirtyState);
  yield (0, _effects.takeEvery)(checkFormComponentId(props.componentId, _ComponentForm.default.ON_DEFINITION_URL_CHANGED), fetchDefinition);
  yield (0, _effects.takeLatest)(_ComponentForm.default.ON_SUBMIT, onFormSubmit, props.componentId, props.submitURL);
  yield (0, _effects.take)('DO_NOT_QUIT');
}
var _default = exports.default = {
  'ComponentForm#default': handle
};
//# sourceMappingURL=ComponentForm.sagas.js.map