Merge pull request #481 from UN-OCHA/HPC-9975

HPC-9975 Remove `use-query-params`

apps/hpc-ftsadmin/src/app/components/filters/filter-flows-table.tsx

@@ -9,7 +9,7 @@ import { t } from '../../../i18n';
 import { LocalStorageSchema } from '../../utils/local-storage-type';
 import { util } from '@unocha/hpc-core';
 import { Alert } from '@mui/material';
-import { Query } from '../tables/table-utils';
+import type { FlowQuery, SetQuery } from '../tables/table-utils';
 import { AppContext } from '../../context';
 import { util as codecs, FormObjectValue } from '@unocha/hpc-data';
 import validateForm from '../../utils/form-validation';
@@ -25,8 +25,8 @@ import {
 } from '../../utils/fn-promises';
 
 interface Props {
-  query: Query;
-  setQuery: (newQuery: Query) => void;
+  query: FlowQuery;
+  setQuery: SetQuery<FlowQuery>;
   handleAbortController: () => void;
 }
 export interface FlowsFilterValues {
@@ -136,10 +136,15 @@ export const FilterFlowsTable = (props: Props) => {
     if (query.filters !== encodedFilters) {
       handleAbortController();
     }
-    setQuery({
-      ...query,
-      page: 0,
-      filters: encodedFilters,
+    //  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,
+      });
     });
   };
   return (

apps/hpc-ftsadmin/src/app/components/filters/filter-organization-table.tsx

@@ -7,7 +7,7 @@ import { Environment } from '../../../environments/interface';
 import { decodeFilters, encodeFilters } from '../../utils/parse-filters';
 import { LanguageKey, t } from '../../../i18n';
 import { Dayjs } from 'dayjs';
-import { Query } from '../tables/table-utils';
+import type { OrganizationQuery, SetQuery } from '../tables/table-utils';
 import * as io from 'io-ts';
 import validateForm from '../../utils/form-validation';
 import {
@@ -17,8 +17,8 @@ import {
 } from '../../utils/fn-promises';
 interface Props {
   environment: Environment;
-  query: Query;
-  setQuery: (newQuery: Query) => void;
+  query: OrganizationQuery;
+  setQuery: SetQuery<OrganizationQuery>;
   lang: LanguageKey;
 }
 export interface OrganizationFilterValues {
@@ -69,10 +69,15 @@ export const FilterOrganizationsTable = (props: Props) => {
     ) => void
   ) => {
     formikResetForm();
-    setQuery({
-      ...query,
-      page: 0,
-      filters: encodeFilters({}, ORGANIZATIONS_FILTER_INITIAL_VALUES),
+    //  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),
+      });
     });
   };
   return (

apps/hpc-ftsadmin/src/app/components/filters/filter-pending-flows-table.tsx

@@ -5,7 +5,7 @@ import { C } from '@unocha/hpc-ui';
 import { FormObjectValue } from '@unocha/hpc-data';
 import { decodeFilters, encodeFilters } from '../../utils/parse-filters';
 import { t } from '../../../i18n';
-import { Query } from '../tables/table-utils';
+import type { FlowQuery, SetQuery } from '../tables/table-utils';
 import { useContext } from 'react';
 import { AppContext } from '../../context';
 import {
@@ -14,8 +14,8 @@ import {
   fnUsageYears,
 } from '../../utils/fn-promises';
 interface Props {
-  query: Query;
-  setQuery: (newQuery: Query) => void;
+  query: FlowQuery;
+  setQuery: SetQuery<FlowQuery>;
   handleAbortController: () => void;
 }
 export interface PendingFlowsFilterValues {
@@ -80,10 +80,15 @@ export const FilterPendingFlowsTable = (props: Props) => {
     if (query.filters !== encodedFilters) {
       handleAbortController();
     }
-    setQuery({
-      ...query,
-      page: 0,
-      filters: encodedFilters,
+    //  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,
+      });
     });
   };
   return (

apps/hpc-ftsadmin/src/app/components/tables/flows-table.tsx

@@ -45,7 +45,8 @@ import { downloadExcel } from '../../utils/download-excel';
 import DownloadIcon from '@mui/icons-material/Download';
 import {
   ChipDiv,
-  Query,
+  type FlowQuery,
+  type SetQuery,
   RejectPendingFlowsButton,
   RenderChipsRow,
   StyledLoader,
@@ -64,8 +65,8 @@ export interface FlowsTableProps {
   headers: TableHeadersProps<FlowHeaderID>[];
   initialValues: FlowsFilterValues | PendingFlowsFilterValues;
   rowsPerPageOption: number[];
-  query: Query;
-  setQuery: (newQuery: Query) => void;
+  query: FlowQuery;
+  setQuery: SetQuery<FlowQuery>;
   abortSignal?: AbortSignal;
   pending?: boolean;
 }
@@ -81,17 +82,17 @@ export default function FlowsTable(props: FlowsTableProps) {
   const [tableInfoDisplay, setTableInfoDisplay] = useState(
     util.getLocalStorageItem<LocalStorageSchema>('tableSettings', true)
   );
+
   const parsedFilters = parseFlowFilters(tableFilters, props.pending);
   const navigate = useNavigate();
   const [state, load] = useDataLoader([query], () =>
     env.model.flows.searchFlows({
       limit: query.rowsPerPage,
+      page: query.page,
       sortField: query.orderBy,
       sortOrder: query.orderDir,
       ...parsedFilters,
       signal: props.abortSignal,
-      prevPageCursor: query.prevPageCursor,
-      nextPageCursor: query.nextPageCursor,
     })
   );
   const handleChipDelete = <T extends FilterKeys>(fieldName: T) => {
@@ -105,26 +106,11 @@ export default function FlowsTable(props: FlowsTableProps) {
     }
   };
 
-  const handleChangePage = (
-    newPage: number,
-    prevPageCursor: number,
-    nextPageCursor: number
-  ) => {
-    if (newPage > props.query.page) {
-      setQuery({
-        ...query,
-        prevPageCursor: undefined,
-        nextPageCursor: nextPageCursor,
-        page: newPage,
-      });
-    } else {
-      setQuery({
-        ...query,
-        prevPageCursor: prevPageCursor,
-        nextPageCursor: undefined,
-        page: newPage,
-      });
-    }
+  const handleChangePage = (newPage: number) => {
+    setQuery({
+      ...query,
+      page: newPage,
+    });
   };
 
   const handleChangeRowsPerPage = (
@@ -858,13 +844,7 @@ export default function FlowsTable(props: FlowsTableProps) {
                       count={data.searchFlows.total}
                       rowsPerPage={query.rowsPerPage}
                       page={query.page}
-                      onPageChange={(_, newPage) =>
-                        handleChangePage(
-                          newPage,
-                          data.searchFlows.prevPageCursor,
-                          data.searchFlows.nextPageCursor
-                        )
-                      }
+                      onPageChange={(_, newPage) => handleChangePage(newPage)}
                       onRowsPerPageChange={handleChangeRowsPerPage}
                     />
                   </TopRowContainer>
@@ -895,13 +875,7 @@ export default function FlowsTable(props: FlowsTableProps) {
                   count={data.searchFlows.total}
                   rowsPerPage={query.rowsPerPage}
                   page={query.page}
-                  onPageChange={(_, newPage) =>
-                    handleChangePage(
-                      newPage,
-                      data.searchFlows.prevPageCursor,
-                      data.searchFlows.nextPageCursor
-                    )
-                  }
+                  onPageChange={(_, newPage) => handleChangePage(newPage)}
                   onRowsPerPageChange={handleChangeRowsPerPage}
                 />
               </>

apps/hpc-ftsadmin/src/app/components/tables/keywords-table.tsx

@@ -37,7 +37,8 @@ import {
 
 import {
   ChipDiv,
-  Query,
+  type KeywordQuery,
+  type SetQuery,
   StyledLoader,
   TableHeaderButton,
   TopRowContainer,
@@ -51,15 +52,10 @@ import { LocalStorageSchema } from '../../utils/local-storage-type';
 import { Strings } from '../../../i18n/iface';
 import { parseError } from '../../utils/map-functions';
 
-export type KeywordQuery = {
-  orderBy: string;
-  orderDir: string;
-  tableHeaders: string;
-};
 export interface KeywordTableProps {
   headers: TableHeadersProps<KeywordHeaderID>[];
   query: KeywordQuery;
-  setQuery: (newQuery: KeywordQuery) => void;
+  setQuery: SetQuery<KeywordQuery>;
 }
 
 /**
@@ -507,7 +503,7 @@ export default function KeywordTable(props: KeywordTableProps) {
                           query.tableHeaders,
                           lang,
                           'keywords',
-                          query as Query,
+                          query,
                           setQuery
                         )}
                         onClick={(element) => {
@@ -517,7 +513,7 @@ export default function KeywordTable(props: KeywordTableProps) {
                               tableHeaders: encodeTableHeaders(
                                 element,
                                 'keywords',
-                                query as Query,
+                                query,
                                 setQuery
                               ),
                             });

apps/hpc-ftsadmin/src/app/components/tables/organizations-table.tsx

@@ -41,7 +41,8 @@ import { parseUpdatedCreatedBy } from '../../utils/map-functions';
 import { OrganizationFilterValues } from '../filters/filter-organization-table';
 import {
   ChipDiv,
-  Query,
+  type OrganizationQuery,
+  type SetQuery,
   RenderChipsRow,
   StyledLoader,
   TableHeaderButton,
@@ -59,8 +60,8 @@ export interface OrganizationTableProps {
   headers: TableHeadersProps<OrganizationHeaderID>[];
   initialValues: OrganizationFilterValues;
   rowsPerPageOption: number[];
-  query: Query;
-  setQuery: (newQuery: Query) => void;
+  query: OrganizationQuery;
+  setQuery: SetQuery<OrganizationQuery>;
 }
 
 export default function OrganizationTable(props: OrganizationTableProps) {

apps/hpc-ftsadmin/src/app/components/tables/table-utils.tsx

@@ -7,18 +7,37 @@ import CancelRoundedIcon from '@mui/icons-material/CancelRounded';
 import { C } from '@unocha/hpc-ui';
 import { util } from '@unocha/hpc-core';
 import { LocalStorageSchema } from '../../utils/local-storage-type';
+import type {
+  FlowHeaderID,
+  KeywordHeaderID,
+  OrganizationHeaderID,
+} from '../../utils/table-headers';
 
 export type Query = {
+  orderDir: 'ASC' | 'DESC';
+  tableHeaders: string;
+};
+
+export type FlowQuery = Query & {
   page: number;
   rowsPerPage: number;
-  orderBy: string;
-  orderDir: string;
+  orderBy: FlowHeaderID;
+  filters: string;
+};
+
+export type OrganizationQuery = Query & {
+  page: number;
+  rowsPerPage: number;
+  orderBy: OrganizationHeaderID;
   filters: string;
-  tableHeaders: string;
-  prevPageCursor?: number;
-  nextPageCursor?: number;
 };
 
+export type KeywordQuery = Query & {
+  orderBy: KeywordHeaderID;
+};
+
+export type SetQuery<T extends Query> = (newQuery: T) => void;
+
 export const StyledLoader = tw(C.Loader)`
   mx-auto
 `;