fix bug when switching tabs from second or later page

lib/hooks/useQueryWithPages.ts

@@ -26,9 +26,12 @@ export default function useQueryWithPages<QueryName extends PaginatedQueryKeys>(
   const currPageParams = pick(router.query, paginationFields);
   const [ pageParams, setPageParams ] = React.useState<Array<PaginationParams<QueryName>>>([ ]);
   const fetch = useFetch();
+  const isMounted = React.useRef(false);
+
+  const queryKey = [ queryName, ...(queryIds || []), { page, filters } ];
 
   const queryResult = useQuery<unknown, unknown, PaginatedResponse<QueryName>>(
-    [ queryName, ...(queryIds || []), { page, filters } ],
+    queryKey,
     async() => {
       const params: Array<string> = [];
 
@@ -105,5 +108,18 @@ export default function useQueryWithPages<QueryName extends PaginatedQueryKeys>(
     hasNextPage: nextPageParams ? Object.keys(nextPageParams).length > 0 : false,
   };
 
+  React.useEffect(() => {
+    if (page !== 1 && isMounted.current) {
+      queryClient.cancelQueries({ queryKey });
+      setPage(1);
+    }
+  // hook should run only when queryName has changed
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ queryName ]);
+
+  React.useEffect(() => {
+    isMounted.current = true;
+  }, []);
+
   return { ...queryResult, pagination };
 }

types/api/pagination.ts

@@ -9,6 +9,8 @@ import type { KeysOfObjectOrNull } from 'types/utils/KeysOfObjectOrNull';
 
 export type PaginatedQueryKeys =
   QueryKeys.blocks |
+  QueryKeys.blocksReorgs |
+  QueryKeys.blocksUncles |
   QueryKeys.blockTxs |
   QueryKeys.txsValidate |
   QueryKeys.txsPending |
@@ -17,7 +19,7 @@ export type PaginatedQueryKeys =
   QueryKeys.txTokenTransfers;
 
 export type PaginatedResponse<Q extends PaginatedQueryKeys> =
-  Q extends QueryKeys.blocks ? BlocksResponse :
+  Q extends (QueryKeys.blocks | QueryKeys.blocksReorgs | QueryKeys.blocksUncles) ? BlocksResponse :
     Q extends QueryKeys.blockTxs ? BlockTransactionsResponse :
       Q extends QueryKeys.txsValidate ? TransactionsResponseValidated :
         Q extends QueryKeys.txsPending ? TransactionsResponsePending :
@@ -41,6 +43,8 @@ type PaginationFields = {
 
 export const PAGINATION_FIELDS: PaginationFields = {
   [QueryKeys.blocks]: [ 'block_number', 'items_count' ],
+  [QueryKeys.blocksReorgs]: [ 'block_number', 'items_count' ],
+  [QueryKeys.blocksUncles]: [ 'block_number', 'items_count' ],
   [QueryKeys.blockTxs]: [ 'block_number', 'items_count', 'index' ],
   [QueryKeys.txsValidate]: [ 'block_number', 'items_count', 'filter', 'index' ],
   [QueryKeys.txsPending]: [ 'filter', 'hash', 'inserted_at' ],

types/client/queries.ts

@@ -13,6 +13,8 @@ export enum QueryKeys {
   blockTxs = 'block-transactions',
   block = 'block',
   blocks = 'blocks',
+  blocksReorgs = 'blocks-reorgs',
+  blocksUncles = 'blocks-uncles',
   chartsTxs = 'charts-txs',
   chartsMarket = 'charts-market',
   indexBlocks='indexBlocks',

ui/blocks/BlocksContent.tsx

@@ -34,7 +34,18 @@ const BlocksContent = ({ type, query }: Props) => {
   const [ socketAlert, setSocketAlert ] = React.useState('');
 
   const handleNewBlockMessage: SocketMessage.NewBlock['handler'] = React.useCallback((payload) => {
-    queryClient.setQueryData([ QueryKeys.blocks, { page: query.pagination.page, filters: { type } } ], (prevData: BlocksResponse | undefined) => {
+    const queryKey = (() => {
+      switch (type) {
+        case 'uncle':
+          return QueryKeys.blocksUncles;
+        case 'reorg':
+          return QueryKeys.blocksReorgs;
+        default:
+          return QueryKeys.blocks;
+      }
+    })();
+
+    queryClient.setQueryData([ queryKey, { page: query.pagination.page, filters: { type } } ], (prevData: BlocksResponse | undefined) => {
       const shouldAddToList = !type || type === payload.block.type;
 
       if (!prevData) {

ui/pages/Blocks.tsx

@@ -19,6 +19,12 @@ const TAB_TO_TYPE: Record<string, BlockType> = {
   uncles: 'uncle',
 };
 
+const TAB_TO_QUERY: Record<string, QueryKeys.blocks | QueryKeys.blocksReorgs | QueryKeys.blocksUncles> = {
+  blocks: QueryKeys.blocks,
+  reorgs: QueryKeys.blocksReorgs,
+  uncles: QueryKeys.blocksUncles,
+};
+
 const TAB_LIST_PROPS = {
   marginBottom: 0,
   py: 5,
@@ -28,15 +34,17 @@ const TAB_LIST_PROPS = {
 const BlocksPageContent = () => {
   const router = useRouter();
   const isMobile = useIsMobile();
-  const type = router.query.tab && !Array.isArray(router.query.tab) ? TAB_TO_TYPE[router.query.tab] : undefined;
+  const type = router.query.tab && !Array.isArray(router.query.tab) ? TAB_TO_TYPE[router.query.tab] : 'block';
+  const queryName = router.query.tab && !Array.isArray(router.query.tab) ? TAB_TO_QUERY[router.query.tab] : QueryKeys.blocks;
+
   const blocksQuery = useQueryWithPages({
     apiPath: '/node-api/blocks',
-    queryName: QueryKeys.blocks,
+    queryName,
     filters: { type },
   });
 
   const tabs: Array<RoutedTab> = [
-    { id: 'blocks', title: 'All', component: <BlocksContent query={ blocksQuery }/> },
+    { id: 'blocks', title: 'All', component: <BlocksContent type="block" query={ blocksQuery }/> },
     { id: 'reorgs', title: 'Forked', component: <BlocksContent type="reorg" query={ blocksQuery }/> },
     { id: 'uncles', title: 'Uncles', component: <BlocksContent type="uncle" query={ blocksQuery }/> },
   ];