correct pagination on filtering

ispras · Sep 20, 2024 · 29dbe1b · 29dbe1b
1 parent 8127b2f
commit 29dbe1b
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 10 deletions.
diff --git a/src/components/PerspectiveView/index.js b/src/components/PerspectiveView/index.js
@@ -366,7 +366,8 @@ class P extends React.Component {
       isAscending,
       sortingField,
       limit,
-      offset
+      offset,
+      changePage
     } = this.props;
 
     const query_args = {
@@ -679,18 +680,21 @@ class P extends React.Component {
           </Table>
         </div>
         <Pagination
-          urlBased
+          urlBased={!filter.length}
           activePage={page}
           pageSize={ROWS_PER_PAGE}
           totalItems={entriesTotal}
           showTotal
-          onPageChanged={() => {
+          onPageChanged={(newPage) => {
             const scrollContainer = document.querySelector(".lingvo-scrolling-tab__table");
             smoothScroll(0, 0, null, scrollContainer);
             if (isTableLanguagesPublish) {
               this.resetCheckedColumn();
               this.resetCheckedAll();
             }
+            if (changePage) {
+              changePage(newPage);
+            }
           }}
           className="lingvo-pagination-block_perspective"
         />
@@ -723,7 +727,8 @@ P.propTypes = {
   createdEntries: PropTypes.array.isRequired,
   selectedEntries: PropTypes.array.isRequired,
   user: PropTypes.object.isRequired,
-  reRender: PropTypes.func
+  reRender: PropTypes.func,
+  changePage: PropTypes.func
 };
 
 P.defaultProps = {
@@ -1003,7 +1008,7 @@ export const LexicalEntryByIds = compose(
 )(LexicalEntryViewBaseByIds);
 
 const PerspectiveViewWrapper = ({ id, className, mode, entitiesMode, page, data,
-                                  filter, sortByField, isCaseSens, isRegexp }) => {
+                                  filter, sortByField, isCaseSens, isRegexp, changePage }) => {
   if (data.error) {
     return null;
   }
@@ -1047,6 +1052,7 @@ const PerspectiveViewWrapper = ({ id, className, mode, entitiesMode, page, data,
       isRegexp={isRegexp}
       columns={columns}
       reRender={reRender}
+      changePage={changePage}
     />
   );
 };
@@ -1061,7 +1067,8 @@ PerspectiveViewWrapper.propTypes = {
   isCaseSens: PropTypes.bool,
   isRegexp: PropTypes.bool,
   data: PropTypes.object.isRequired,
-  sortByField: PropTypes.object
+  sortByField: PropTypes.object,
+  changePage: PropTypes.func
 };
 
 PerspectiveViewWrapper.defaultProps = {

diff --git a/src/pages/Perspective/component.js b/src/pages/Perspective/component.js
@@ -38,6 +38,7 @@ import PerspectivePath from "./PerspectivePath";
 
 import "../../components/CognateAnalysisModal/style.scss";
 import "./style.scss";
+import { useSearchParams } from "react-router-dom";
 
 export const perspectiveIsHiddenOrDeletedQuery = gql`
   query perspectiveIsHiddenOrDeleted($id: LingvodocID!) {
@@ -1288,6 +1289,15 @@ const Perspective = ({
   }, [dndProvider]);
 
   const { id, parent_id, mode, page, baseUrl } = perspective.params;
+  const { value: filter } = perspective.filter;
+
+  const [searchParams, _] = useSearchParams();
+  const urlPageParam = parseInt(searchParams.get("page"));
+  const urlPage = isNaN(urlPageParam) ? 1 : urlPageParam;
+
+  const [activePage, setActivePage] = useState(page);
+  useEffect(() => setActivePage(page), [page, filter]);
+
   if (!baseUrl || location.pathname.indexOf(baseUrl) === -1) {
     return null;
   }
@@ -1377,7 +1387,7 @@ const Perspective = ({
             mode={mode}
             id={id}
             baseUrl={baseUrl}
-            filter={perspective.filter.value}
+            filter={filter}
             isCaseSens={perspective.filter.isCaseSens}
             isRegexp={perspective.filter.isRegexp}
             submitFilter={submitFilter}
@@ -1400,12 +1410,13 @@ const Perspective = ({
                     id={id}
                     mode={mode}
                     entitiesMode={info.entitiesMode}
-                    page={page}
-                    filter={perspective.filter.value}
+                    page={filter.length ? activePage : urlPage}
+                    filter={filter}
                     isCaseSens={perspective.filter.isCaseSens}
                     isRegexp={perspective.filter.isRegexp}
                     className="content"
                     activeDndProvider={dndProvider}
+                    changePage={newPage => setActivePage(newPage)}
                   />
                 }
               />

diff --git a/src/pages/Perspective/saga.js b/src/pages/Perspective/saga.js
@@ -5,7 +5,9 @@ import { request, selectors, SET_FILTER } from "ducks/perspective";
 
 export function* updateForFilter({ payload: filter }) {
   const { params } = yield select(selectors.getPerspective);
-  params.page = 1;
+  if (filter.value.length) {
+    params.page = 1;
+  }
   yield put(request({ ...params, filter }, true));
 }