Wait for all patch requests to finish before closing modal

Issue #1361

src/actions/WindowActions.js

@@ -22,6 +22,9 @@ import {
   NO_CONNECTION,
   OPEN_MODAL,
   OPEN_RAW_MODAL,
+  PATCH_FAILURE,
+  PATCH_REQUEST,
+  PATCH_SUCCESS,
   SELECT_TABLE_ITEMS,
   SET_LATEST_NEW_DOCUMENT,
   SORT_TAB,
@@ -555,21 +558,26 @@ export function patch(
   isEdit
 ) {
   return async dispatch => {
+    const symbol = Symbol();
+
+    const options = {
+      entity,
+      docType: windowType,
+      docId: id,
+      tabId,
+      rowId,
+      property,
+      value,
+      isAdvanced,
+      viewId,
+      isEdit
+    };
+
+    await dispatch({ type: PATCH_REQUEST, symbol, options });
     await dispatch(indicatorState("pending"));
 
     try {
-      const response = await patchRequest({
-        entity,
-        docType: windowType,
-        docId: id,
-        tabId,
-        rowId,
-        property,
-        value,
-        isAdvanced,
-        viewId,
-        isEdit
-      });
+      const response = await patchRequest(options);
 
       const data =
         response.data instanceof Array ? response.data : [response.data];
@@ -579,9 +587,12 @@ export function patch(
       );
 
       await dispatch(indicatorState("saved"));
+      await dispatch({ type: PATCH_SUCCESS, symbol });
 
       return data;
     } catch (error) {
+      await dispatch({ type: PATCH_FAILURE, symbol });
+
       const response = await getData(
         entity,
         windowType,

src/components/app/RawModal.js

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import React, { Component } from "react";
 import { connect } from "react-redux";
 
+import { PATCH_RESET } from "../../constants/ActionTypes";
 import { closeListIncludedView } from "../../actions/ListActions";
 import { deleteView } from "../../actions/ViewActions";
 import { closeModal, closeRawModal } from "../../actions/WindowActions";
@@ -38,6 +39,14 @@ class RawModal extends Component {
     this.removeEventListeners();
   }
 
+  componentWillUpdate(props) {
+    if (this.resolve) {
+      if (!props.success || props.requests.length === 0) {
+        this.resolve(props.success);
+      }
+    }
+  }
+
   toggleTooltip = visible => {
     this.setState({
       isTooltipShow: visible
@@ -69,9 +78,31 @@ class RawModal extends Component {
   };
 
   handleClose = async () => {
-    const { closeCallback, viewId, windowType } = this.props;
+    const {
+      dispatch,
+      closeCallback,
+      viewId,
+      windowType,
+      requests
+    } = this.props;
+
     const { isNew } = this.state;
 
+    if (requests.length > 0) {
+      const success = await new Promise(resolve => {
+        this.resolve = resolve;
+      });
+
+      delete this.resolve;
+
+      if (!success) {
+        // TODO: Give user feedback about error, modal won't close now
+        await dispatch({ type: PATCH_RESET });
+
+        return;
+      }
+    }
+
     if (closeCallback) {
       await closeCallback(isNew);
     }
@@ -157,12 +188,16 @@ class RawModal extends Component {
 }
 
 const mapStateToProps = state => ({
-  modalVisible: state.windowHandler.modal.visible || false
+  modalVisible: state.windowHandler.modal.visible || false,
+  requests: state.windowHandler.patches.requests,
+  success: state.windowHandler.patches.success
 });
 
 RawModal.propTypes = {
   dispatch: PropTypes.func.isRequired,
-  modalVisible: PropTypes.bool
+  modalVisible: PropTypes.bool,
+  requests: PropTypes.object.isRequired,
+  success: PropTypes.bool.isRequired
 };
 
 export default connect(mapStateToProps)(RawModal);

src/constants/ActionTypes.js

@@ -69,3 +69,8 @@ export const SET_LATEST_NEW_DOCUMENT = "SET_LATEST_NEW_DOCUMENT";
 
 export const ALLOW_SHORTCUT = "ALLOW_SHORTCUT";
 export const DISABLE_SHORTCUT = "DISABLE_SHORTCUT";
+
+export const PATCH_REQUEST = "PATCH_REQUEST";
+export const PATCH_SUCCESS = "PATCH_SUCCESS";
+export const PATCH_FAILURE = "PATCH_FAILURE";
+export const PATCH_RESET = "PATCH_RESET";

src/reducers/windowHandler.js

@@ -17,6 +17,10 @@ import {
   NO_CONNECTION,
   OPEN_MODAL,
   OPEN_RAW_MODAL,
+  PATCH_FAILURE,
+  PATCH_REQUEST,
+  PATCH_RESET,
+  PATCH_SUCCESS,
   SELECT_TABLE_ITEMS,
   SET_LATEST_NEW_DOCUMENT,
   SORT_TAB,
@@ -78,7 +82,13 @@ const initialState = {
   allowShortcut: true,
   latestNewDocument: null,
   viewId: null,
-  selections: {}
+  selections: {},
+  patches: {
+    requests: {
+      length: 0
+    },
+    success: true
+  }
 };
 
 export const NO_SELECTION = [];
@@ -452,6 +462,70 @@ export default function windowHandler(state = initialState, action) {
         allowShortcut: false
       };
 
+    case PATCH_REQUEST:
+      return {
+        ...state,
+        patches: {
+          ...state.patches,
+          requests: {
+            ...state.patches.requests,
+            [action.symbol]: action.options,
+            length: state.patches.requests.length + 1
+          }
+        }
+      };
+
+    case PATCH_SUCCESS: {
+      const requests = { ...state.patches.requests };
+
+      if (!requests[action.symbol]) {
+        return state;
+      }
+
+      delete requests[action.symbol];
+      requests.length = requests.length - 1;
+
+      return {
+        ...state,
+        patches: {
+          ...state.patches,
+          requests
+        }
+      };
+    }
+
+    case PATCH_FAILURE: {
+      const requests = { ...state.patches.requests };
+
+      if (!requests[action.symbol]) {
+        return state;
+      }
+
+      delete requests[action.symbol];
+      requests.length = requests.length - 1;
+
+      return {
+        ...state,
+        patches: {
+          ...state.patches,
+          requests,
+          success: false
+        }
+      };
+    }
+
+    case PATCH_RESET:
+      return {
+        ...state,
+        patches: {
+          ...state.patches,
+          requests: {
+            length: 0
+          },
+          success: true
+        }
+      };
+
     default:
       return state;
   }