Modify AbortSignal to be used on REST endpoints only

UN-OCHA · Jan 21, 2025 · 38a92a5 · 38a92a5
1 parent d95b5e2
commit 38a92a5
Show file tree

Hide file tree

Showing 16 changed files with 103 additions and 87 deletions.
diff --git a/apps/hpc-ftsadmin/src/app/components/filters/filter-flows-table.tsx b/apps/hpc-ftsadmin/src/app/components/filters/filter-flows-table.tsx
@@ -25,7 +25,6 @@ import InfoAlert from '../info-alert';
 interface Props {
   query: FlowQuery;
   setQuery: SetQuery<FlowQuery>;
-  handleAbortController: () => void;
 }
 export interface FlowsFilterValues {
   flowID?: string[];
@@ -94,7 +93,7 @@ const StyledDiv = tw.div`
   gap-x-4
 `;
 export const FilterFlowsTable = (props: Props) => {
-  const { setQuery, query, handleAbortController } = props;
+  const { setQuery, query } = props;
 
   const { lang, env } = useContext(AppContext);
   const environment = env();
@@ -104,36 +103,27 @@ export const FilterFlowsTable = (props: Props) => {
     FLOWS_FILTER_INITIAL_VALUES
   );
   const handleSubmit = (values: FlowsFilterValues) => {
-    const encodedFilters = encodeFilters(values, FLOWS_FILTER_INITIAL_VALUES);
-
-    if (query.filters !== encodedFilters) {
-      handleAbortController();
-    }
     setQuery({
       ...query,
       page: 0,
-      filters: encodedFilters,
+      filters: encodeFilters(values, FLOWS_FILTER_INITIAL_VALUES),
     });
   };
   const handleResetForm = (
     formikResetForm: (
       nextState?: Partial<FormikState<FlowsFilterValues>>
     ) => void
   ) => {
-    const encodedFilters = encodeFilters({}, FLOWS_FILTER_INITIAL_VALUES);
     formikResetForm();
 
-    if (query.filters !== encodedFilters) {
-      handleAbortController();
-    }
     //  We need to delay this action in a synchronous way to avoid
     //  calling 2 setState() actions in an uncontrolled way that could
     //  mess with internal React's component update cycle
     setTimeout(() => {
       setQuery({
         ...query,
         page: 0,
-        filters: encodedFilters,
+        filters: encodeFilters({}, FLOWS_FILTER_INITIAL_VALUES),
       });
     });
   };

diff --git a/apps/hpc-ftsadmin/src/app/components/filters/filter-organization-table.tsx b/apps/hpc-ftsadmin/src/app/components/filters/filter-organization-table.tsx
@@ -20,6 +20,7 @@ interface Props {
   query: OrganizationQuery;
   setQuery: SetQuery<OrganizationQuery>;
   lang: LanguageKey;
+  handleAbortController: () => void;
 }
 export interface OrganizationFilterValues {
   organization?: string;
@@ -46,7 +47,7 @@ const StyledDiv = tw.div`
   gap-x-4
 `;
 export const FilterOrganizationsTable = (props: Props) => {
-  const { environment, setQuery, query, lang } = props;
+  const { environment, setQuery, query, lang, handleAbortController } = props;
   const filters = decodeFilters(
     query.filters,
     ORGANIZATIONS_FILTER_INITIAL_VALUES
@@ -57,26 +58,42 @@ export const FilterOrganizationsTable = (props: Props) => {
   });
 
   const handleSubmit = (values: OrganizationFilterValues) => {
+    const encodedFilters = encodeFilters(
+      values,
+      ORGANIZATIONS_FILTER_INITIAL_VALUES
+    );
+    if (query.filters !== encodedFilters) {
+      handleAbortController();
+    }
     setQuery({
       ...query,
       page: 0,
-      filters: encodeFilters(values, ORGANIZATIONS_FILTER_INITIAL_VALUES),
+      filters: encodedFilters,
     });
   };
   const handleResetForm = (
     formikResetForm: (
       nextState?: Partial<FormikState<OrganizationFilterValues>>
     ) => void
   ) => {
+    const encodedFilters = encodeFilters(
+      {},
+      ORGANIZATIONS_FILTER_INITIAL_VALUES
+    );
     formikResetForm();
+
+    if (query.filters !== encodedFilters) {
+      handleAbortController();
+    }
+
     //  We need to delay this action in a synchronous way to avoid
     //  calling 2 setState() actions in an uncontrolled way that could
     //  mess with internal React's component update cycle
     setTimeout(() => {
       setQuery({
         ...query,
         page: 0,
-        filters: encodeFilters({}, ORGANIZATIONS_FILTER_INITIAL_VALUES),
+        filters: encodedFilters,
       });
     });
   };

diff --git a/apps/hpc-ftsadmin/src/app/components/filters/filter-pending-flows-table.tsx b/apps/hpc-ftsadmin/src/app/components/filters/filter-pending-flows-table.tsx
@@ -16,7 +16,6 @@ import {
 interface Props {
   query: FlowQuery;
   setQuery: SetQuery<FlowQuery>;
-  handleAbortController: () => void;
 }
 export interface PendingFlowsFilterValues {
   status?: FormObjectValue | null;
@@ -49,45 +48,32 @@ const StyledDiv = tw.div`
   gap-x-4
 `;
 export const FilterPendingFlowsTable = (props: Props) => {
-  const { setQuery, query, handleAbortController } = props;
+  const { setQuery, query } = props;
   const { lang, env } = useContext(AppContext);
   const environment = env();
 
   const handleSubmit = (values: PendingFlowsFilterValues) => {
-    const encodedFilters = encodeFilters(
-      values,
-      PENDING_FLOWS_FILTER_INITIAL_VALUES
-    );
-    if (query.filters !== encodedFilters) {
-      handleAbortController();
-    }
     setQuery({
       ...query,
       page: 0,
-      filters: encodedFilters,
+      filters: encodeFilters(values, PENDING_FLOWS_FILTER_INITIAL_VALUES),
     });
   };
   const handleResetForm = (
     formikResetForm: (
       nextState?: Partial<FormikState<PendingFlowsFilterValues>>
     ) => void
   ) => {
-    const encodedFilters = encodeFilters(
-      {},
-      PENDING_FLOWS_FILTER_INITIAL_VALUES
-    );
     formikResetForm();
-    if (query.filters !== encodedFilters) {
-      handleAbortController();
-    }
+
     //  We need to delay this action in a synchronous way to avoid
     //  calling 2 setState() actions in an uncontrolled way that could
     //  mess with internal React's component update cycle
     setTimeout(() => {
       setQuery({
         ...query,
         page: 0,
-        filters: encodedFilters,
+        filters: encodeFilters({}, PENDING_FLOWS_FILTER_INITIAL_VALUES),
       });
     });
   };

diff --git a/apps/hpc-ftsadmin/src/app/components/tables/flows-table.tsx b/apps/hpc-ftsadmin/src/app/components/tables/flows-table.tsx
@@ -70,7 +70,6 @@ export interface FlowsTableProps {
   rowsPerPageOption: number[];
   query: FlowQuery;
   setQuery: SetQuery<FlowQuery>;
-  abortSignal?: AbortSignal;
   pending?: boolean;
 }
 
@@ -95,7 +94,6 @@ export default function FlowsTable(props: FlowsTableProps) {
       sortField: query.orderBy,
       sortOrder: query.orderDir,
       ...parsedFilters,
-      signal: props.abortSignal,
     })
   );
 

diff --git a/apps/hpc-ftsadmin/src/app/components/tables/keywords-table.tsx b/apps/hpc-ftsadmin/src/app/components/tables/keywords-table.tsx
@@ -53,6 +53,7 @@ export interface KeywordTableProps {
   headers: TableHeadersProps<KeywordHeaderID>[];
   query: KeywordQuery;
   setQuery: SetQuery<KeywordQuery>;
+  abortSignal: AbortSignal;
 }
 
 /**
@@ -246,7 +247,7 @@ export default function KeywordTable(props: KeywordTableProps) {
   const [openSettings, setOpenSettings] = useState(false);
   const [entityEdited, setEntityEdited] = useState(false);
   const state = dataLoader([entityEdited], () =>
-    env.model.categories.getKeywords()
+    env.model.categories.getKeywords(props.abortSignal)
   );
   const [errorUpdate, setErrorUpdate] = useState<{
     code: keyof Strings['components']['keywordTable']['errors'];

diff --git a/apps/hpc-ftsadmin/src/app/components/tables/organizations-table.tsx b/apps/hpc-ftsadmin/src/app/components/tables/organizations-table.tsx
@@ -63,6 +63,7 @@ export interface OrganizationTableProps {
   rowsPerPageOption: number[];
   query: OrganizationQuery;
   setQuery: SetQuery<OrganizationQuery>;
+  abortSignal: AbortSignal;
 }
 
 export default function OrganizationTable(props: OrganizationTableProps) {
@@ -88,6 +89,7 @@ export default function OrganizationTable(props: OrganizationTableProps) {
         offset: query.page * query.rowsPerPage,
         orderBy: query.orderBy,
         orderDir: query.orderDir,
+        signal: props.abortSignal,
         ...parseOrganizationFilters(parsedFilters).search,
       },
     })

diff --git a/apps/hpc-ftsadmin/src/app/pages/flows/flows-list.tsx b/apps/hpc-ftsadmin/src/app/pages/flows/flows-list.tsx
@@ -13,7 +13,6 @@ import FlowsTable, {
 import FilterFlowsTable, {
   FLOWS_FILTER_INITIAL_VALUES,
 } from '../../components/filters/filter-flows-table';
-import { useCallback, useEffect, useRef } from 'react';
 import useQueryParams from '../../utils/useQueryParams';
 import { FLOW_PARAMS_CODEC } from '../../utils/codecs';
 
@@ -31,18 +30,6 @@ const LandingContainer = tw.div`
 `;
 export default (props: Props) => {
   const rowsPerPageOptions = [10, 25, 50, 100];
-  const abortControllerRef = useRef<AbortController>(new AbortController());
-
-  const handleAbortController = useCallback(() => {
-    abortControllerRef.current.abort();
-    abortControllerRef.current = new AbortController();
-  }, []);
-
-  useEffect(() => {
-    return () => {
-      abortControllerRef.current.abort();
-    };
-  }, []);
 
   const [query, setQuery] = useQueryParams({
     codec: FLOW_PARAMS_CODEC,
@@ -62,7 +49,6 @@ export default (props: Props) => {
     initialValues: FLOWS_FILTER_INITIAL_VALUES,
     query,
     setQuery,
-    abortSignal: abortControllerRef.current.signal,
   };
 
   return (
@@ -73,11 +59,7 @@ export default (props: Props) => {
         >
           <PageMeta title={[t.t(lang, (s) => s.routes.flows.title)]} />
           <Container>
-            <FilterFlowsTable
-              setQuery={setQuery}
-              query={query}
-              handleAbortController={handleAbortController}
-            />
+            <FilterFlowsTable setQuery={setQuery} query={query} />
             <LandingContainer>
               <C.PageTitle>
                 {t.t(lang, (s) => s.routes.flows.title)}

diff --git a/apps/hpc-ftsadmin/src/app/pages/flows/pending-flows-list.tsx b/apps/hpc-ftsadmin/src/app/pages/flows/pending-flows-list.tsx
@@ -13,7 +13,6 @@ import {
 import FlowsTable, {
   FlowsTableProps,
 } from '../../components/tables/flows-table';
-import { useCallback, useEffect, useRef } from 'react';
 import useQueryParams from '../../utils/useQueryParams';
 import { FLOW_PARAMS_CODEC } from '../../utils/codecs';
 
@@ -28,8 +27,6 @@ const LandingContainer = tw.div`
 `;
 
 export default (props: Props) => {
-  const abortControllerRef = useRef<AbortController>(new AbortController());
-
   const [query, setQuery] = useQueryParams({
     codec: FLOW_PARAMS_CODEC,
     initialValues: {
@@ -42,25 +39,13 @@ export default (props: Props) => {
     },
   });
 
-  const handleAbortController = useCallback(() => {
-    abortControllerRef.current.abort();
-    abortControllerRef.current = new AbortController();
-  }, []);
-
-  useEffect(() => {
-    return () => {
-      abortControllerRef.current.abort();
-    };
-  }, []);
-
   const pendingFlowsTableProps: FlowsTableProps = {
     headers: DEFAULT_FLOW_TABLE_HEADERS,
     initialValues: PENDING_FLOWS_FILTER_INITIAL_VALUES,
     rowsPerPageOption: [10, 25, 50, 100],
     query,
     setQuery,
     pending: true,
-    abortSignal: abortControllerRef.current.signal,
   };
 
   return (
@@ -71,11 +56,7 @@ export default (props: Props) => {
         >
           <PageMeta title={[t.t(lang, (s) => s.routes.flows.title)]} />
           <Container>
-            <FilterPendingFlowsTable
-              setQuery={setQuery}
-              query={query}
-              handleAbortController={handleAbortController}
-            />
+            <FilterPendingFlowsTable setQuery={setQuery} query={query} />
             <LandingContainer>
               <C.PageTitle>
                 {t.t(lang, (s) => s.routes.pendingFlows.title)}

diff --git a/apps/hpc-ftsadmin/src/app/pages/keywords/keyword-list.tsx b/apps/hpc-ftsadmin/src/app/pages/keywords/keyword-list.tsx
@@ -12,6 +12,7 @@ import KeywordTable, {
 } from '../../components/tables/keywords-table';
 import useQueryParams from '../../utils/useQueryParams';
 import { KEYWORD_PARAMS_CODEC } from '../../utils/codecs';
+import { useCallback, useEffect, useState } from 'react';
 
 interface Props {
   className?: string;
@@ -33,10 +34,35 @@ export default (props: Props) => {
     },
   });
 
+  const [abortController, setAbortController] = useState<AbortController>(
+    new AbortController()
+  );
+  const handleAbortController = useCallback(() => {
+    // Abort the ongoing requests
+    abortController.abort();
+
+    // Create a new AbortController for the next requests
+    const newAbortController = new AbortController();
+    setAbortController(newAbortController);
+
+    // Perform actions with the updated filter values
+
+    // Pass the new AbortSignal to FlowsTableGraphQL
+    // This can be part of your state or directly passed as a prop
+  }, [abortController]);
+
+  useEffect(() => {
+    return () => {
+      handleAbortController();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const keywordTableProps: KeywordTableProps = {
     headers: DEFAULT_KEYWORD_TABLE_HEADERS,
     query,
     setQuery,
+    abortSignal: abortController.signal,
   };
 
   return (