fix pagination

lib/hooks/useQueryWithPages.ts

@@ -36,6 +36,7 @@ export default function useQueryWithPages<QueryName extends PaginatedQueryKeys>(
   const fetch = useFetch();
   const isMounted = React.useRef(false);
   const canGoBackwards = React.useRef(!router.query.page);
+  const [ hasPagination, setHasPagination ] = React.useState(page > 1);
 
   const queryKey = [ queryName, ...(queryIds || []), { page, filters } ];
 
@@ -74,6 +75,7 @@ export default function useQueryWithPages<QueryName extends PaginatedQueryKeys>(
     const nextPageQuery = { ...router.query };
     Object.entries(nextPageParams).forEach(([ key, val ]) => nextPageQuery[key] = val.toString());
     nextPageQuery.page = String(page + 1);
+    setHasPagination(true);
 
     router.push({ pathname: router.pathname, query: nextPageQuery }, undefined, { shallow: true })
       .then(() => {
@@ -101,6 +103,7 @@ export default function useQueryWithPages<QueryName extends PaginatedQueryKeys>(
         setPage(prev => prev - 1);
         page === 2 && queryClient.removeQueries({ queryKey: [ queryName ] });
       });
+    setHasPagination(true);
   }, [ router, page, paginationFields, pageParams, queryClient, scrollToTop, queryName ]);
 
   const resetPage = useCallback(() => {
@@ -118,6 +121,8 @@ export default function useQueryWithPages<QueryName extends PaginatedQueryKeys>(
         queryClient.removeQueries({ queryKey: [ queryName ], type: 'inactive' });
       }, 100);
     });
+
+    setHasPagination(true);
   }, [ queryClient, queryName, router, paginationFields, scrollToTop ]);
 
   const onFilterChange = useCallback((newFilters: PaginationFilters<QueryName> | undefined) => {
@@ -156,6 +161,8 @@ export default function useQueryWithPages<QueryName extends PaginatedQueryKeys>(
     canGoBackwards: canGoBackwards.current,
   };
 
+  const isPaginationVisible = hasPagination || (!queryResult.isLoading && !queryResult.isError && pagination.hasNextPage);
+
   React.useEffect(() => {
     if (page !== 1 && isMounted.current) {
       queryClient.cancelQueries({ queryKey });
@@ -171,5 +178,5 @@ export default function useQueryWithPages<QueryName extends PaginatedQueryKeys>(
     }, 0);
   }, []);
 
-  return { ...queryResult, pagination, onFilterChange };
+  return { ...queryResult, pagination, onFilterChange, isPaginationVisible };
 }

ui/address/AddressBlocksValidated.tsx

@@ -122,11 +122,9 @@ const AddressBlocksValidated = ({ addressQuery }: Props) => {
     );
   })();
 
