handle axios cancel request

Author: talhainvenxion

src/api/fetchApi/index.ts

@@ -1,6 +1,6 @@
 import axios from 'axios';
 import { httpMethods } from '../constants';
-export const source = axios.CancelToken.source();
+export let source: any = { cancel: [] };
 
 export const DEFAULT_HEADERS = {
   Accept: 'application/json',
@@ -42,11 +42,16 @@ export const fetchApiWithAuthRequest = ({
   authenticationToken: string;
   headers?: any;
 }): Promise<any> => {
+  const CancelToken = axios.CancelToken;
+
   return axios({
     method: method || httpMethods.get,
     url,
     data,
-    cancelToken: source.token,
+    cancelToken: new CancelToken(function executor(c) {
+      // An executor function receives a cancel function as a parameter
+      source.cancel.push(c);
+    }),
     headers: {
       ...DEFAULT_HEADERS,
       ...headers,

src/redux/sagas/requestSaga.ts

@@ -95,11 +95,11 @@ export function* handleRequestSaga(action: any) {
   } catch (e) {
     if (isUnauthenticatedError(e, action)) {
       yield* handleUnauthenticated(action);
-    } else if (e.response.status === httpStatus.unprocessablEntity) {
+    } else if (e?.response?.status === httpStatus.unprocessablEntity) {
       yield* unprocessablEntity();
     } else {
       let errorText = 'Something went wrong!';
-      if (e.message.indexOf('Network Error') === -1) {
+      if (e?.message?.indexOf('Network Error') === -1) {
         // this means its not a generic message from the server
         errorText = e.response ? e.response.data.detail : '';
       }

src/ui/layouts/pipelines/Pipelines/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { translate } from './translate';
 import { List } from './List';
 import { AllRuns } from './AllRuns';
@@ -10,6 +10,7 @@ import FilterComponent, {
   getInitialFilterStateForPipeline,
   getInitialFilterStateForRuns,
 } from '../../../components/Filters';
+import { source } from '../../../../api/fetchApi';
 
 const FilterWrapper = () => {
   // TODO: Dev please note: getInitialFilterState is for stack inital filter value for any other component you need to modify it
@@ -71,8 +72,9 @@ const PAGES = [
 ];
 
 export const Pipelines: React.FC = () => {
-  const { setFetching } = useService();
-  console.log(setFetching);
+  const { setFetchingForAllRuns } = useService();
+
+  console.log(setFetchingForAllRuns);
   const locationPath = useLocationPath();
 
   return (

src/ui/layouts/pipelines/Pipelines/useService.ts

@@ -1,43 +1,53 @@
 /* eslint-disable */
 
+import axios from 'axios';
 import { useEffect } from 'react';
+import { source } from '../../../../api/fetchApi';
+// import { cancel } from '../../../../api/fetchApi';
+
 import {
   pipelinePagesActions,
   runsActions,
   pipelinesActions,
+  runPagesActions,
 } from '../../../../redux/actions';
 
 import { useDispatch } from '../../../hooks';
 
 interface ServiceInterface {
-  setFetching: (arg: boolean) => void;
+  setFetchingForPipeline: (arg: boolean) => void;
+  setFetchingForAllRuns: (arg: boolean) => void;
 }
 
 export const useService = (): ServiceInterface => {
   const dispatch = useDispatch();
 
   useEffect(() => {
-    setFetching(true);
-
+    setFetchingForPipeline(true);
+    setFetchingForAllRuns(true);
     dispatch(
       runsActions.allRuns({
-        onSuccess: () => setFetching(false),
-        onFailure: () => setFetching(false),
+        onSuccess: () => setFetchingForAllRuns(false),
+        onFailure: () => setFetchingForAllRuns(false),
       }),
     );
     dispatch(
       pipelinesActions.getMy({
-        onSuccess: () => setFetching(false),
-        onFailure: () => setFetching(false),
+        onSuccess: () => setFetchingForPipeline(false),
+        onFailure: () => setFetchingForPipeline(false),
       }),
     );
   }, []);
 
-  const setFetching = (fetching: boolean) => {
+  const setFetchingForPipeline = (fetching: boolean) => {
     dispatch(pipelinePagesActions.setFetching({ fetching }));
   };
+  const setFetchingForAllRuns = (fetching: boolean) => {
+    dispatch(runPagesActions.setFetching({ fetching }));
+  };
 
   return {
-    setFetching,
+    setFetchingForPipeline,
+    setFetchingForAllRuns,
   };
 };

src/ui/layouts/pipelines/RunsTable/useService.ts

@@ -8,6 +8,7 @@ import { pipelinePagesActions } from '../../../../redux/actions';
 import { useDispatch, useSelector } from '../../../hooks';
 import { runSelectors } from '../../../../redux/selectors';
 import { getFilteredDataForTable } from '../../../../utils/tableFilters';
+import { source } from '../../../../api/fetchApi';
 
 interface ServiceInterface {
   sortedRuns: TRun[];
@@ -67,6 +68,14 @@ export const useService = ({
     setSortedRuns(orderedRuns);
   }, [filter, runIds]);
 
+  useEffect(() => {
+    return () => {
+      source.cancel.forEach((element: any) => {
+        element();
+      });
+    };
+  }, []);
+
   const setSelectedRunIds = (runIds: TId[]) => {
     dispatch(pipelinePagesActions.setSelectedRunIds({ runIds }));
   };

src/ui/layouts/runs/RunsTable/useService.ts

@@ -7,6 +7,7 @@ import { Sorting, SortingDirection } from './types';
 import { stackPagesActions } from '../../../../redux/actions';
 import { useDispatch, useSelector } from '../../../hooks';
 import { runSelectors } from '../../../../redux/selectors';
+import { source } from '../../../../api/fetchApi';
 
 interface ServiceInterface {
   sortedRuns: TRun[];
@@ -40,6 +41,13 @@ export const useService = ({ runIds }: { runIds: TId[] }): ServiceInterface => {
 
     setSortedRuns(orderedRuns as TRun[]);
   }, []);
+  useEffect(() => {
+    return () => {
+      source.cancel.forEach((element: any) => {
+        element();
+      });
+    };
+  }, []);
 
   const setSelectedRunIds = (runIds: TId[]) => {
     dispatch(stackPagesActions.setSelectedRunIds({ runIds }));

src/ui/layouts/stackComponents/RunsTable/useService.ts

@@ -8,6 +8,7 @@ import { stackPagesActions } from '../../../../redux/actions';
 import { useDispatch, useSelector } from '../../../hooks';
 import { runSelectors } from '../../../../redux/selectors';
 import { getFilteredDataForTable } from '../../../../utils/tableFilters';
+import { source } from '../../../../api/fetchApi';
 
 interface ServiceInterface {
   sortedRuns: TRun[];
@@ -60,6 +61,13 @@ export const useService = ({
     }
     setSortedRuns(orderedRuns as TRun[]);
   }, [filter]);
+  useEffect(() => {
+    return () => {
+      source.cancel.forEach((element: any) => {
+        element();
+      });
+    };
+  }, []);
 
   const setSelectedRunIds = (runIds: TId[]) => {
     dispatch(stackPagesActions.setSelectedRunIds({ runIds }));

src/ui/layouts/stacks/RunsTable/useService.ts

@@ -8,6 +8,7 @@ import { stackPagesActions } from '../../../../redux/actions';
 import { useDispatch, useSelector } from '../../../hooks';
 import { runSelectors } from '../../../../redux/selectors';
 import { getFilteredDataForTable } from '../../../../utils/tableFilters';
+import { source } from '../../../../api/fetchApi';
 
 interface ServiceInterface {
   sortedRuns: TRun[];
@@ -60,7 +61,13 @@ export const useService = ({
     }
     setSortedRuns(orderedRuns as TRun[]);
   }, [filter, runIds]);
-
+  useEffect(() => {
+    return () => {
+      source.cancel.forEach((element: any) => {
+        element();
+      });
+    };
+  }, []);
   const setSelectedRunIds = (runIds: TId[]) => {
     dispatch(stackPagesActions.setSelectedRunIds({ runIds }));
   };