@e-group/hooks/makeEditableFieldUtils.js

eGroup team react-hooks that share across projects.

"use strict";

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

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

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

var _react = require("react");

var _reactRedux = require("react-redux");

var _reduxForm = require("redux-form");

function makeEditableFieldUtils(FORM) {
  const successSelector = state => (0, _reduxForm.hasSubmitSucceeded)(FORM)(state);

  const valueSelector = state => (0, _reduxForm.getFormValues)(FORM)(state) || {};

  return function useEditableFieldUtils() {
    const dispatch = (0, _reactRedux.useDispatch)();

    const _useState = (0, _react.useState)({}),
          _useState2 = (0, _slicedToArray2.default)(_useState, 2),
          afterSubmitActions = _useState2[0],
          setAfterSubmitActions = _useState2[1];

    const submitSucceeded = (0, _reactRedux.useSelector)(successSelector);
    const formValues = (0, _reactRedux.useSelector)(valueSelector);
    (0, _react.useEffect)(() => {
      if (submitSucceeded && afterSubmitActions.closeEditing) {
        afterSubmitActions.closeEditing();
      }
    }, [afterSubmitActions, submitSucceeded]);

    const handleSave = (e, {
      closeEditing
    }) => {
      dispatch((0, _reduxForm.submit)(FORM));
      setAfterSubmitActions({
        closeEditing
      });
    };

    const handleClose = () => {
      dispatch((0, _reduxForm.reset)(FORM));
    };

    return {
      formValues: formValues,
      afterSubmitActions,
      setAfterSubmitActions,
      handleClose,
      handleSave,
      submitSucceeded
    };
  };
}