Merge pull request #876 from blockscout/bugfix/blocks-pagination

fix: pagination is not correct when changing tabs on blocks page
blockscout · Jun 7, 2023 · cdf3c4a · cdf3c4a
2 parents 52bdab8 + 8caf3ac
commit cdf3c4a
Showing 1 changed file with 48 additions and 12 deletions.
diff --git a/ui/pages/Blocks.tsx b/ui/pages/Blocks.tsx
@@ -1,24 +1,18 @@
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import type { BlockType } from 'types/api/block';
 import type { RoutedTab } from 'ui/shared/Tabs/types';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
+import getQueryParamString from 'lib/router/getQueryParamString';
 import { BLOCK } from 'stubs/block';
 import { generateListStub } from 'stubs/utils';
 import BlocksContent from 'ui/blocks/BlocksContent';
 import BlocksTabSlot from 'ui/blocks/BlocksTabSlot';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
 
-const TAB_TO_TYPE: Record<string, BlockType> = {
-  blocks: 'block',
-  reorgs: 'reorg',
-  uncles: 'uncle',
-};
-
 const TAB_LIST_PROPS = {
   marginBottom: 0,
   py: 5,
@@ -28,23 +22,65 @@ 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] : 'block';
+  const tab = getQueryParamString(router.query.tab);
 
   const blocksQuery = useQueryWithPages({
     resourceName: 'blocks',
-    filters: { type },
+    filters: { type: 'block' },
+    options: {
+      enabled: tab === 'blocks' || !tab,
+      placeholderData: generateListStub<'blocks'>(BLOCK, 50, { next_page_params: {
+        block_number: 8988686,
+        items_count: 50,
+      } }),
+    },
+  });
+  const reorgsQuery = useQueryWithPages({
+    resourceName: 'blocks',
+    filters: { type: 'reorg' },
     options: {
+      enabled: tab === 'reorgs',
       placeholderData: generateListStub<'blocks'>(BLOCK, 50, { next_page_params: {
         block_number: 8988686,
         items_count: 50,
       } }),
     },
   });
+  const unclesQuery = useQueryWithPages({
+    resourceName: 'blocks',
+    filters: { type: 'uncle' },
+    options: {
+      enabled: tab === 'uncles',
+      placeholderData: generateListStub<'blocks'>(BLOCK, 50, { next_page_params: {
+        block_number: 8988686,
+        items_count: 50,
+      } }),
+    },
+  });
+
+  const { pagination, isPaginationVisible } = (() => {
+    if (tab === 'reorgs') {
+      return {
+        pagination: reorgsQuery.pagination,
+        isPaginationVisible: reorgsQuery.isPaginationVisible,
+      };
+    }
+    if (tab === 'uncles') {
+      return {
+        pagination: unclesQuery.pagination,
+        isPaginationVisible: unclesQuery.isPaginationVisible,
+      };
+    }
+    return {
+      pagination: blocksQuery.pagination,
+      isPaginationVisible: blocksQuery.isPaginationVisible,
+    };
+  })();
 
   const tabs: Array<RoutedTab> = [
     { 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 }/> },
+    { id: 'reorgs', title: 'Forked', component: <BlocksContent type="reorg" query={ reorgsQuery }/> },
+    { id: 'uncles', title: 'Uncles', component: <BlocksContent type="uncle" query={ unclesQuery }/> },
   ];
 
   return (
@@ -53,7 +89,7 @@ const BlocksPageContent = () => {
       <RoutedTabs
         tabs={ tabs }
         tabListProps={ isMobile ? undefined : TAB_LIST_PROPS }
-        rightSlot={ <BlocksTabSlot pagination={ blocksQuery.pagination } isPaginationVisible={ blocksQuery.isPaginationVisible }/> }
+        rightSlot={ <BlocksTabSlot pagination={ pagination } isPaginationVisible={ isPaginationVisible }/> }
         stickyEnabled={ !isMobile }
       />
     </>