From 566e3e07b32fd5a7fcc01276a9099f92c0700f35 Mon Sep 17 00:00:00 2001
From: Peterbjx <jianxiong.bai@aelf.io>
Date: Mon, 29 Apr 2024 18:33:14 +0800
Subject: [PATCH] feat: blocks and transactions list

---
 src/_api/fetchCMS.ts                          |  2 +-
 src/_api/fetchTransactions.ts                 | 25 ++++++-
 src/_api/list.ts                              |  3 +-
 src/_api/type.ts                              |  8 ++-
 src/_components/AddressDetail/index.tsx       |  2 +-
 src/_components/TransactionsView/index.tsx    |  6 +-
 src/_hooks/useTable.ts                        | 13 ++--
 .../block/[hash]/_components/detail.tsx       |  2 +-
 src/app/[chain]/blocks/blockList.tsx          | 32 ++-------
 src/app/[chain]/blocks/page.tsx               |  4 ++
 .../transactions/columnConfig.tsx             |  0
 src/app/[chain]/transactions/layout.tsx       |  3 +
 src/app/{ => [chain]}/transactions/list.tsx   | 67 ++++++++++++-------
 src/app/[chain]/transactions/loading.tsx      |  7 ++
 src/app/[chain]/transactions/page.tsx         | 23 +++++++
 src/app/actions.ts                            |  1 +
 src/app/layout.tsx                            |  2 -
 src/app/transactions/mock.ts                  | 26 -------
 src/app/transactions/page.tsx                 | 14 ----
 src/middleware.ts                             |  6 +-
 20 files changed, 138 insertions(+), 108 deletions(-)
 rename src/app/{ => [chain]}/transactions/columnConfig.tsx (100%)
 create mode 100644 src/app/[chain]/transactions/layout.tsx
 rename src/app/{ => [chain]}/transactions/list.tsx (51%)
 create mode 100644 src/app/[chain]/transactions/loading.tsx
 create mode 100644 src/app/[chain]/transactions/page.tsx
 delete mode 100644 src/app/transactions/mock.ts
 delete mode 100644 src/app/transactions/page.tsx

