Feat: ORV2-1946 Remove Extra Call to Applications API (#1274)

bcgov · Mar 22, 2024 · 80e384d · 80e384d
1 parent 12e1d71
commit 80e384d
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 43 deletions.
diff --git a/frontend/src/common/components/dashboard/components/tab/types/TabComponentProps.ts b/frontend/src/common/components/dashboard/components/tab/types/TabComponentProps.ts
@@ -1,5 +1,7 @@
+import { Nullable } from "../../../../../types/common";
+
 export interface TabComponentProps {
   label: string;
-  count?: number;
+  count?: Nullable<number>;
   component: JSX.Element;
 }
diff --git a/frontend/src/features/permits/apiManager/permitsAPI.ts b/frontend/src/features/permits/apiManager/permitsAPI.ts
@@ -120,7 +120,7 @@ export const getApplicationsInProgress = async ({
   if (searchString) {
     applicationsURL.searchParams.set("searchString", searchString);
   }
-  if (orderBy.length > 0) {
+  if (orderBy?.length > 0) {
     applicationsURL.searchParams.set("orderBy", stringifyOrderBy(orderBy));
   }
 

diff --git a/frontend/src/features/permits/components/dashboard/PermitLists.tsx b/frontend/src/features/permits/components/dashboard/PermitLists.tsx
@@ -1,20 +1,24 @@
-import React from "react";
+import React, { useState } from "react";
 
 import { TabLayout } from "../../../../common/components/dashboard/TabLayout";
 import { StartApplicationAction } from "../../pages/Application/components/dashboard/StartApplicationAction";
 import { ActivePermitList } from "../permit-list/ActivePermitList";
 import { ExpiredPermitList } from "../permit-list/ExpiredPermitList";
 import { ApplicationsInProgressList } from "../permit-list/ApplicationsInProgressList";
-import { useApplicationsInProgressQuery } from "../../hooks/hooks";
+import { Nullable } from "../../../../common/types/common";
 
 export const PermitLists = React.memo(() => {
-  const query = useApplicationsInProgressQuery({});
 
+  const [applicationsInProgressCount, setApplicationsInProgressCount] = useState<Nullable<number>>();
+  const handleApplicationsCountChange = (count: number) => {
+      setApplicationsInProgressCount(count);
+  };
+
   const tabs = [
     {
       label: "Applications in Progress",
-      count: query?.applicationsInProgressQuery?.data?.items?.length,
-      component: <ApplicationsInProgressList />,
+      count: applicationsInProgressCount,
+      component: <ApplicationsInProgressList onCountChange={handleApplicationsCountChange} />,
     },
     {
       label: "Active Permits",

diff --git a/frontend/src/features/permits/components/permit-list/ApplicationsInProgressList.tsx b/frontend/src/features/permits/components/permit-list/ApplicationsInProgressList.tsx
@@ -1,6 +1,5 @@
 import { Delete } from "@mui/icons-material";
 import { Box, IconButton, Tooltip } from "@mui/material";
-import { useQuery, keepPreviousData } from "@tanstack/react-query";
 import { useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { RowSelectionState } from "@tanstack/table-core";
 import {
@@ -22,12 +21,11 @@ import { Trash } from "../../../../common/components/table/options/Trash";
 import { NoRecordsFound } from "../../../../common/components/table/NoRecordsFound";
 import { canUserAccessApplication } from "../../helpers/mappers";
 import OnRouteBCContext from "../../../../common/authentication/OnRouteBCContext";
-import { getDefaultNullableVal } from "../../../../common/helpers/util";
+import { getDefaultNullableVal, getDefaultRequiredVal } from "../../../../common/helpers/util";
 import { UserAuthGroupType } from "../../../../common/authentication/types";
 import { Nullable } from "../../../../common/types/common";
 import {
   deleteApplications,
-  getApplicationsInProgress,
 } from "../../apiManager/permitsAPI";
 
 import {
@@ -36,6 +34,7 @@ import {
   defaultTableStateOptions,
 } from "../../../../common/helpers/tableHelper";
 import { PermitApplicationOrigin } from "../../types/PermitApplicationOrigin";
+import { useApplicationsInProgressQuery } from "../../hooks/hooks";
 
 /**
  * Dynamically set the column
@@ -50,7 +49,8 @@ const getColumns = (
 /**
  * A wrapper with the query to load the table with expired permits.
  */
-export const ApplicationsInProgressList = () => {
+export const ApplicationsInProgressList = ({ onCountChange }: 
+  { onCountChange: (count: number) => void; }) => {
   const [pagination, setPagination] = useState<MRT_PaginationState>({
     pageIndex: 0,
     pageSize: 10,
@@ -62,34 +62,28 @@ export const ApplicationsInProgressList = () => {
     },
   ]);
 
-  const applicationsQuery = useQuery({
-    queryKey: [
-      "applicationsInProgress",
-      pagination.pageIndex,
-      pagination.pageSize,
-      sorting,
-    ],
-    queryFn: () =>
-      getApplicationsInProgress({
-        page: pagination.pageIndex,
-        take: pagination.pageSize,
-        orderBy:
-          sorting.length > 0
-            ? [
-                {
-                  column: sorting.at(0)?.id as string,
-                  descending: Boolean(sorting.at(0)?.desc),
-                },
-              ]
-            : [],
-      }),
-    placeholderData: keepPreviousData,
-    refetchOnWindowFocus: false,
-    retry: 1,
+  const applicationsQuery = useApplicationsInProgressQuery({
+    page: pagination.pageIndex,
+    take: pagination.pageSize,
+    sorting: sorting.length > 0
+    ? [
+        {
+          column: sorting.at(0)?.id as string,
+          descending: Boolean(sorting.at(0)?.desc),
+        },
+      ]
+    : [],
   });
 
   const { data, isError, isPending, isFetching } = applicationsQuery;
 
+  useEffect(() => {
+
+    const totalCount = getDefaultRequiredVal(0, data?.meta?.totalItems);
+    onCountChange(totalCount);
+
+  }, [data?.meta?.totalItems])
+
   const { idirUserDetails, userDetails } = useContext(OnRouteBCContext);
   const userAuthGroup = getDefaultNullableVal(
     idirUserDetails?.userAuthGroup,

diff --git a/frontend/src/features/permits/hooks/hooks.ts b/frontend/src/features/permits/hooks/hooks.ts
@@ -1,12 +1,12 @@
 import { useState, useEffect } from "react";
 import { AxiosError } from "axios";
-import { useQueryClient, useMutation, useQuery } from "@tanstack/react-query";
+import { useQueryClient, useMutation, useQuery, keepPreviousData } from "@tanstack/react-query";
 
 import { Application, ApplicationFormData } from "../types/application";
 import { IssuePermitsResponse } from "../types/permit";
 import { StartTransactionResponseData } from "../types/payment";
 import { APPLICATION_STEPS, ApplicationStep } from "../../../routes/constants";
-import { Nullable, Optional } from "../../../common/types/common";
+import { Nullable, Optional, SortingConfig } from "../../../common/types/common";
 import { isPermitTypeValid } from "../types/PermitType";
 import { isPermitIdNumeric } from "../helpers/permitState";
 import { deserializeApplicationResponse } from "../helpers/deserializeApplication";
@@ -383,15 +383,19 @@ export const useApplicationsInProgressQuery = ({
   take = 10,
   searchString = "",
   sorting = [],
+}: {
+  page: number;
+  take: number;
+  searchString?: string;
+  sorting: SortingConfig[];
 }) => {
-  const applicationsInProgressQuery = useQuery({
-    queryKey: ["applicationInProgress"],
+  return useQuery({
+    queryKey: ["applicationsInProgress", page, take, sorting],
     queryFn: () =>
       getApplicationsInProgress({ page, take, searchString, orderBy: sorting }),
     refetchOnWindowFocus: false, // prevent unnecessary multiple queries on page showing up in foreground
+    refetchOnMount: "always",
+    placeholderData: keepPreviousData,
   });
-
-  return {
-    applicationsInProgressQuery,
-  };
 };
+