[explorer] Fix browser history getting reset when navigating to the h…

…ome page (MystenLabs#3669) * Fix browser history getting reset when navigating to the home page * Remove debug logging * Run prettier
camaocande · Aug 1, 2022 · 4b5ee7d · 4b5ee7d
1 parent e1936cc
commit 4b5ee7d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/explorer/client/src/components/pagination/Pagination.tsx b/explorer/client/src/components/pagination/Pagination.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2022, Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { memo, useState, useCallback, useEffect } from 'react';
+import { memo, useState, useCallback, useEffect, useRef } from 'react';
 
 import { numberSuffix } from '../../utils/numberUtil';
 
@@ -30,14 +30,16 @@ function Pagination({
     // Connects pageIndex to input page value
 
     const [pageIndex, setPageIndex] = useState(currentPage - 1);
+    const previousPageIndex = useRef(pageIndex);
 
     useEffect(() => {
         setPageIndex(currentPage - 1);
     }, [currentPage]);
 
     useEffect(() => {
-        if (onPagiChangeFn) {
-            onPagiChangeFn(pageIndex + 1);
+        if (pageIndex !== previousPageIndex.current) {
+            previousPageIndex.current = pageIndex;
+            onPagiChangeFn?.(pageIndex + 1);
         }
     }, [pageIndex, onPagiChangeFn]);
 

diff --git a/explorer/client/src/components/transaction-card/RecentTxCard.tsx b/explorer/client/src/components/transaction-card/RecentTxCard.tsx
@@ -3,7 +3,7 @@
 
 import * as Sentry from '@sentry/react';
 import cl from 'classnames';
-import { useEffect, useState, useContext } from 'react';
+import { useEffect, useState, useContext, useCallback } from 'react';
 import { useSearchParams, Link } from 'react-router-dom';
 
 import { ReactComponent as ContentForwardArrowDark } from '../../assets/SVGIcons/forward-arrow-dark.svg';
@@ -221,20 +221,24 @@ function LatestTxCard({ ...data }: RecentTx) {
     const [network] = useContext(NetworkContext);
     const [searchParams, setSearchParams] = useSearchParams();
 
-    const [pageIndex, setpageIndex] = useState(
+    const [pageIndex, setPageIndex] = useState(
         parseInt(searchParams.get('p') || '1', 10) || 1
     );
 
+    const handlePageChange = useCallback(
+        (newPage: number) => {
+            setPageIndex(newPage);
+            setSearchParams({ p: newPage.toString() });
+        },
+        [setSearchParams]
+    );
+
     // update the page index when the user clicks on the pagination buttons
     useEffect(() => {
         let isMounted = true;
         // If pageIndex is greater than maxTxPage, set to maxTxPage
         const maxTxPage = Math.ceil(count / txPerPage);
         const pg = pageIndex > maxTxPage ? maxTxPage : pageIndex;
-        setpageIndex(pg);
-        pageIndex > 1
-            ? setSearchParams({ p: pg.toString() })
-            : setSearchParams({});
 
         getRecentTransactions(network, count, txPerPage, pg)
             .then(async (resp: any) => {
@@ -299,7 +303,7 @@ function LatestTxCard({ ...data }: RecentTx) {
                 totalItems={count}
                 itemsPerPage={txPerPage}
                 updateItemsPerPage={setTxPerPage}
-                onPagiChangeFn={setpageIndex}
+                onPagiChangeFn={handlePageChange}
                 currentPage={pageIndex}
                 stats={stats}
             />