diff --git a/src/_api/fetchCMS.ts b/src/_api/fetchCMS.ts
index 385cd1ad..e96b6a15 100644
--- a/src/_api/fetchCMS.ts
+++ b/src/_api/fetchCMS.ts
@@ -5,7 +5,7 @@ export async function fetchCMS() {
   const headerMenuList = data.headerMenuList.filter((item) => {
     if (item.headerMenu_id.path === 'blockchain') {
       item.headerMenu_id.children = item.headerMenu_id.children.filter((child) => {
-        return child.label === 'Blocks';
+        return child.label === 'Blocks' || child.label === 'Transactions';
       });
     }
     return item.headerMenu_id?.path === 'blockchain' || item.headerMenu_id?.path === '/tokens';
diff --git a/src/_api/fetchTransactions.ts b/src/_api/fetchTransactions.ts
index fd4db3db..dc3778ff 100644
--- a/src/_api/fetchTransactions.ts
+++ b/src/_api/fetchTransactions.ts
@@ -1,5 +1,10 @@
 import request from '@_api';
-import { ITransactionDetailRequestParams, ITransactionDetailDataList } from './type';
+import {
+  ITransactionDetailRequestParams,
+  ITransactionDetailDataList,
+  TTransactionsListRequestParams,
+  ITransactionsResponse,
+} from './type';
 
 export async function fetchTransactionDetails(
   params: ITransactionDetailRequestParams,
@@ -10,3 +15,21 @@ export async function fetchTransactionDetails(
   const data = result?.data;
   return data;
 }
+
+export async function fetchTransactionList(params: TTransactionsListRequestParams): Promise<ITransactionsResponse> {
+  const result = await request.tx.getTransactionList({
+    params: params,
+  });
+  const data = result?.data;
+  return data;
+}
+
+export async function fetchServerTransactionList(
+  params: TTransactionsListRequestParams,
+): Promise<ITransactionsResponse> {
+  const result = await request.tx.getServerTransactionList({
+    params: params,
+  });
+  const data = result?.data;
+  return data;
+}
diff --git a/src/_api/list.ts b/src/_api/list.ts
index 02082684..9d438ca1 100644
--- a/src/_api/list.ts
+++ b/src/_api/list.ts
@@ -19,7 +19,8 @@ const Block_API_List = {
 };
 
 const Transaction_API_List = {
-  getTransaction: '',
+  getTransactionList: `${BASE_API}/app/blockchain/transactions`,
+  getServerTransactionList: `${SERVER_BASE_API}/app/blockchain/transactions`,
   getTransactionDetail: `${SERVER_BASE_API}/app/blockchain/transactionDetail`,
 };
 
diff --git a/src/_api/type.ts b/src/_api/type.ts
index c85f7796..1ce616db 100644
--- a/src/_api/type.ts
+++ b/src/_api/type.ts
@@ -70,7 +70,7 @@ export interface ITransactionDetailRequestParams extends RequestInit {
 
 export interface IBlocksRequestParams extends RequestInit {
   chainId: TChainID;
-  blockHeight?: number;
+  skipCount: number;
   maxResultCount: number;
 }
 
@@ -218,3 +218,9 @@ export interface TTokenListRequestParams extends RequestInit {
   sort: SortEnum;
   orderBy: string;
 }
+
+export interface TTransactionsListRequestParams extends RequestInit {
+  chainId: TChainID;
+  skipCount: number;
+  maxResultCount: number;
+}
diff --git a/src/_components/AddressDetail/index.tsx b/src/_components/AddressDetail/index.tsx
index 155dfb3b..9785d77f 100644
--- a/src/_components/AddressDetail/index.tsx
+++ b/src/_components/AddressDetail/index.tsx
@@ -9,7 +9,7 @@ import { numberFormatter } from '@_utils/formatter';
 import addressFormat, { hiddenAddress } from '@_utils/urlUtils';
 import { TitleEnum } from '@_types/commonDetail';
 import EPTabs from '../EPTabs/index';
-import TransctionList from '@app/transactions/list';
+import TransctionList from '@app/[chain]/transactions/list';
 import TokenTransfers from '@_components/TokenTransfers';
 import NFTTransfers from '@_components/NFTTransfers';
 import History from './components/History';
diff --git a/src/_components/TransactionsView/index.tsx b/src/_components/TransactionsView/index.tsx
index 261881e2..0e6f6ba4 100644
--- a/src/_components/TransactionsView/index.tsx
+++ b/src/_components/TransactionsView/index.tsx
@@ -4,14 +4,18 @@ import './index.css';
 import Link from 'next/link';
 import Status from '@_components/TransactionsStatus';
 import { addSymbol, divDecimals } from '@_utils/formatter';
+import { useParams } from 'next/navigation';
 export default function TransactionsView({ record }) {
+  const { chain } = useParams();
   const PreviewCard = () => {
     return (
       <div className="preview-view">
         <div className="header flex items-center justify-between p-2">
           <div className="title text-sm leading-[22px] text-base-100">Preview</div>
           <div className="more text-xs leading-5">
-            <Link className="inline-block text-xs leading-5" href={`tx/${record.transactionId}`}>
+            <Link
+              className="inline-block text-xs leading-5"
+              href={`/${chain}/tx/${record.transactionId}?blockHeight=${record.blockHeight}`}>
               See More Details
             </Link>
           </div>
diff --git a/src/_hooks/useTable.ts b/src/_hooks/useTable.ts
index 5dd9881b..1c938315 100644
--- a/src/_hooks/useTable.ts
+++ b/src/_hooks/useTable.ts
@@ -91,11 +91,6 @@ export default function useTableData<T, U>({
     setCurrentPage(1);
     setPageSize(defaultPageSize);
   };
-
-  const pageChange = async (page: number) => {
-    setCurrentPage(page);
-  };
-
   useEffect(() => {
     console.log(mounted.current, 'mounted.current');
     if (!mountedRequest && mounted.current) {
@@ -105,9 +100,13 @@ export default function useTableData<T, U>({
     getData({ page: currentPage, pageSize: pageSize, sort: sortedInfo, searchText });
   }, [currentPage, pageSize, sortedInfo, searchText, getData, mountedRequest]);
 
-  const pageSizeChange = async (size) => {
+  const pageChange = async (page: number) => {
+    setCurrentPage(page);
+  };
+
+  const pageSizeChange = async (page, size) => {
     setPageSize(size);
-    setCurrentPage(1);
+    setCurrentPage(page);
   };
 
   return {
diff --git a/src/app/[chain]/block/[hash]/_components/detail.tsx b/src/app/[chain]/block/[hash]/_components/detail.tsx
index 5f142425..d53c76e6 100644
--- a/src/app/[chain]/block/[hash]/_components/detail.tsx
+++ b/src/app/[chain]/block/[hash]/_components/detail.tsx
@@ -14,7 +14,7 @@ import BaseInfo from './baseinfo';
 import ExtensionInfo from './ExtensionInfo';
 import type { ITabsProps } from 'aelf-design';
 import Table from '@_components/Table';
-import getColumns from '@app/transactions/columnConfig';
+import getColumns from '@app/[chain]/transactions/columnConfig';
 import { ColumnsType } from 'antd/es/table';
 import MoreContainer from '@_components/MoreContainer';
 import EPTabs from '@_components/EPTabs';
diff --git a/src/app/[chain]/blocks/blockList.tsx b/src/app/[chain]/blocks/blockList.tsx
index 34228494..796db722 100644
--- a/src/app/[chain]/blocks/blockList.tsx
+++ b/src/app/[chain]/blocks/blockList.tsx
@@ -19,6 +19,7 @@ import { useAppSelector } from '@_store';
 import { useParams } from 'next/navigation';
 import { Spin } from 'antd';
 import { reloadBlockListData } from '@/app/actions';
+import { getPageNumber } from '@_utils/formatter';
 
 export enum pageType {
   first,
@@ -41,24 +42,13 @@ export default function BlockList({ SSRData }) {
   const [total, setTotal] = useState<number>(SSRData.total);
   const [data, setData] = useState<IBlocksResponseItem[]>(SSRData.blocks);
   const { defaultChain } = useAppSelector((state) => state.getChainId);
-  const totalPage = Math.floor((total + pageSize - 1) / pageSize) || 1;
   const { chain } = useParams();
   const fetchData = useCallback(
-    async (pageSize, type: pageType) => {
-      let blockHeight;
-      if (type === pageType.next) {
-        blockHeight = Math.round(data[data.length - 1].blockHeight - 1);
-      } else if (type === pageType.prev) {
-        blockHeight = Math.round(data[0].blockHeight + 1);
-      } else if (type === pageType.last) {
-        blockHeight = Math.round(data[0].blockHeight - pageSize * (totalPage - currentPage));
-      } else {
-        blockHeight = undefined;
-      }
+    async (page, size) => {
       const params = {
         chainId: defaultChain || 'AELF',
-        blockHeight: blockHeight,
-        maxResultCount: pageSize,
+        skipCount: getPageNumber(page, size),
+        maxResultCount: size,
       };
       setLoading(true);
       try {
@@ -70,7 +60,7 @@ export default function BlockList({ SSRData }) {
       }
       setLoading(false);
     },
-    [currentPage, data, defaultChain, totalPage],
+    [defaultChain],
   );
 
   const [timeFormat, setTimeFormat] = useState<string>('Age');
@@ -92,21 +82,13 @@ export default function BlockList({ SSRData }) {
 
   const pageChange = async (page: number) => {
     setCurrentPage(page);
-    if (page === totalPage) {
-      fetchData(pageSize, pageType.last);
-    } else if (page === 1) {
-      fetchData(pageSize, pageType.first);
-    } else if (page > currentPage) {
-      fetchData(pageSize, pageType.next);
-    } else {
-      fetchData(pageSize, pageType.prev);
-    }
+    fetchData(page, pageSize);
   };
 
   const pageSizeChange = async (page: number, pageSize: number) => {
     setPageSize(pageSize);
     setCurrentPage(page);
-    fetchData(pageSize, pageType.first);
+    fetchData(page, pageSize);
   };
 
   const multiTitle = useMemo(() => {
diff --git a/src/app/[chain]/blocks/page.tsx b/src/app/[chain]/blocks/page.tsx
index 75cf7ec2..64fb479d 100644
--- a/src/app/[chain]/blocks/page.tsx
+++ b/src/app/[chain]/blocks/page.tsx
@@ -5,7 +5,11 @@ export default async function BlocksPage({ params }) {
   const data = await fetchServerBlocks({
     chainId: params.chain || 'AELF',
     maxResultCount: 25,
+    skipCount: 0,
     cache: 'no-store',
   });
   return <BlockList SSRData={data} />;
 }
+
+export const revalidate = 1;
+export const dynamic = 'force-dynamic';
diff --git a/src/app/transactions/columnConfig.tsx b/src/app/[chain]/transactions/columnConfig.tsx
similarity index 100%
rename from src/app/transactions/columnConfig.tsx
rename to src/app/[chain]/transactions/columnConfig.tsx
diff --git a/src/app/[chain]/transactions/layout.tsx b/src/app/[chain]/transactions/layout.tsx
new file mode 100644
index 00000000..1ad5b9a4
--- /dev/null
+++ b/src/app/[chain]/transactions/layout.tsx
@@ -0,0 +1,3 @@
+export default function Layout({ children }) {
+  return <div>{children}</div>;
+}
diff --git a/src/app/transactions/list.tsx b/src/app/[chain]/transactions/list.tsx
similarity index 51%
rename from src/app/transactions/list.tsx
rename to src/app/[chain]/transactions/list.tsx
index 048cd6b1..fecf5385 100644
--- a/src/app/transactions/list.tsx
+++ b/src/app/[chain]/transactions/list.tsx
@@ -2,35 +2,43 @@
 import HeadTitle from '@_components/HeaderTitle';
 import Table from '@_components/Table';
 import getColumns from './columnConfig';
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { ColumnsType } from 'antd/es/table';
-import fetchData from './mock';
-import { useMobileContext } from '@app/pageProvider';
-import useTableData from '@_hooks/useTable';
-import useResponsive, { useMobileAll } from '@_hooks/useResponsive';
+import { useMobileAll } from '@_hooks/useResponsive';
 import { pageSizeOption } from '@_utils/contant';
-import { ITransactionsResponseItem } from '@_api/type';
-interface ITransactionsData {
-  total: number;
-  data: ITransactionsResponseItem[];
-}
+import { ITransactionsResponseItem, TChainID } from '@_api/type';
+import { useParams } from 'next/navigation';
+import { fetchTransactionList } from '@_api/fetchTransactions';
+import { getPageNumber } from '@_utils/formatter';
 
 export default function List({ SSRData, showHeader = true }) {
+  console.log(SSRData, 'transactionSSRData');
   const { isMobile } = useMobileAll();
-  const disposeData = (data) => {
-    return {
-      total: data.total,
-      list: [...data.data],
-    };
-  };
-  const { loading, total, data, currentPage, pageSize, pageChange, pageSizeChange } = useTableData<
-    ITransactionsResponseItem,
-    ITransactionsData
-  >({
-    SSRData: disposeData(SSRData),
-    fetchData: fetchData,
-    disposeData: disposeData,
-  });
+
+  const { chain } = useParams();
+  const fetchData = useCallback(
+    async (page, pageSize) => {
+      const params = {
+        chainId: chain as TChainID,
+        skipCount: getPageNumber(page, pageSize),
+        maxResultCount: pageSize,
+      };
+      try {
+        const res = await fetchTransactionList(params);
+        setTotal(res.total);
+        setData(res.transactions);
+      } catch (error) {
+        setLoading(false);
+      }
+    },
+    [chain],
+  );
+
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const [pageSize, setPageSize] = useState<number>(25);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [total, setTotal] = useState<number>(SSRData.total);
+  const [data, setData] = useState<ITransactionsResponseItem[]>(SSRData.transactions);
   const [timeFormat, setTimeFormat] = useState<string>('Age');
   const columns = useMemo<ColumnsType<ITransactionsResponseItem>>(() => {
     return getColumns({
@@ -50,6 +58,17 @@ export default function List({ SSRData, showHeader = true }) {
     return `Showing the last 500k records`;
   }, []);
 
+  const pageChange = async (page: number) => {
+    setCurrentPage(page);
+    fetchData(page, pageSize);
+  };
+
+  const pageSizeChange = async (page, size) => {
+    setPageSize(size);
+    setCurrentPage(page);
+    fetchData(page, size);
+  };
+
   return (
     <div>
       {showHeader && <HeadTitle content="Transactions"></HeadTitle>}
diff --git a/src/app/[chain]/transactions/loading.tsx b/src/app/[chain]/transactions/loading.tsx
new file mode 100644
index 00000000..2b09afda
--- /dev/null
+++ b/src/app/[chain]/transactions/loading.tsx
@@ -0,0 +1,7 @@
+'use client';
+import { useIsGovernance } from '@_hooks/useIsPath';
+import { Skeleton } from 'antd';
+export default function Loading() {
+  const isGovernance = useIsGovernance();
+  return !isGovernance && <Skeleton className="main-skeleton top-[104px] h-[calc(100vh-474px)]" />;
+}
diff --git a/src/app/[chain]/transactions/page.tsx b/src/app/[chain]/transactions/page.tsx
new file mode 100644
index 00000000..22ef414a
--- /dev/null
+++ b/src/app/[chain]/transactions/page.tsx
@@ -0,0 +1,23 @@
+/*
+ * @author: Peterbjx
+ * @Date: 2023-08-15 15:58:11
+ * @LastEditors: Peterbjx
+ * @LastEditTime: 2023-08-15 16:36:16
+ * @Description: transactions
+ */
+
+import { fetchServerTransactionList } from '@_api/fetchTransactions';
+import TransactionsList from './list';
+export default async function BlocksPage({ params }) {
+  const { chain } = params;
+  const data = await fetchServerTransactionList({
+    chainId: chain,
+    skipCount: 0,
+    maxResultCount: 25,
+    cache: 'no-store',
+  });
+  return <TransactionsList SSRData={data} />;
+}
+
+export const revalidate = 1;
+export const dynamic = 'force-dynamic';
diff --git a/src/app/actions.ts b/src/app/actions.ts
index b92a79f3..1713fe9c 100644
--- a/src/app/actions.ts
+++ b/src/app/actions.ts
@@ -4,4 +4,5 @@ import { revalidatePath } from 'next/cache';
 
 export async function reloadBlockListData() {
   revalidatePath('/[chain]/blocks');
+  revalidatePath('/', 'layout');
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 8d7c29fa..c1da7a79 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -27,8 +27,6 @@ export const metadata: Metadata = {
   description: 'AELF explorer',
   icons: {
     icon: '/favicon.ico',
-    shortcut: '/favicon.ico',
-    apple: '/favicon.ico',
   },
 };
 async function fetchData() {
diff --git a/src/app/transactions/mock.ts b/src/app/transactions/mock.ts
deleted file mode 100644
index a39f8138..00000000
--- a/src/app/transactions/mock.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-const data = Array.from(new Array(100).keys()).map((item) => {
-  return {
-    status: 'Failed',
-    transactionId: item + 'cc764efe0d5b8f9a73fffa3aecc7e3a26d715a715a764af464dd80dd7f2ca03e',
-    blockHeight: 165018684,
-    method: 'DonateResourceToken',
-    timestamp: '2023-08-15T08:42:41.1123602Z',
-    from: JSON.stringify({
-      name: 'AELF',
-      address: 'YgRDkJECvrJsfcrM3KbjMjNSPfZPhmbrPjTpssWiWZmGxGiWy',
-    }),
-    to: JSON.stringify({
-      name: 'AELF',
-      address: 'AELF.Contract.Token',
-    }),
-    transactionValue: 0,
-    transactionFee: 0,
-  };
-});
-export default async function fetchData({ page, pageSize }): Promise<any> {
-  await new Promise((resolve) => setTimeout(resolve, 1000));
-  return {
-    total: 100,
-    data: data.slice((page - 1) * pageSize, page * pageSize),
-  };
-}
diff --git a/src/app/transactions/page.tsx b/src/app/transactions/page.tsx
deleted file mode 100644
index 21d300fe..00000000
--- a/src/app/transactions/page.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-/*
- * @author: Peterbjx
- * @Date: 2023-08-15 15:58:11
- * @LastEditors: Peterbjx
- * @LastEditTime: 2023-08-15 16:36:16
- * @Description: transactions
- */
-
-import TransactionsList from './list';
-import fetchData from './mock';
-export default async function BlocksPage() {
-  const data = await fetchData({ page: 1, pageSize: 25 });
-  return <TransactionsList SSRData={data} />;
-}
diff --git a/src/middleware.ts b/src/middleware.ts
index 886e2b2c..cdf461d3 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -21,6 +21,6 @@ export function middleware(request: NextRequest) {
   // return NextResponse.redirect(new URL('/blocks', request.url));
 }
 
-export const config = {
-  matcher: '/search/:path*',
-};
+// export const config = {
+//   matcher: '/search/:path*',
+// };