Adjust api call to handle optional cancelToken

packages/circus-web-ui/src/pages/Preferences.tsx

@@ -232,19 +232,27 @@ const Preferences: React.FC<{}> = props => {
   const showMessage = useShowMessage();
   const [preferences, updatePreferences] = useUserPreferences();
   const [settings, setSettings] = useState<UserPreferences | null>(preferences);
-  const loadSettings = useCallback(async () => {
-    const settings = await api('preferences');
-    setSettings(settings);
-  }, [api]);
+  const loadSettings = useCallback(
+    async (isMounted: boolean) => {
+      const settings = await api('preferences');
+      if (!isMounted) return;
+      setSettings(settings);
+    },
+    [api]
+  );
 
   useEffect(() => {
-    loadSettings();
+    let isMounted = true;
+    loadSettings(isMounted);
+    return () => {
+      isMounted = false;
+    };
   }, [loadSettings]);
 
   const saveClick = async () => {
     await updatePreferences(settings!);
     showMessage('Your preference was saved.', 'success', { short: true });
-    loadSettings();
+    loadSettings(true);
   };
 
   if (settings === null) return <div />;
@@ -294,7 +302,7 @@ const Preferences: React.FC<{}> = props => {
         <Button bsStyle="primary" onClick={saveClick}>
           Save
         </Button>
-        <Button bsStyle="link" onClick={loadSettings}>
+        <Button bsStyle="link" onClick={() => loadSettings(true)}>
           Reset
         </Button>
       </p>

packages/circus-web-ui/src/pages/admin/GroupAdmin.tsx

@@ -70,6 +70,7 @@ const GroupAdmin: React.FC<any> = props => {
   const api = useApi();
 
   useEffect(() => {
+    let isMounted = true;
     const didMount = async () => {
       const domains = await api('admin/server-params/domains');
       const privList = await api('admin/global-privileges');
@@ -97,7 +98,7 @@ const GroupAdmin: React.FC<any> = props => {
       const pluginSelect: React.FC<any> = props => (
         <PluginSelectorMultiple plugins={pluginOptions} {...props} />
       );
-
+      if (!isMounted) return;
       setEditorProperties([
         [
           { key: 'groupName', caption: 'Group Name', editor: et.text() }, // 0
@@ -179,6 +180,10 @@ const GroupAdmin: React.FC<any> = props => {
       ]);
     };
     didMount();
+
+    return () => {
+      isMounted = false;
+    };
   }, [api]);
 
   if (!editorProperties) return <LoadingIndicator />;

packages/circus-web-ui/src/pages/admin/PluginJobManagerAdmin.tsx

@@ -10,15 +10,23 @@ const PluginJobManagerAdmin: React.FC<{}> = props => {
   const [status, setStatus] = useState<any>(null);
   const api = useApi();
 
-  const refresh = useCallback(async () => {
-    setBusy(true);
-    const result = await api('admin/plugin-job-manager');
-    setBusy(false);
-    setStatus(result.status);
-  }, [api]);
+  const refresh = useCallback(
+    async (isMounted: boolean) => {
+      setBusy(true);
+      const result = await api('admin/plugin-job-manager');
+      if (!isMounted) return;
+      setBusy(false);
+      setStatus(result.status);
+    },
+    [api]
+  );
 
   useEffect(() => {
-    refresh();
+    let isMounted = true;
+    refresh(isMounted);
+    return () => {
+      isMounted = false;
+    };
   }, [refresh]);
 
   const postSwitch = async (mode: string) => {
@@ -28,7 +36,7 @@ const PluginJobManagerAdmin: React.FC<{}> = props => {
         method: 'put',
         data: { status: mode }
       });
-      await refresh();
+      await refresh(true);
     } catch (e) {
       setBusy(false);
     }
@@ -66,7 +74,7 @@ const PluginJobManagerAdmin: React.FC<{}> = props => {
             icon="refresh"
             bsSize="large"
             bsStyle="link"
-            onClick={refresh}
+            onClick={() => refresh(true)}
           >
             Refresh Status
           </IconButton>

packages/circus-web-ui/src/pages/admin/UserAdmin.tsx

@@ -67,6 +67,7 @@ const UserAdmin: React.FC<any> = props => {
   const api = useApi();
 
   useEffect(() => {
+    let isMounted = true;
     const load = async () => {
       const groups = (await api('admin/groups?unlimited=1')).items as {
         groupId: string;
@@ -75,6 +76,7 @@ const UserAdmin: React.FC<any> = props => {
       }[];
       const groupIdMap: any = {};
       groups.forEach(g => (groupIdMap[g.groupId] = g.groupName));
+      if (!isMounted) return;
       setEditorProperties([
         { caption: 'User Email', key: 'userEmail', editor: et.text() },
         { caption: 'Login Name', key: 'loginId', editor: et.text() },
@@ -124,6 +126,9 @@ const UserAdmin: React.FC<any> = props => {
       ]);
     };
     load();
+    return () => {
+      isMounted = false;
+    };
   }, [api]);
 
   if (!editorProperties || !listColumns) return <LoadingIndicator />;

packages/circus-web-ui/src/pages/case-detail/CaseDetail.tsx

@@ -93,11 +93,13 @@ const CaseDetail: React.FC<{}> = () => {
   }, [isUpdated]);
 
   useEffect(() => {
+    let isMounted = true;
     if (!caseId) {
       throw new Error('caseId is missing.');
     }
     const loadCase = async () => {
       const caseData = await api('cases/' + caseId);
+      if (!isMounted) return;
       setTags(caseData.tags ?? []);
       const project = accessibleProjects.find(
         (p: { projectId: string }) => p.projectId === caseData.projectId
@@ -139,6 +141,9 @@ const CaseDetail: React.FC<{}> = () => {
       );
     };
     loadCase();
+    return () => {
+      isMounted = false;
+    };
   }, [accessibleProjects, api, caseId]); // should not re-render after mount
 
   const [f, forceLoadRevision] = useReducer(x => x + 1, 0);

packages/circus-web-ui/src/pages/plugin-job-detail/PluginJobDetail.tsx

@@ -22,6 +22,7 @@ import { Link, useParams } from 'react-router-dom';
 import { newSearch } from 'store/searches';
 import styled from 'styled-components';
 import { useApi } from 'utils/api';
+import { CancelToken } from 'utils/cancelToken';
 import useLoadData from 'utils/useLoadData';
 import useLoginUser from 'utils/useLoginUser';
 import useQuery from 'utils/useQuery';
@@ -169,65 +170,72 @@ const PluginJobDetail: React.FC<{}> = props => {
   );
   const dispatchForJobSearch = useDispatch();
 
-  const loadJob = useCallback(async () => {
-    setBusy(true);
-    try {
-      const job = (await api(`plugin-jobs/${jobId}`)) as Job;
-      const pluginData = (await api(`plugins/${job.pluginId}`)) as Plugin;
-      const seriesData: { [seriesUid: string]: any } = {};
-      const viewPersonalInfoFlag = memoizedAccessiblePlugins
-        .filter(p => p.roles.includes('viewPersonalInfo'))
-        .some(p => p.pluginId === job.pluginId);
-      for (const s of job.series) {
-        const seriesUid = s.seriesUid;
-        if (seriesUid in seriesData) continue;
-        seriesData[seriesUid] = await api(`series/${seriesUid}`);
-        if (!viewPersonalInfoFlag) {
-          delete seriesData[seriesUid].patientInfo;
+  const loadJob = useCallback(
+    async (token: CancelToken) => {
+      setBusy(true);
+      try {
+        const job = (await api(`plugin-jobs/${jobId}`, {}, token)) as Job;
+        const pluginData = (await api(
+          `plugins/${job.pluginId}`,
+          {},
+          token
+        )) as Plugin;
+        const seriesData: { [seriesUid: string]: any } = {};
+        const viewPersonalInfoFlag = memoizedAccessiblePlugins
+          .filter(p => p.roles.includes('viewPersonalInfo'))
+          .some(p => p.pluginId === job.pluginId);
+        for (const s of job.series) {
+          const seriesUid = s.seriesUid;
+          if (seriesUid in seriesData) continue;
+          seriesData[seriesUid] = await api(`series/${seriesUid}`, {}, token);
+          if (!viewPersonalInfoFlag) {
+            delete seriesData[seriesUid].patientInfo;
+          }
         }
-      }
-      dispatch(
-        actions.reset({
-          feedbacks: job.feedbacks,
-          myUserEmail: user.userEmail,
-          preferMode: ['consensual', 'personal'].includes(initialMode)
-            ? (initialMode as 'personal' | 'consensual')
-            : null
-        })
-      );
-
-      if (
-        job.series[0].seriesUid &&
-        seriesData[job.series[0].seriesUid].patientInfo
-      ) {
-        const filter = {
-          'patientInfo.patientId':
-            seriesData[job.series[0].seriesUid].patientInfo.patientId
-        };
-
-        dispatchForJobSearch(
-          newSearch(api, 'relevantJobs', {
-            resource: { endPoint: 'plugin-jobs', primaryKey: 'jobId' },
-            filter,
-            condition: {},
-            sort: '{"createdAt":-1}'
+        dispatch(
+          actions.reset({
+            feedbacks: job.feedbacks,
+            myUserEmail: user.userEmail,
+            preferMode: ['consensual', 'personal'].includes(initialMode)
+              ? (initialMode as 'personal' | 'consensual')
+              : null
           })
         );
-      }
 
-      return { job, pluginData, seriesData };
-    } finally {
-      setBusy(false);
-    }
-  }, [
-    api,
-    initialMode,
-    dispatch,
-    jobId,
-    user.userEmail,
-    memoizedAccessiblePlugins,
-    dispatchForJobSearch
-  ]);
+        if (
+          job.series[0].seriesUid &&
+          seriesData[job.series[0].seriesUid].patientInfo
+        ) {
+          const filter = {
+            'patientInfo.patientId':
+              seriesData[job.series[0].seriesUid].patientInfo.patientId
+          };
+
+          dispatchForJobSearch(
+            newSearch(api, 'relevantJobs', {
+              resource: { endPoint: 'plugin-jobs', primaryKey: 'jobId' },
+              filter,
+              condition: {},
+              sort: '{"createdAt":-1}'
+            })
+          );
+        }
+
+        return { job, pluginData, seriesData };
+      } finally {
+        if (!token.cancelled) setBusy(false);
+      }
+    },
+    [
+      api,
+      initialMode,
+      dispatch,
+      jobId,
+      user.userEmail,
+      memoizedAccessiblePlugins,
+      dispatchForJobSearch
+    ]
+  );
 
   const [jobData, , reloadJob] = useLoadData(loadJob);