-  const isPaginatorHidden = !query.isLoading && !query.isError && query.pagination.page === 1 && !query.pagination.hasNextPage;
-
   return (
     <Box>
-      { !isPaginatorHidden && (
+      { query.isPaginationVisible && (
         <ActionBar mt={ -6 }>
           <Pagination ml="auto" { ...query.pagination }/>
         </ActionBar>

ui/address/AddressInternalTxs.tsx

@@ -35,7 +35,7 @@ const AddressInternalTxs = () => {
   const queryIdArray = castArray(queryId);
   const queryIdStr = queryIdArray[0];
 
-  const { data, isLoading, isError, pagination, onFilterChange } = useQueryWithPages({
+  const { data, isLoading, isError, pagination, onFilterChange, isPaginationVisible } = useQueryWithPages({
     apiPath: `/node-api/addresses/${ queryId }/internal-transactions`,
     queryName: QueryKeys.addressInternalTxs,
     queryIds: queryIdArray,
@@ -43,8 +43,6 @@ const AddressInternalTxs = () => {
     scroll: { elem: SCROLL_ELEM, offset: SCROLL_OFFSET },
   });
 
-  const isPaginatorHidden = !isLoading && !isError && pagination.page === 1 && !pagination.hasNextPage;
-
   const handleFilterChange = React.useCallback((val: string | Array<string>) => {
 
     const newVal = getFilterValue(val);
@@ -94,7 +92,7 @@ const AddressInternalTxs = () => {
           onFilterChange={ handleFilterChange }
           isActive={ Boolean(filterValue) }
         />
-        { !isPaginatorHidden && <Pagination ml="auto" { ...pagination }/> }
+        { isPaginationVisible && <Pagination ml="auto" { ...pagination }/> }
       </ActionBar>
       { content }
     </Element>

ui/address/AddressTxs.tsx

@@ -43,12 +43,6 @@ const AddressTxs = () => {
     addressTxsQuery.onFilterChange({ filter: newVal });
   }, [ addressTxsQuery ]);
 
-  const isPaginatorHidden =
-      !addressTxsQuery.isLoading &&
-      !addressTxsQuery.isError &&
-      addressTxsQuery.pagination.page === 1 &&
-      !addressTxsQuery.pagination.hasNextPage;
-
   const filter = (
     <AddressTxsFilter
       defaultFilter={ filterValue }
@@ -62,7 +56,7 @@ const AddressTxs = () => {
       { !isMobile && (
         <ActionBar mt={ -6 }>
           { filter }
-          { !isPaginatorHidden && <Pagination { ...addressTxsQuery.pagination }/> }
+          { addressTxsQuery.isPaginationVisible && <Pagination { ...addressTxsQuery.pagination }/> }
         </ActionBar>
       ) }
       <TxsContent

ui/address/coinBalance/AddressCoinBalanceHistory.tsx

@@ -19,13 +19,12 @@ import AddressCoinBalanceTableItem from './AddressCoinBalanceTableItem';
 interface Props {
   query: UseQueryResult<AddressCoinBalanceHistoryResponse> & {
     pagination: PaginationProps;
+    isPaginationVisible: boolean;
   };
 }
 
 const AddressCoinBalanceHistory = ({ query }: Props) => {
 
-  const isPaginatorHidden = !query.isLoading && !query.isError && query.pagination.page === 1 && !query.pagination.hasNextPage;
-
   const content = (() => {
     if (query.isLoading) {
       return (
@@ -75,7 +74,7 @@ const AddressCoinBalanceHistory = ({ query }: Props) => {
 
   return (
     <Box mt={ 8 }>
-      { !isPaginatorHidden && (
+      { query.isPaginationVisible && (
         <ActionBar mt={ -6 }>
           <Pagination ml="auto" { ...query.pagination }/>
         </ActionBar>

ui/blocks/BlocksTabSlot.tsx

@@ -13,9 +13,10 @@ import Pagination from 'ui/shared/Pagination';
 
 interface Props {
   pagination: PaginationProps;
+  isPaginationVisible: boolean;
 }
 
-const BlocksTabSlot = ({ pagination }: Props) => {
+const BlocksTabSlot = ({ pagination, isPaginationVisible }: Props) => {
   const isMobile = useIsMobile();
   const fetch = useFetch();
 
@@ -41,7 +42,7 @@ const BlocksTabSlot = ({ pagination }: Props) => {
           </Text>
         </Box>
       ) }
-      <Pagination my={ 1 } { ...pagination }/>
+      { isPaginationVisible && <Pagination my={ 1 } { ...pagination }/> }
     </Flex>
   );
 };

ui/pages/Block.tsx

@@ -46,8 +46,7 @@ const BlockPageContent = () => {
     { id: 'txs', title: 'Transactions', component: <TxsContent query={ blockTxsQuery } showBlockInfo={ false } showSocketInfo={ false }/> },
   ];
 
-  const isPaginatorHidden = !blockTxsQuery.isLoading && !blockTxsQuery.isError && blockTxsQuery.pagination.page === 1 && !blockTxsQuery.pagination.hasNextPage;
-  const hasPagination = !isMobile && router.query.tab === 'txs' && !isPaginatorHidden;
+  const hasPagination = !isMobile && router.query.tab === 'txs' && blockTxsQuery.isPaginationVisible;
 
   const referrer = isInBrowser ? window.document.referrer : appProps.referrer;
 

ui/pages/Blocks.tsx

@@ -55,7 +55,7 @@ const BlocksPageContent = () => {
       <RoutedTabs
         tabs={ tabs }
         tabListProps={ isMobile ? undefined : TAB_LIST_PROPS }
-        rightSlot={ <BlocksTabSlot pagination={ blocksQuery.pagination }/> }
+        rightSlot={ <BlocksTabSlot pagination={ blocksQuery.pagination } isPaginationVisible={ blocksQuery.isPaginationVisible }/> }
         stickyEnabled={ !isMobile }
       />
     </Page>

ui/pages/Transactions.tsx

@@ -43,7 +43,7 @@ const Transactions = () => {
         <RoutedTabs
           tabs={ tabs }
           tabListProps={ isMobile ? undefined : TAB_LIST_PROPS }
-          rightSlot={ <TxsTabSlot pagination={ txsQuery.pagination }/> }
+          rightSlot={ <TxsTabSlot pagination={ txsQuery.pagination } isPaginationVisible={ txsQuery.isPaginationVisible && !isMobile }/> }
           stickyEnabled={ !isMobile }
         />
       </Box>

ui/shared/TokenTransfer/TokenTransfer.tsx

@@ -51,7 +51,7 @@ const TokenTransfer = ({ isLoading: isLoadingProp, isDisabled, queryName, queryI
     { type: getTokenFilterValue(router.query.type), filter: getAddressFilterValue(router.query.filter) },
   );
 
-  const { isError, isLoading, data, pagination, onFilterChange } = useQueryWithPages({
+  const { isError, isLoading, data, pagination, onFilterChange, isPaginationVisible } = useQueryWithPages({
     apiPath: path,
     queryName,
     queryIds,
@@ -128,7 +128,7 @@ const TokenTransfer = ({ isLoading: isLoadingProp, isDisabled, queryName, queryI
             onAddressFilterChange={ handleAddressFilterChange }
             defaultAddressFilter={ filters.filter }
           />
-          <Pagination ml="auto" { ...pagination }/>
+          { isPaginationVisible && <Pagination ml="auto" { ...pagination }/> }
         </ActionBar>
       ) }
       { content }

ui/tx/TxInternals.tsx

@@ -75,7 +75,7 @@ const TxInternals = () => {
   // const [ searchTerm, setSearchTerm ] = React.useState<string>('');
   const [ sort, setSort ] = React.useState<Sort>();
   const txInfo = useFetchTxInfo({ updateDelay: 5 * SECOND });
-  const { data, isLoading, isError, pagination } = useQueryWithPages({
+  const { data, isLoading, isError, pagination, isPaginationVisible } = useQueryWithPages({
     apiPath: `/node-api/transactions/${ txInfo.data?.hash }/internal-transactions`,
     queryName: QueryKeys.txInternals,
     queryIds: txInfo.data?.hash ? [ txInfo.data.hash ] : undefined,
@@ -83,7 +83,6 @@ const TxInternals = () => {
       enabled: Boolean(txInfo.data?.hash) && Boolean(txInfo.data?.status),
     },
   });
-  const isPaginatorHidden = !isLoading && !isError && pagination.page === 1 && !pagination.hasNextPage;
 
   const isMobile = useIsMobile();
 
@@ -131,12 +130,12 @@ const TxInternals = () => {
 
     return isMobile ?
       <TxInternalsList data={ filteredData }/> :
-      <TxInternalsTable data={ filteredData } sort={ sort } onSortToggle={ handleSortToggle } top={ isPaginatorHidden ? 0 : 80 }/>;
+      <TxInternalsTable data={ filteredData } sort={ sort } onSortToggle={ handleSortToggle } top={ isPaginationVisible ? 80 : 0 }/>;
   })();
 
   return (
     <Box>
-      { !isPaginatorHidden && (
+      { isPaginationVisible && (
         <ActionBar mt={ -6 }>
           <Pagination ml="auto" { ...pagination }/>
         </ActionBar>

ui/tx/TxLogs.tsx

@@ -16,7 +16,7 @@ import useFetchTxInfo from 'ui/tx/useFetchTxInfo';
 
 const TxLogs = () => {
   const txInfo = useFetchTxInfo({ updateDelay: 5 * SECOND });
-  const { data, isLoading, isError, pagination } = useQueryWithPages({
+  const { data, isLoading, isError, pagination, isPaginationVisible } = useQueryWithPages({
     apiPath: `/node-api/transactions/${ txInfo.data?.hash }/logs`,
     queryName: QueryKeys.txLogs,
     queryIds: txInfo.data?.hash ? [ txInfo.data.hash ] : undefined,
@@ -24,7 +24,6 @@ const TxLogs = () => {
       enabled: Boolean(txInfo.data?.hash) && Boolean(txInfo.data?.status),
     },
   });
-  const isPaginatorHidden = !isLoading && !isError && pagination.page === 1 && !pagination.hasNextPage;
 
   if (!txInfo.isLoading && !txInfo.isError && !txInfo.data.status) {
     return txInfo.socketStatus ? <TxSocketAlert status={ txInfo.socketStatus }/> : <TxPendingAlert/>;
@@ -49,7 +48,7 @@ const TxLogs = () => {
 
   return (
     <Box>
-      { !isPaginatorHidden && (
+      { isPaginationVisible && (
         <ActionBar mt={ -6 }>
           <Pagination ml="auto" { ...pagination }/>
         </ActionBar>

ui/txs/TxsTabSlot.tsx

 import React from 'react';
 
-import useIsMobile from 'lib/hooks/useIsMobile';
 import type { Props as PaginationProps } from 'ui/shared/Pagination';
 import Pagination from 'ui/shared/Pagination';
 
 interface Props {
   pagination: PaginationProps;
+  isPaginationVisible: boolean;
 }
 
-const TxsTabSlot = ({ pagination }: Props) => {
-  const isMobile = useIsMobile();
-
-  if (isMobile) {
+const TxsTabSlot = ({ pagination, isPaginationVisible }: Props) => {
+  if (!isPaginationVisible) {
     return null;
   }