@e-group/hooks/esm/makeEditableFieldUtils.js

eGroup team react-hooks that share across projects.

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { hasSubmitSucceeded, getFormValues, reset, submit } from 'redux-form';
export default function makeEditableFieldUtils(FORM) {
  const successSelector = state => hasSubmitSucceeded(FORM)(state);

  const valueSelector = state => getFormValues(FORM)(state) || {};

  return function useEditableFieldUtils() {
    const dispatch = useDispatch();

    const _useState = useState({}),
          _useState2 = _slicedToArray(_useState, 2),
          afterSubmitActions = _useState2[0],
          setAfterSubmitActions = _useState2[1];

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

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

    const handleClose = () => {
      dispatch(reset(FORM));
    };

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