Modify AbortSignal to be used on REST endpoints only

UN-OCHA · Sep 11, 2024 · 5153f03 · 5153f03
1 parent ab2795b
commit 5153f03
Show file tree

Hide file tree

Showing 16 changed files with 100 additions and 112 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: Query;
   setQuery: (newQuery: Query) => void;
-  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,32 +103,22 @@ 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();
-    }
     setQuery({
       ...query,
       page: 0,
-      filters: encodedFilters,
+      filters: encodeFilters({}, FLOWS_FILTER_INITIAL_VALUES),
     });
   };
   return (

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: Query;
   setQuery: (newQuery: Query) => void;
   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,22 +58,36 @@ 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();
+    }
     setQuery({
       ...query,
       page: 0,
-      filters: encodeFilters({}, ORGANIZATIONS_FILTER_INITIAL_VALUES),
+      filters: encodedFilters,
     });
   };
   return (

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: Query;
   setQuery: (newQuery: Query) => void;
-  handleAbortController: () => void;
 }
 export interface PendingFlowsFilterValues {
   status?: FormObjectValue | null;
@@ -49,41 +48,27 @@ 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();
-    }
     setQuery({
       ...query,
       page: 0,
-      filters: encodedFilters,
+      filters: encodeFilters({}, PENDING_FLOWS_FILTER_INITIAL_VALUES),
     });
   };
   return (

diff --git a/apps/hpc-ftsadmin/src/app/components/tables/flows-table.tsx b/apps/hpc-ftsadmin/src/app/components/tables/flows-table.tsx
@@ -69,7 +69,6 @@ export interface FlowsTableProps {
   rowsPerPageOption: number[];
   query: Query;
   setQuery: (newQuery: Query) => void;
-  abortSignal?: AbortSignal;
   pending?: boolean;
 }
 
@@ -93,7 +92,6 @@ export default function FlowsTable(props: FlowsTableProps) {
       sortField: query.orderBy,
       sortOrder: query.orderDir,
       ...parsedFilters,
-      signal: props.abortSignal,
       prevPageCursor: query.prevPageCursor,
       nextPageCursor: query.nextPageCursor,
     })

diff --git a/apps/hpc-ftsadmin/src/app/components/tables/keywords-table.tsx b/apps/hpc-ftsadmin/src/app/components/tables/keywords-table.tsx
@@ -56,6 +56,7 @@ export interface KeywordTableProps {
   headers: TableHeadersProps<KeywordHeaderID>[];
   query: KeywordQuery;
   setQuery: (newQuery: KeywordQuery) => void;
+  abortSignal: AbortSignal;
 }
 
 /**
@@ -249,7 +250,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
@@ -62,6 +62,7 @@ export interface OrganizationTableProps {
   rowsPerPageOption: number[];
   query: Query;
   setQuery: (newQuery: Query) => void;
+  abortSignal: AbortSignal;
 }
 
 export default function OrganizationTable(props: OrganizationTableProps) {
@@ -87,6 +88,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
@@ -23,7 +23,6 @@ import FlowsTable, {
 import FilterFlowsTable, {
   FLOWS_FILTER_INITIAL_VALUES,
 } from '../../components/filters/filter-flows-table';
-import { useCallback, useEffect, useState } from 'react';
 
 interface Props {
   className?: string;
@@ -39,30 +38,6 @@ const LandingContainer = tw.div`
 `;
 export default (props: Props) => {
   const rowsPerPageOptions = [10, 25, 50, 100];
-  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 [query, setQuery] = useQueryParams({
     page: withDefault(NumberParam, 0),
@@ -106,7 +81,6 @@ export default (props: Props) => {
     initialValues: FLOWS_FILTER_INITIAL_VALUES,
     query: query,
     setQuery: setQuery,
-    abortSignal: abortController.signal,
   };
 
   return (
@@ -117,11 +91,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
@@ -22,7 +22,6 @@ import {
 import FlowsTable, {
   FlowsTableProps,
 } from '../../components/tables/flows-table';
-import { useCallback, useEffect, useState } from 'react';
 
 interface Props {
   className?: string;
@@ -35,10 +34,6 @@ const LandingContainer = tw.div`
 `;
 
 export default (props: Props) => {
-  const [abortController, setAbortController] = useState<AbortController>(
-    new AbortController()
-  );
-
   const [query, setQuery] = useQueryParams({
     page: withDefault(NumberParam, 0),
     rowsPerPage: withDefault(
@@ -72,35 +67,13 @@ export default (props: Props) => {
     nextPageCursor: withDefault(NumberParam, 0),
   });
 
-  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 pendingFlowsTableProps: FlowsTableProps = {
     headers: DEFAULT_FLOW_TABLE_HEADERS,
     initialValues: PENDING_FLOWS_FILTER_INITIAL_VALUES,
     rowsPerPageOption: [10, 25, 50, 100],
     query: query,
     setQuery: setQuery,
     pending: true,
-    abortSignal: abortController.signal,
   };
 
   return (
@@ -111,11 +84,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
@@ -16,6 +16,7 @@ import {
 import KeywordTable, {
   KeywordTableProps,
 } from '../../components/tables/keywords-table';
+import { useCallback, useEffect, useState } from 'react';
 
 interface Props {
   className?: string;
@@ -46,10 +47,35 @@ export default (props: Props) => {
     tableHeaders: withDefault(StringParam, encodeTableHeaders([], 'keywords')),
   });
 
+  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 (