feature(frontend): adding persistent page number for list (#2372)

* feature(frontend): adding persistent page number for list * feature(frontend): adding persistent page number for list
kubeshop · Apr 12, 2023 · 9fd2329 · 9fd2329
1 parent 0a78a73
commit 9fd2329
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 34 deletions.
diff --git a/web/src/components/Pagination/Pagination.tsx b/web/src/components/Pagination/Pagination.tsx
@@ -1,6 +1,7 @@
 import {Pagination as PG} from 'antd';
-import {ReactNode} from 'react';
-import {IPagination} from '../../hooks/usePagination';
+import {useNavigate} from 'react-router-dom';
+import {ReactNode, useCallback, useEffect} from 'react';
+import {IPagination} from 'hooks/usePagination';
 
 import * as S from './Pagination.styled';
 
@@ -25,15 +26,27 @@ const Pagination = <T extends any>({
   take,
   loadPage,
 }: IProps<T>) => {
-  const handleNextPage = () => {
+  const navigate = useNavigate();
+  const handleNextPage = useCallback(() => {
     if (isLoading || !hasNext) return;
     loadNext();
-  };
+  }, [hasNext, isLoading, loadNext]);
 
-  const handlePrevPage = () => {
+  const handlePrevPage = useCallback(() => {
     if (isLoading || !hasPrev) return;
     loadPrev();
-  };
+  }, [hasPrev, isLoading, loadPrev]);
+
+  useEffect(() => {
+    navigate(
+      {
+        search: `page=${page}`,
+      },
+      {
+        replace: true,
+      }
+    );
+  }, [navigate, page]);
 
   return (
     <>

diff --git a/web/src/components/RunDetailLayout/HeaderLeft.tsx b/web/src/components/RunDetailLayout/HeaderLeft.tsx
@@ -1,4 +1,4 @@
-import {Link} from 'react-router-dom';
+import {useNavigate} from 'react-router-dom';
 import {useMemo} from 'react';
 import {LinkOutlined} from '@ant-design/icons';
 
@@ -9,14 +9,14 @@ import * as S from './RunDetailLayout.styled';
 
 interface IProps {
   name: string;
-  testId: string;
   triggerType: string;
 }
 
-const HeaderLeft = ({name, testId, triggerType}: IProps) => {
+const HeaderLeft = ({name, triggerType}: IProps) => {
   const {run: {createdAt, transactionId, transactionRunId, executionTime, trace, traceId, testVersion} = {}, run} =
     useTestRun();
   const createdTimeAgo = Date.getTimeAgo(createdAt ?? '');
+  const navigate = useNavigate();
 
   const description = useMemo(() => {
     return (
@@ -37,9 +37,9 @@ const HeaderLeft = ({name, testId, triggerType}: IProps) => {
 
   return (
     <S.Section $justifyContent="flex-start">
-      <Link data-cy="test-header-back-button" to={`/test/${testId}`}>
+      <a data-cy="test-header-back-button" onClick={() => navigate(-1)}>
         <S.BackIcon />
-      </Link>
+      </a>
       <S.InfoContainer>
         <S.Row>
           <S.Title data-cy="test-details-name">

diff --git a/web/src/components/RunDetailLayout/RunDetailLayout.tsx b/web/src/components/RunDetailLayout/RunDetailLayout.tsx
@@ -50,7 +50,7 @@ const RunDetailLayout = ({test: {id, name, trigger, version = 1}, test}: IProps)
 
   const tabBarExtraContent = useMemo(
     () => ({
-      left: <HeaderLeft testId={id} name={name} triggerType={trigger.type.toUpperCase()} />,
+      left: <HeaderLeft name={name} triggerType={trigger.type.toUpperCase()} />,
       right: <HeaderRight testId={id} testVersion={version} />,
     }),
     [id, name, trigger.type, version]

diff --git a/web/src/components/TestHeader/TestHeader.tsx b/web/src/components/TestHeader/TestHeader.tsx
@@ -1,5 +1,5 @@
 import ResourceCardActions from 'components/ResourceCard/ResourceCardActions';
-import {Link} from 'react-router-dom';
+import {useNavigate} from 'react-router-dom';
 import * as S from './TestHeader.styled';
 
 interface IProps {
@@ -12,22 +12,26 @@ interface IProps {
   runButton: React.ReactElement;
 }
 
-const TestHeader = ({description, id, shouldEdit, onEdit, onDelete, title, runButton}: IProps) => (
-  <S.Container $isWhite>
-    <S.Section>
-      <Link to="/" data-cy="test-header-back-button">
-        <S.BackIcon />
-      </Link>
-      <div>
-        <S.Title data-cy="test-details-name">{title}</S.Title>
-        <S.Text>{description}</S.Text>
-      </div>
-    </S.Section>
-    <S.Section>
-      {runButton}
-      <ResourceCardActions id={id} onDelete={onDelete} onEdit={onEdit} shouldEdit={shouldEdit} />
-    </S.Section>
-  </S.Container>
-);
+const TestHeader = ({description, id, shouldEdit, onEdit, onDelete, title, runButton}: IProps) => {
+  const navigate = useNavigate();
+
+  return (
+    <S.Container $isWhite>
+      <S.Section>
+        <a onClick={() => navigate(-1)} data-cy="test-header-back-button">
+          <S.BackIcon />
+        </a>
+        <div>
+          <S.Title data-cy="test-details-name">{title}</S.Title>
+          <S.Text>{description}</S.Text>
+        </div>
+      </S.Section>
+      <S.Section>
+        {runButton}
+        <ResourceCardActions id={id} onDelete={onDelete} onEdit={onEdit} shouldEdit={shouldEdit} />
+      </S.Section>
+    </S.Container>
+  );
+};
 
 export default TestHeader;
diff --git a/web/src/components/TransactionHeader/TransactionHeader.tsx b/web/src/components/TransactionHeader/TransactionHeader.tsx
@@ -1,5 +1,5 @@
 import {Button} from 'antd';
-import {Link} from 'react-router-dom';
+import {useNavigate} from 'react-router-dom';
 import {useTransaction} from 'providers/Transaction/Transaction.provider';
 import {TestState as TestStateEnum} from 'constants/TestRun.constants';
 import Transaction from 'models/Transaction.model';
@@ -18,13 +18,14 @@ const TransactionHeader = ({
   transactionRun: {state, id: runId},
 }: IProps) => {
   const {onRun} = useTransaction();
+  const navigate = useNavigate();
 
   return (
     <S.Container>
       <S.Section>
-        <Link to={`/transaction/${transactionId}`} data-cy="transaction-header-back-button">
+        <a onClick={() => navigate(-1)} data-cy="transaction-header-back-button">
           <S.BackIcon />
-        </Link>
+        </a>
         <div>
           <S.Title data-cy="transaction-details-name">
             {name} (v{version})

diff --git a/web/src/hooks/usePagination.ts b/web/src/hooks/usePagination.ts
@@ -1,5 +1,6 @@
 import {UseQuery} from '@reduxjs/toolkit/dist/query/react/buildHooks';
 import {useCallback, useState} from 'react';
+import {useSearchParams} from 'react-router-dom';
 
 type TParams<P> = P & {
   take?: number;
@@ -35,7 +36,9 @@ const usePagination = <T, P>(
   useGetDataListQuery: UseQuery<any>,
   {take = 20, ...queryParams}: TParams<P>
 ): IPagination<T> => {
-  const [params, setParams] = useState<{page: number; query: string}>({page: 0, query: ''});
+  const [searchParams] = useSearchParams();
+  const defaultPage = searchParams.get('page') ? Number(searchParams.get('page')) - 1 : 0;
+  const [params, setParams] = useState<{page: number; query: string}>({page: defaultPage, query: ''});
 
   const {data, isFetching, isLoading} = useGetDataListQuery({
     skip: params.page * take,