feat(blockslist): state preserving pagination (#225)

covalenthq · Oct 22, 2024 · f473998 · f473998
1 parent b1f66d4
commit f473998
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 39 deletions.
diff --git a/src/components/Molecules/Block/BlocksList/BlocksList.stories.tsx b/src/components/Molecules/Block/BlocksList/BlocksList.stories.tsx
@@ -1,4 +1,5 @@
 import { BlocksList as BlocksListComponent } from "./BlocksList";
+import { storyAction } from "@/utils/functions";
 import { type Meta, type StoryObj } from "@storybook/react";
 
 type Story = StoryObj<typeof BlocksListComponent>;
@@ -13,5 +14,11 @@ export default meta;
 export const BlocksList: Story = {
     args: {
         chain_name: "eth-mainnet",
+        actionable_block: (block_height) => storyAction(block_height),
+        page_number: 0,
+        page_size: 10,
+        on_page_change: (updatedPagination) => {
+            console.log(updatedPagination);
+        },
     },
 };
diff --git a/src/components/Molecules/Block/BlocksList/BlocksList.tsx b/src/components/Molecules/Block/BlocksList/BlocksList.tsx
@@ -16,12 +16,14 @@ import {
     timestampParser,
 } from "@covalenthq/client-sdk";
 import { type ColumnDef } from "@tanstack/react-table";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 export const BlocksList: React.FC<BlocksListProps> = ({
     chain_name,
+    page_number = 0,
     page_size = 10,
     actionable_block = () => null,
+    on_page_change = () => null,
 }) => {
     const { goldrushClient } = useGoldRush();
     const [errorMessage, setErrorMessage] = useState<string | null>(null);
@@ -33,41 +35,34 @@ export const BlocksList: React.FC<BlocksListProps> = ({
         updateResult(null);
     }, [chain_name, page_size]);
 
-    const updateResult = useCallback(
-        async (_pagination: Pagination | null) => {
-            try {
-                setMaybeResult(None);
-                setErrorMessage(null);
-                const { data, ...error } =
-                    await goldrushClient.BaseService.getBlockHeightsByPage(
-                        chain_name,
-                        timestampParser(new Date(), "YYYY MM DD"),
-                        "2100-01-01",
-                        {
-                            pageNumber: _pagination?.page_number ?? 0,
-                            pageSize: _pagination?.page_size ?? page_size,
-                        },
-                    );
-                if (error.error) {
-                    throw error;
-                }
-                if (!data?.items) {
-                    throw FALLBACK_ERROR;
-                }
-                setPagination(data.pagination);
-                setMaybeResult(new Some(data.items));
-            } catch (error: GoldRushResponse<null> | any) {
-                setErrorMessage(error?.error_message ?? DEFAULT_ERROR_MESSAGE);
-                setMaybeResult(new Some(null));
-                console.error(error);
+    const updateResult = async (_pagination: Pagination | null) => {
+        try {
+            setMaybeResult(None);
+            setErrorMessage(null);
+            const { data, ...error } =
+                await goldrushClient.BaseService.getBlockHeightsByPage(
+                    chain_name,
+                    timestampParser(new Date(), "YYYY MM DD"),
+                    "2100-01-01",
+                    {
+                        pageNumber: _pagination?.page_number ?? page_number,
+                        pageSize: _pagination?.page_size ?? page_size,
+                    },
+                );
+            if (error.error) {
+                throw error;
             }
-        },
-        [chain_name],
-    );
-
-    const handleOnChangePagination = (updatedPagination: Pagination) => {
-        setPagination(updatedPagination);
-        updateResult(updatedPagination);
+            if (!data?.items || !data?.pagination) {
+                throw FALLBACK_ERROR;
+            }
+            on_page_change(data.pagination);
+            setPagination(data.pagination);
+            setMaybeResult(new Some(data.items));
+        } catch (error: GoldRushResponse<null> | any) {
+            setErrorMessage(error?.error_message ?? DEFAULT_ERROR_MESSAGE);
+            setMaybeResult(new Some(null));
+            console.error(error);
+        }
     };
 
     const columns: ColumnDef<Block>[] = [
@@ -149,7 +144,7 @@ export const BlocksList: React.FC<BlocksListProps> = ({
             errorMessage={errorMessage}
             maybeData={maybeResult}
             pagination={pagination}
-            onChangePaginationHandler={handleOnChangePagination}
+            onChangePaginationHandler={updateResult}
         />
     );
 };
diff --git a/src/utils/types/molecules.types.ts b/src/utils/types/molecules.types.ts
@@ -2,7 +2,11 @@ import {
     type DECODED_ACTION,
     type DECODED_EVENT_CATEGORY,
 } from "../constants/shared.constants";
-import { type ActionableType, type TransactionsProps } from "./shared.types";
+import type {
+    ActionableType,
+    PaginationProps,
+    TransactionsProps,
+} from "./shared.types";
 import { type Option } from "@/utils/option";
 import type {
     GasPricesResponse,
@@ -60,9 +64,8 @@ export interface BlockDetailsProps {
     height: number;
 }
 
-export interface BlocksListProps {
+export interface BlocksListProps extends PaginationProps {
     chain_name: Chain;
-    page_size?: number;
     actionable_block?: (block_height: number | null) => ActionableType;
 }
 

diff --git a/src/utils/types/shared.types.ts b/src/utils/types/shared.types.ts
@@ -85,6 +85,12 @@ export interface PaginationFooterProps {
     onChangePaginationHandler: (updatedPagination: Pagination) => void;
 }
 
+export interface PaginationProps {
+    page_size?: number;
+    page_number?: number;
+    on_page_change?: (updated_pagination: Pagination) => void;
+}
+
 export interface HeadingProps
     extends React.DetailedHTMLProps<
         React.HTMLAttributes<HTMLHeadingElement>,