fix: pagination in url (#110)

* fix(pagination): fix reset pagination behaviour on changing filters

* fix(router): fix back navigation by URL replace

Author: safeamiiir

aqueductcore/frontend/src/components/organisms/ExperimentsListTable/index.tsx

@@ -58,7 +58,7 @@ function ExperimentsListTable({
     const newQueryParameters: URLSearchParams = new URLSearchParams(searchParams);
     newQueryParameters.set('rowsPerPage', String(rowsPerPage))
     newQueryParameters.set('page', String(page))
-    setSearchParams(newQueryParameters)
+    setSearchParams(newQueryParameters, { replace: true })
   }, [page, rowsPerPage])
 
   function handleToggleFavorite(

aqueductcore/frontend/src/components/organisms/FilterExperiments/index.tsx

@@ -4,10 +4,10 @@ import { useEffect, useState } from "react";
 import dayjs, { Dayjs } from "dayjs";
 
 import { DateRangePicker } from "components/molecules/DateRangePicker";
-import { SearchBar } from "components/molecules/SearchBar";
-import { useGetAllTags } from "API/graphql/queries/getAllTags";
 import { ExperimentFiltersType, TagType } from "types/globalTypes";
+import { useGetAllTags } from "API/graphql/queries/getAllTags";
 import { FilterTags } from "components/molecules/FilterTags";
+import { SearchBar } from "components/molecules/SearchBar";
 
 const GridContainer = styled(Grid)(({ theme }) => ({
   [theme.breakpoints.down("lg")]: {
@@ -18,9 +18,10 @@ const GridContainer = styled(Grid)(({ theme }) => ({
 interface FilterExperimentsProps {
   filters?: ExperimentFiltersType;
   setFilters?: (filters: ExperimentFiltersType) => void;
+  handleResetPagination?: () => void;
 }
 
-function FilterExperiments({ filters, setFilters }: FilterExperimentsProps) {
+function FilterExperiments({ filters, setFilters, handleResetPagination }: FilterExperimentsProps) {
   const [searchParams, setSearchParams] = useSearchParams();
   const [selectedTags, setSelectedTags] = useState<TagType[]>(filters?.tags ?? []);
   const [searchString, setSearchString] = useState<string>(filters?.title ?? "");
@@ -46,49 +47,53 @@ function FilterExperiments({ filters, setFilters }: FilterExperimentsProps) {
   }, [selectedTags, searchString, startDate, endDate]);
 
   const handleTagUpdate = (value: TagType[]) => {
+    if (handleResetPagination) handleResetPagination()
     const newQueryParameters: URLSearchParams = new URLSearchParams(searchParams);
     if (value.length === 0) {
       newQueryParameters.delete('tags')
     } else {
       newQueryParameters.set('tags', JSON.stringify(value))
     }
-    setSearchParams(newQueryParameters)
+    setSearchParams(newQueryParameters, { replace: true })
     setSelectedTags(value);
   };
 
   const handleSearchStringUpdate = (value: string) => {
+    if (handleResetPagination) handleResetPagination()
     const newQueryParameters: URLSearchParams = new URLSearchParams(searchParams);
     if (!value) {
       newQueryParameters.delete('title')
     } else {
       newQueryParameters.set('title', value)
     }
-    setSearchParams(newQueryParameters)
+    setSearchParams(newQueryParameters, { replace: true })
     setSearchString(value);
   };
 
   const handleStartDateUpdate = (value: Dayjs | null) => {
+    if (handleResetPagination) handleResetPagination()
     if (value?.isValid() || value === null) {
       const newQueryParameters: URLSearchParams = new URLSearchParams(searchParams);
       if (!value) {
         newQueryParameters.delete('startDate')
       } else {
         newQueryParameters.set('startDate', (value?.toISOString()) ?? '')
       }
-      setSearchParams(newQueryParameters)
+      setSearchParams(newQueryParameters, { replace: true })
       setStartDate(value);
     }
   };
 
   const handleEndDateUpdate = (value: Dayjs | null) => {
+    if (handleResetPagination) handleResetPagination()
     if (value?.isValid() || value === null) {
       const newQueryParameters: URLSearchParams = new URLSearchParams(searchParams);
       if (!value) {
         newQueryParameters.delete('endDate')
       } else {
         newQueryParameters.set('endDate', (value?.toISOString()) ?? '')
       }
-      setSearchParams(newQueryParameters)
+      setSearchParams(newQueryParameters, { replace: true })
       setEndDate(value);
     }
   };

aqueductcore/frontend/src/pages/ExperimentRecordsPage/index.tsx

@@ -168,15 +168,6 @@ function ExperimentRecordsPage({ category }: { category?: ExperimentRecordsPageT
     }
   }, [category]);
 
-  // Reset Pagination when filter is changed
-  useDidUpdateEffect(() => {
-    const newQueryParameters: URLSearchParams = new URLSearchParams(searchParams);
-    newQueryParameters.set('rowsPerPage', String(rowsPerPage))
-    newQueryParameters.set('page', String(page))
-    setSearchParams(newQueryParameters)
-    handleResetPagination()
-  }, [filters])
-
   const handlePageName = (pageUrl: string) => {
     switch (pageUrl) {
       case "/aqd/experiments":
@@ -191,15 +182,20 @@ function ExperimentRecordsPage({ category }: { category?: ExperimentRecordsPageT
   };
 
   const handleResetPagination = () => {
+    const newQueryParameters: URLSearchParams = new URLSearchParams(searchParams);
+    newQueryParameters.set('rowsPerPage', String(rowsPerPage))
+    newQueryParameters.set('page', String(page))
+    setSearchParams(newQueryParameters, { replace: true })
     setRowsPerPage(experimentRecordsRowsPerPageOptions[0]);
     setPage(0);
   };
+
   if (error) return <Error message={error.message} />;
   return (
     <Container>
       <Title>{handlePageName(location.pathname)}</Title>
       {/* //Guides would be added here */}
-      <FilterExperiments filters={filters} setFilters={setFilters} />
+      <FilterExperiments filters={filters} setFilters={setFilters} handleResetPagination={handleResetPagination} />
       <Box sx={{ mt: 2 }}>
         {processedExperimentData && pageInfo.count && !loading ? (
           <ExperimentsListTable