Merge pull request #991 from vinaayakh-aot/feature/mui-pagination-fix

Feature/mui pagination fix

Author: arun-s-aot

forms-flow-submissions/src/Routes/SubmissionListing.tsx

@@ -1,6 +1,6 @@
-import React, { useCallback, useMemo, useEffect, useState } from "react";
+import * as React from "react";
+import { useCallback, useMemo, useEffect, useState } from "react";
 import { useDispatch, useSelector, batch } from "react-redux";
-import { useQuery } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
 import { push } from "connected-react-router";
 
@@ -91,10 +91,10 @@ const AnalyzeSubmissionList: React.FC = () => {
   const columnWidths = useSelector((state: any) => state?.analyzeSubmission?.columnWidths ?? {});
   //local state
   const [isManageFieldsModalOpen, setIsManageFieldsModalOpen] = useState(false);
-   const handleManageFieldsOpen = () => setIsManageFieldsModalOpen(true);
-  const handleManageFieldsClose = () => setIsManageFieldsModalOpen(false);
+   const handleManageFieldsOpen = useCallback(() => setIsManageFieldsModalOpen(true), []);
+  const handleManageFieldsClose = useCallback(() => setIsManageFieldsModalOpen(false), []);
   const [dropdownSelection, setDropdownSelection] = useState<string | null>(null);
-  const [form, setForm] = React.useState([]);
+  const [form, setForm] = useState([]);
   const [savedFormVariables, setSavedFormVariables] = useState({});
   const [filtersApplied, setFiltersApplied] = useState(false);
   const [lastFetchedFormId, setLastFetchedFormId] = useState<string | null>(null);
@@ -104,6 +104,11 @@ const AnalyzeSubmissionList: React.FC = () => {
   const [selectedSearchFieldKey, setSelectedSearchFieldKey] = useState<string>("id");
   const [searchFieldFilterTerm, setSearchFieldFilterTerm] = useState<string>("");
   const [searchText, setSearchText] = useState<string>("");
+  const [submissionsData, setSubmissionsData] = useState<{ submissions: Submission[]; totalCount: number }>({
+    submissions: [],
+    totalCount: 0,
+  });
+  const [isSubmissionsLoading, setIsSubmissionsLoading] = useState(false);
 
   // Default submission fields constant
   const DEFAULT_SUBMISSION_FIELDS = [
@@ -134,11 +139,11 @@ const AnalyzeSubmissionList: React.FC = () => {
   }, [dropdownSelection]);
 
 
-const handleClearSearch = () => {
+const handleClearSearch = useCallback(() => {
   setFieldFilters({});
   // Clear the search field values globally
   dispatch(clearSearchFieldValues());
-};
+}, [dispatch]);
 
 
 
@@ -188,14 +193,17 @@ useEffect (() => {
 
 
 
-const handleFieldSearch = (filters: Record<string, string>) => {
+const handleFieldSearch = useCallback((filters: Record<string, string>) => {
   setFieldFilters(filters);
   dispatch(setAnalyzeSubmissionPage(1));
   setFiltersApplied(true);
   dispatch(setSearchFieldValues(filters));
-};
+}, [dispatch]);
 // Use the current submissionFields state for calculation
-const currentFields = selectedSubmissionFilter?.variables ?? submissionFields;
+const currentFields = useMemo(() => 
+  selectedSubmissionFilter?.variables ?? submissionFields,
+  [selectedSubmissionFilter?.variables, submissionFields]
+);
 
 const initialInputFields = useMemo(() => {
   //these pinned fileds should always come  first in sidebar
@@ -274,6 +282,7 @@ useEffect(() => {
     .catch((error) => {
       console.error("Error fetching submission list:", error);
     });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
 }, []);
 
   // Column width helper function
@@ -341,61 +350,64 @@ const columnVisibilityModel = useMemo(() => {
 
   // Memoize sortModel to prevent unnecessary re-renders and ensure it updates correctly
   const sortModel = useMemo(() => {
-    if (activeSortKey) {
-      return [
-        {
-          field: activeSortKey,
-          sort: activeSortOrder,
-        },
-      ];
-    }
-    return [];
+    return activeSortKey
+      ? [{ field: activeSortKey, sort: activeSortOrder }]
+      : [];
   }, [activeSortKey, activeSortOrder]);
 
   // Fetch Submissions
-const systemFields = ["id", "form_name", "created_by", "created", "application_status"];
+const systemFields = useMemo(() => ["id", "form_name", "created_by", "created", "application_status"], []);
 
 
 const selectedFormFields = useMemo(() => {
   return (selectedSubmissionFilter?.variables ?? [])
     .map((v) => v.key)
     .filter((key) => !systemFields.includes(key));
-}, [selectedSubmissionFilter]);
-
-
-
-//data for searching data in filter table
-const {
-  data,
-  isLoading: isSubmissionsLoading,
-  isFetching,
-  refetch,
-} = useQuery({
-  queryKey: [
-    "submissions",
-    page,
-    limit,
-    activeSortKey,
-    activeSortOrder,
-    dateRange,
-    dropdownSelection,
-    filtersApplied ? fieldFilters : {},
-    selectedFormFields
-  ],
-  queryFn: () =>
-    getSubmissionList(
+}, [selectedSubmissionFilter, systemFields]);
+
+const appliedFieldFilters = useMemo(
+  () => (filtersApplied ? fieldFilters : {}),
+  [filtersApplied, fieldFilters]
+);
+
+
+const fetchSubmissions = useCallback(async () => {
+  setIsSubmissionsLoading(true);
+  try {
+    const response = await getSubmissionList(
       limit,
       page,
       activeSortOrder,
       activeSortKey,
       dateRange,
       dropdownSelection,
-      filtersApplied ? fieldFilters : {},
+      appliedFieldFilters,
       selectedFormFields
-    ),
-  staleTime: 0,
-  cacheTime:0
-});
+    );
+    setSubmissionsData({
+      submissions: response?.submissions ?? [],
+      totalCount: response?.totalCount ?? 0,
+    });
+  } catch (error) {
+    console.error("Error fetching submissions:", error);
+    setSubmissionsData({
+      submissions: [],
+      totalCount: 0,
+    });
+  } finally {
+    setIsSubmissionsLoading(false);
+  }
+}, [
+  limit,
+  page,
+  activeSortOrder,
+  activeSortKey,
+  dateRange?.startDate,
+  dateRange?.endDate,
+  dropdownSelection,
+  appliedFieldFilters,
+  selectedFormFields,
+]);
 
 
   useEffect(()=>{
@@ -431,29 +443,43 @@ const {
       setIsFormFetched(false);
     });
   }, [dropdownSelection, lastFetchedFormId,formData]);
+  useEffect(() => {
+    fetchSubmissions();
+  }, [fetchSubmissions]);
+
   // taking data from submission response for mapping to the table
-  const submissions: Submission[] = data?.submissions ?? [];
-  const totalCount: number = data?.totalCount ?? 0;
+  const submissions: Submission[] = submissionsData.submissions;
+  const totalCount: number = submissionsData.totalCount;
 
   // Pagination Model for ReusableTable
-  const paginationModel = useMemo(
-    () => ({ page: page - 1, pageSize: limit }),
-    [page, limit]
-  );
+  const paginationModel = useMemo(() => {
+    return { page: page - 1, pageSize: limit };
+  }, [page, limit]);
 
-  // Handle Pagination Model Change for ReusableTable
-  const handlePaginationModelChange = useCallback(({ page, pageSize }: any) => {
-    batch(() => {
-      dispatch(setAnalyzeSubmissionPage(page + 1));
-      dispatch(setAnalyzeSubmissionLimit(pageSize));
-    });
-  }, [dispatch]);
+  // Handle Pagination Model Change for ReusableTable  
+  const handlePaginationModelChange = useCallback(({ page: dataGridPage, pageSize }: any) => {
+    const requestedPage = (dataGridPage ?? 0) + 1;
+    const expectedDataGridPage = page - 1;
 
-  const handlerefresh = () => {
-    refetch();
-  };
+    if (dataGridPage === expectedDataGridPage && pageSize === limit) {
+      return;
+    }
 
- const handleDateRangeChange = (newDateRange) => {
+    if (limit !== pageSize) {
+      batch(() => {
+        dispatch(setAnalyzeSubmissionLimit(pageSize));
+        dispatch(setAnalyzeSubmissionPage(1));
+      });
+    } else if (page !== requestedPage) {
+      dispatch(setAnalyzeSubmissionPage(requestedPage));
+    }
+  }, [dispatch, limit, page]);
+
+  const handlerefresh = useCallback(() => {
+    fetchSubmissions();
+  }, [fetchSubmissions]);
+
+ const handleDateRangeChange = useCallback((newDateRange) => {
   const { startDate, endDate } = newDateRange;
 
   // Update state if:
@@ -464,9 +490,11 @@ const {
 
   if (!(bothSelected || bothCleared)) return;
 
-  dispatch(setAnalyzeSubmissionDateRange(newDateRange));
-  dispatch(setAnalyzeSubmissionPage(1));
- };
+  batch(() => {
+    dispatch(setAnalyzeSubmissionDateRange(newDateRange));
+    dispatch(setAnalyzeSubmissionPage(1));
+  });
+ }, [dispatch]);
 
  // Reset to default: set form to "All Forms" and clear date range
  const handleResetToDefault = useCallback(() => {
@@ -587,27 +615,24 @@ const {
         form_name: { sortOrder: "asc" },
         activeKey: "form_name",
       };
-      dispatch(setAnalyzeSubmissionSort(updatedSort));
+      // Reset page to 1 when sort is reset
+      batch(() => {
+        dispatch(setAnalyzeSubmissionSort(updatedSort));
+        dispatch(setAnalyzeSubmissionPage(1));
+      });
       return;
     }
 
     const field = model[0].field;
-    // Always use DataGrid's sort order directly - DataGrid handles toggling automatically
-    // DataGrid sends "asc" for first click, "desc" for second click on the same column
     const dataGridSort = model[0]?.sort || "asc";
-    
-    // Reset all sort keys to "asc" and set only the active field to DataGrid's sort order
-    // This ensures only one sort is active at a time, and all others are reset to "asc"
     const resetSortOrders = HelperServices.getResetSortOrders(optionSortBy.options);
 
     const updatedSort = {
-      ...resetSortOrders, // All keys reset to {sortOrder: "asc"}
-      [field]: { sortOrder: dataGridSort }, // Active field uses DataGrid's sort order
+      ...resetSortOrders,
+      [field]: { sortOrder: dataGridSort },
       activeKey: field,
     };
 
-    // Dispatch the update - this will trigger a re-render and the sortModel will update
-    // Since sortModel is memoized based on activeSortKey and activeSortOrder, it will update immediately
     dispatch(setAnalyzeSubmissionSort(updatedSort));
   }, [dispatch, optionSortBy]);
 
@@ -825,7 +850,6 @@ const {
   ]);
   return (
    <>
-   <div className="analyze-submissions-page">
       <div className="Toastify"></div>
       <div className="toast-section">{}</div>
       <div className="header-section-1">
@@ -932,7 +956,7 @@ const {
               columns={muiColumns}
               rows={memoizedRows}
               rowCount={totalCount}
-              loading={isSubmissionsLoading || isFetching}
+             loading={isSubmissionsLoading}
               disableColumnResize={false}
               paginationMode="server"
               sortingMode="server"
@@ -957,7 +981,6 @@ const {
             />
         </div>
        </div>
-       </div>
       {isManageFieldsModalOpen && <ManageFieldsSortModal
         show={isManageFieldsModalOpen}
         onClose={handleManageFieldsClose}