From 0a149f9e54c257ed33db0c51239c1f31f8517857 Mon Sep 17 00:00:00 2001
From: Nikhil Nandagopal <nikhil.nandagopal@gmail.com>
Date: Thu, 15 Oct 2020 20:58:54 +0530
Subject: [PATCH] added cancel request logic for update layout, api and action
 (#1224)

---
 app/client/src/api/ActionAPI.tsx   | 20 +++++++++++++++++---
 app/client/src/api/Api.tsx         |  7 +++++--
 app/client/src/api/PageApi.tsx     | 11 +++++++++--
 app/client/src/sagas/PageSagas.tsx |  1 +
 4 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/app/client/src/api/ActionAPI.tsx b/app/client/src/api/ActionAPI.tsx
index c0762c3b37..085eb768a7 100644
--- a/app/client/src/api/ActionAPI.tsx
+++ b/app/client/src/api/ActionAPI.tsx
@@ -4,7 +4,7 @@ import {
   APIRequest,
   DEFAULT_EXECUTE_ACTION_TIMEOUT_MS,
 } from "constants/ApiConstants";
-import { AxiosPromise } from "axios";
+import axios, { AxiosPromise, CancelTokenSource } from "axios";
 import { RestAction } from "entities/Action";
 
 export interface CreateActionRequest<T> extends APIRequest {
@@ -109,6 +109,8 @@ export interface UpdateActionNameRequest {
 
 class ActionAPI extends API {
   static url = "v1/actions";
+  static apiUpdateCancelTokenSource: CancelTokenSource;
+  static queryUpdateCancelTokenSource: CancelTokenSource;
 
   static fetchAPI(id: string): AxiosPromise<GenericApiResponse<RestAction>> {
     return API.get(`${ActionAPI.url}/${id}`);
@@ -141,7 +143,13 @@ class ActionAPI extends API {
   static updateAPI(
     apiConfig: Partial<RestAction>,
   ): AxiosPromise<ActionCreateUpdateResponse> {
-    return API.put(`${ActionAPI.url}/${apiConfig.id}`, apiConfig);
+    if (ActionAPI.apiUpdateCancelTokenSource) {
+      ActionAPI.apiUpdateCancelTokenSource.cancel();
+    }
+    ActionAPI.apiUpdateCancelTokenSource = axios.CancelToken.source();
+    return API.put(`${ActionAPI.url}/${apiConfig.id}`, apiConfig, undefined, {
+      cancelToken: ActionAPI.apiUpdateCancelTokenSource.token,
+    });
   }
 
   static updateActionName(updateActionNameRequest: UpdateActionNameRequest) {
@@ -161,7 +169,13 @@ class ActionAPI extends API {
   static updateQuery(
     updateQuery: UpdateActionRequest<QueryConfig>,
   ): AxiosPromise<ActionCreateUpdateResponse> {
-    return API.post(ActionAPI.url, updateQuery);
+    if (ActionAPI.queryUpdateCancelTokenSource) {
+      ActionAPI.queryUpdateCancelTokenSource.cancel();
+    }
+    ActionAPI.queryUpdateCancelTokenSource = axios.CancelToken.source();
+    return API.post(ActionAPI.url, updateQuery, undefined, {
+      cancelToken: ActionAPI.queryUpdateCancelTokenSource.token,
+    });
   }
 
   static executeAction(
diff --git a/app/client/src/api/Api.tsx b/app/client/src/api/Api.tsx
index ac312b5e1b..f99b672125 100644
--- a/app/client/src/api/Api.tsx
+++ b/app/client/src/api/Api.tsx
@@ -51,15 +51,18 @@ axiosInstance.interceptors.response.use(
     return response.data;
   },
   function(error: any) {
+    if (axios.isCancel(error)) {
+      return;
+    }
     if (error.code === "ECONNABORTED") {
-      if (error.config.url.match(currentUserRegex)) {
+      if (error.config && error.config.url.match(currentUserRegex)) {
         history.replace({ pathname: SERVER_ERROR_URL });
       }
       return Promise.reject({
         message: "Please check your internet connection",
       });
     }
-    if (error.config.url.match(executeActionRegex)) {
+    if (error.config && error.config.url.match(executeActionRegex)) {
       return makeExecuteActionResponse(error.response);
     }
     if (error.response) {
diff --git a/app/client/src/api/PageApi.tsx b/app/client/src/api/PageApi.tsx
index bb5fe88f7e..51f651b92e 100644
--- a/app/client/src/api/PageApi.tsx
+++ b/app/client/src/api/PageApi.tsx
@@ -2,7 +2,7 @@ import Api from "./Api";
 import { ContainerWidgetProps } from "widgets/ContainerWidget";
 import { ApiResponse } from "./ApiResponses";
 import { WidgetProps } from "widgets/BaseWidget";
-import { AxiosPromise } from "axios";
+import axios, { AxiosPromise, CancelTokenSource } from "axios";
 import { PageAction } from "constants/ActionConstants";
 
 export interface FetchPageRequest {
@@ -100,6 +100,7 @@ export interface UpdateWidgetNameResponse extends ApiResponse {
 class PageApi extends Api {
   static url = "v1/pages";
   static refactorLayoutURL = "v1/layouts/refactor";
+  static pageUpdateCancelTokenSource?: CancelTokenSource = undefined;
   static getLayoutUpdateURL = (pageId: string, layoutId: string) => {
     return `v1/layouts/${layoutId}/pages/${pageId}`;
   };
@@ -119,14 +120,20 @@ class PageApi extends Api {
 
   static savePage(
     savePageRequest: SavePageRequest,
-  ): AxiosPromise<SavePageResponse> {
+  ): AxiosPromise<SavePageResponse> | undefined {
+    if (PageApi.pageUpdateCancelTokenSource) {
+      PageApi.pageUpdateCancelTokenSource.cancel();
+    }
     const body = { dsl: savePageRequest.dsl };
+    PageApi.pageUpdateCancelTokenSource = axios.CancelToken.source();
     return Api.put(
       PageApi.getLayoutUpdateURL(
         savePageRequest.pageId,
         savePageRequest.layoutId,
       ),
       body,
+      undefined,
+      { cancelToken: PageApi.pageUpdateCancelTokenSource.token },
     );
   }
 
diff --git a/app/client/src/sagas/PageSagas.tsx b/app/client/src/sagas/PageSagas.tsx
index 5e0e6c1838..040654e222 100644
--- a/app/client/src/sagas/PageSagas.tsx
+++ b/app/client/src/sagas/PageSagas.tsx
@@ -326,6 +326,7 @@ function* savePageSaga() {
       type: ReduxActionErrorTypes.SAVE_PAGE_ERROR,
       payload: {
         error,
+        show: false,
       },
     });
   }