Replace redux in page deployment-traces (#5955)

- remove modules/deploymentTrace
- add query for get deployment traces infinitite

Signed-off-by: kypham <[email protected]>

Author: hongky-1994

web/src/components/deployment-trace-page/index.tsx

@@ -6,7 +6,7 @@ import {
   Toolbar,
   Typography,
 } from "@mui/material";
-import { FC, useCallback, useEffect, useRef, useState } from "react";
+import { FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import CloseIcon from "@mui/icons-material/Close";
 import FilterIcon from "@mui/icons-material/FilterList";
 import RefreshIcon from "@mui/icons-material/Refresh";
@@ -25,48 +25,60 @@ import {
   stringifySearchParams,
   useSearchParams,
 } from "~/utils/search-params";
-import { useAppDispatch, useAppSelector } from "~/hooks/redux";
-import {
-  fetchDeploymentTraces,
-  fetchMoreDeploymentTraces,
-} from "~/modules/deploymentTrace";
 import useGroupedDeploymentTrace from "./useGroupedDeploymentTrace";
 import DeploymentTraceItem from "./deployment-trace-item";
 import { useInView } from "react-intersection-observer";
+import { useGetDeploymentTracesInfinite } from "~/queries/deployment-traces/use-deployment-traces-infinite";
 
 const DeploymentTracePage: FC = () => {
   const [openFilter, setOpenFilter] = useState(true);
-  const dispatch = useAppDispatch();
-  const status = useAppSelector((state) => state.deploymentTrace.status);
-  const hasMore = useAppSelector((state) => state.deploymentTrace.hasMore);
   const navigate = useNavigate();
   const filterValues = useSearchParams();
-  const { dates, deploymentTracesMap } = useGroupedDeploymentTrace();
-  const isLoading = status === "loading";
 
   const listRef = useRef(null);
   const [ref, inView] = useInView({
     rootMargin: "400px",
     root: listRef.current,
   });
 
-  useEffect(() => {
-    dispatch(fetchDeploymentTraces(filterValues));
-  }, [dispatch, filterValues]);
+  const {
+    data: deploymentTracesData,
+    isFetching,
+    fetchNextPage: fetchMoreDeploymentTraces,
+    refetch: refetchDeploymentTraces,
+    isSuccess,
+  } = useGetDeploymentTracesInfinite(filterValues);
+
+  const deploymentTracesList = useMemo(() => {
+    return deploymentTracesData?.pages.flatMap((item) => item.tracesList) || [];
+  }, [deploymentTracesData]);
+
+  const hasMore = useMemo(() => {
+    if (!deploymentTracesData || deploymentTracesData.pages.length === 0) {
+      return false;
+    }
+    const lastIndex = deploymentTracesData?.pages.length - 1;
+    return deploymentTracesData?.pages?.[lastIndex]?.hasMore || false;
+  }, [deploymentTracesData]);
+
+  const { dates, deploymentTracesMap } = useGroupedDeploymentTrace(
+    deploymentTracesList || []
+  );
 
   useEffect(() => {
-    if (inView && hasMore && isLoading === false) {
-      dispatch(fetchMoreDeploymentTraces(filterValues || {}));
+    if (inView && hasMore && isFetching === false) {
+      fetchMoreDeploymentTraces;
     }
-  }, [dispatch, inView, hasMore, isLoading, filterValues]);
+  }, [fetchMoreDeploymentTraces, hasMore, inView, isFetching]);
 
   const handleRefreshClick = (): void => {
-    dispatch(fetchDeploymentTraces(filterValues));
+    refetchDeploymentTraces();
   };
 
   const handleMoreClick = useCallback(() => {
-    dispatch(fetchMoreDeploymentTraces(filterValues || {}));
-  }, [dispatch, filterValues]);
+    // dispatch(fetchMoreDeploymentTraces(filterValues || {}));
+    fetchMoreDeploymentTraces();
+  }, [fetchMoreDeploymentTraces]);
 
   const handleFilterChange = (options: { commitHash?: string }): void => {
     navigate(
@@ -101,10 +113,10 @@ const DeploymentTracePage: FC = () => {
           color="primary"
           startIcon={<RefreshIcon />}
           onClick={handleRefreshClick}
-          disabled={isLoading}
+          disabled={isFetching}
         >
           {UI_TEXT_REFRESH}
-          {isLoading && <SpinnerIcon />}
+          {isFetching && <SpinnerIcon />}
         </Button>
         <Button
           color="primary"
@@ -134,7 +146,7 @@ const DeploymentTracePage: FC = () => {
           }}
           ref={listRef}
         >
-          {dates.length === 0 && isLoading && (
+          {dates.length === 0 && isFetching && (
             <Box
               sx={{
                 display: "flex",
@@ -145,7 +157,7 @@ const DeploymentTracePage: FC = () => {
               <CircularProgress />
             </Box>
           )}
-          {dates.length === 0 && !isLoading && (
+          {dates.length === 0 && !isFetching && (
             <Box
               sx={{
                 display: "flex",
@@ -181,18 +193,18 @@ const DeploymentTracePage: FC = () => {
               </Box>
             </Box>
           ))}
-          {status === "succeeded" && <div ref={ref} />}
+          {isSuccess && <div ref={ref} />}
           {!hasMore && (
             <Button
               color="primary"
               variant="outlined"
               size="large"
               fullWidth
               onClick={handleMoreClick}
-              disabled={isLoading}
+              disabled={isFetching}
             >
               {UI_TEXT_MORE}
-              {isLoading && <SpinnerIcon />}
+              {isFetching && <SpinnerIcon />}
             </Button>
           )}
         </Box>

web/src/components/deployment-trace-page/useGroupedDeploymentTrace.tsx

@@ -1,31 +1,23 @@
 import dayjs from "dayjs";
 import { useMemo } from "react";
-import { useShallowEqualSelector } from "~/hooks/redux";
-import { selectIds, selectById } from "~/modules/deploymentTrace";
 import { sortDateFunc } from "~/utils/common";
 import { ListDeploymentTracesResponse } from "~~/api_client/service_pb";
 
+type DeploymentTracesMapByDate = Record<
+  string,
+  ListDeploymentTracesResponse.DeploymentTraceRes.AsObject[]
+>;
+
 type GroupedDeploymentTrace = {
   dates: string[];
-  deploymentTracesMap: Record<
-    string,
-    ListDeploymentTracesResponse.DeploymentTraceRes.AsObject[]
-  >;
+  deploymentTracesMap: DeploymentTracesMapByDate;
 };
 
-const useGroupedDeploymentTrace = (): GroupedDeploymentTrace => {
-  const traceList = useShallowEqualSelector((state) => {
-    const list = selectIds(state.deploymentTrace)
-      .map((id) => selectById(state.deploymentTrace, id))
-      .filter((trace) => trace !== undefined);
-    return list;
-  }) as ListDeploymentTracesResponse.DeploymentTraceRes.AsObject[];
-
+const useGroupedDeploymentTrace = (
+  traceList: ListDeploymentTracesResponse.DeploymentTraceRes.AsObject[]
+): GroupedDeploymentTrace => {
   const deploymentTracesMap = useMemo(() => {
-    const listMap: Record<
-      string,
-      ListDeploymentTracesResponse.DeploymentTraceRes.AsObject[]
-    > = {};
+    const listMap: DeploymentTracesMapByDate = {};
 
     traceList.forEach((item) => {
       if (!item.trace?.commitTimestamp) return;