Add AbortController

elastic · Aug 30, 2020 · 90bc2fc · 90bc2fc
1 parent 81eacdd
commit 90bc2fc
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 8 deletions.
diff --git a/...lugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/api.ts b/...lugins/triggers_actions_ui/public/application/components/builtin_action_types/jira/api.ts
@@ -9,44 +9,53 @@ import { BASE_ACTION_API_PATH } from '../../../constants';
 
 export async function getCreateIssueMetadata({
   http,
+  signal,
   connectorId,
 }: {
   http: HttpSetup;
+  signal: AbortSignal;
   connectorId: string;
 }): Promise<Record<string, any>> {
   return await http.post(`${BASE_ACTION_API_PATH}/action/${connectorId}/_execute`, {
     body: JSON.stringify({
       params: { subAction: 'getCreateIssueMetadata', subActionParams: {} },
     }),
+    signal,
   });
 }
 
 export async function getIssueTypes({
   http,
+  signal,
   connectorId,
 }: {
   http: HttpSetup;
+  signal: AbortSignal;
   connectorId: string;
 }): Promise<Record<string, any>> {
   return await http.post(`${BASE_ACTION_API_PATH}/action/${connectorId}/_execute`, {
     body: JSON.stringify({
       params: { subAction: 'getIssueTypes', subActionParams: {} },
     }),
+    signal,
   });
 }
 
 export async function getFieldsByIssueType({
   http,
+  signal,
   connectorId,
   id,
 }: {
   http: HttpSetup;
+  signal: AbortSignal;
   connectorId: string;
   id: string;
 }): Promise<Record<string, any>> {
   return await http.post(`${BASE_ACTION_API_PATH}/action/${connectorId}/_execute`, {
     body: JSON.stringify({
       params: { subAction: 'getFieldsByIssueType', subActionParams: { id } },
     }),
+    signal,
   });
 }
diff --git a/.../public/application/components/builtin_action_types/jira/use_get_fields_by_issue_type.tsx b/.../public/application/components/builtin_action_types/jira/use_get_fields_by_issue_type.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { HttpSetup } from 'kibana/public';
 import { ActionConnector } from '../../../../types';
 import { getFieldsByIssueType } from './api';
@@ -34,33 +34,38 @@ export const useGetFieldsByIssueType = ({
 }: Props): UseCreateIssueMetadata => {
   const [isLoading, setIsLoading] = useState(true);
   const [fields, setFields] = useState<Fields>({});
+  const abortCtrl = useRef(new AbortController());
 
   useEffect(() => {
-    let cancel = false;
+    let didCancel = false;
     const fetchData = async () => {
       if (!issueType) {
         setIsLoading(false);
         return;
       }
 
+      abortCtrl.current = new AbortController();
       setIsLoading(true);
       const res = await getFieldsByIssueType({
         http,
+        signal: abortCtrl.current.signal,
         connectorId: actionConnector.id,
         id: issueType,
       });
 
-      if (!cancel) {
+      if (!didCancel) {
         setIsLoading(false);
         setFields(res.data);
       }
     };
 
+    abortCtrl.current.abort();
     fetchData();
 
     return () => {
-      cancel = true;
+      didCancel = true;
       setIsLoading(false);
+      abortCtrl.current.abort();
     };
   }, [http, actionConnector, issueType]);
 

diff --git a/...ctions_ui/public/application/components/builtin_action_types/jira/use_get_issue_types.tsx b/...ctions_ui/public/application/components/builtin_action_types/jira/use_get_issue_types.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { HttpSetup } from 'kibana/public';
 import { ActionConnector } from '../../../../types';
 import { getIssueTypes } from './api';
@@ -24,25 +24,33 @@ export interface UseCreateIssueMetadata {
 export const useGetIssueTypes = ({ http, actionConnector }: Props): UseCreateIssueMetadata => {
   const [isLoading, setIsLoading] = useState(true);
   const [issueTypes, setIssueTypes] = useState<IssueTypes>([]);
+  const abortCtrl = useRef(new AbortController());
 
   useEffect(() => {
-    let cancel = false;
+    let didCancel = false;
     const fetchData = async () => {
+      abortCtrl.current = new AbortController();
       setIsLoading(true);
+
       const res = await getIssueTypes({
         http,
+        signal: abortCtrl.current.signal,
         connectorId: actionConnector.id,
       });
 
-      if (!cancel) {
+      if (!didCancel) {
         setIsLoading(false);
         setIssueTypes(res.data);
       }
     };
+
+    abortCtrl.current.abort();
     fetchData();
+
     return () => {
-      cancel = true;
+      didCancel = true;
       setIsLoading(false);
+      abortCtrl.current.abort();
     };
   }, [http, actionConnector]);