Merge pull request #323 from AElfProject/feature/refactor-2.0.0-Block…

…chain

feat: data cache

src/app/[chain]/block/[hash]/layout.tsx

@@ -0,0 +1,3 @@
+export default function Layout({ children }) {
+  return <div>{children}</div>;
+}

src/app/[chain]/block/[hash]/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)]" />;
+}

src/app/[chain]/blocks/blockList.tsx

@@ -9,7 +9,7 @@
 import HeadTitle from '@_components/HeaderTitle';
 import Table from '@_components/Table';
 import getColumns from './columnConfig';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { ColumnsType } from 'antd/es/table';
 import { useMobileAll } from '@_hooks/useResponsive';
 import { IBlocksResponse, IBlocksResponseItem } from '@_api/type';
@@ -18,6 +18,7 @@ import { fetchBlocks } from '@_api/fetchBlocks';
 import { useAppSelector } from '@_store';
 import { useParams } from 'next/navigation';
 import { Spin } from 'antd';
+import { reloadBlockListData } from '@/app/actions';
 
 export enum pageType {
   first,
@@ -82,6 +83,9 @@ export default function BlockList({ SSRData }) {
       chianId: chain,
     });
   }, [chain, timeFormat]);
+  useEffect(() => {
+    reloadBlockListData();
+  }, []);
 
   const pageMaxBlock = data[0]?.blockHeight;
   const pageMinBlock = data[data.length - 1]?.blockHeight;

src/app/[chain]/blocks/layout.tsx

@@ -0,0 +1,3 @@
+export default function Layout({ children }) {
+  return <div>{children}</div>;
+}

src/app/[chain]/blocks/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)]" />;
+}

src/app/[chain]/blocks/page.tsx

@@ -1,5 +1,6 @@
 import { fetchServerBlocks } from '@_api/fetchBlocks';
 import BlockList from './blockList';
+
 export default async function BlocksPage({ params }) {
   const data = await fetchServerBlocks({
     chainId: params.chain || 'AELF',
@@ -8,5 +9,3 @@ export default async function BlocksPage({ params }) {
   });
   return <BlockList SSRData={data} />;
 }
-export const revalidate = 1;
-export const dynamic = 'force-dynamic';

src/app/[chain]/token/[tokenSymbol]/layout.tsx

@@ -0,0 +1,3 @@
+export default function Layout({ children }) {
+  return <div>{children}</div>;
+}

src/app/[chain]/token/[tokenSymbol]/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)]" />;
+}

src/app/[chain]/tokens/layout.tsx

@@ -0,0 +1,3 @@
+export default function Layout({ children }) {
+  return <div>{children}</div>;
+}

src/app/[chain]/tokens/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)]" />;
+}

src/app/[chain]/tx/[hash]/layout.tsx

@@ -0,0 +1,3 @@
+export default function Layout({ children }) {
+  return <div>{children}</div>;
+}

src/app/[chain]/tx/[hash]/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)]" />;
+}

src/app/actions.ts

@@ -0,0 +1,7 @@
+'use server';
+
+import { revalidatePath } from 'next/cache';
+
+export async function reloadBlockListData() {
+  revalidatePath('/[chain]/blocks');
+}

src/app/layout.tsx

@@ -21,11 +21,15 @@ import StyleRegistry from './StyleRegistry';
 import { fetchCMS } from '@_api/fetchCMS';
 import { PublicEnvProvider } from 'next-runtime-env';
 import type { Viewport } from 'next';
-import { revalidatePath } from 'next/cache';
 
 export const metadata: Metadata = {
   title: 'AELF Block Explorer',
   description: 'AELF explorer',
+  icons: {
+    icon: '/favicon.ico',
+    shortcut: '/favicon.ico',
+    apple: '/favicon.ico',
+  },
 };
 async function fetchData() {
   await new Promise((resolve) => setTimeout(resolve, 1000));
@@ -38,17 +42,13 @@ async function fetchData() {
 }
 
 export default async function RootLayout({ children }: { children: React.ReactNode }) {
-  revalidatePath('/', 'layout');
   const data = await fetchData();
   const { price, previousPrice } = data;
   const headersList = headers();
   const isMobile = isMobileOnServer(headersList);
   const { headerMenuList, footerMenuList, chainList, networkList } = await fetchCMS();
   return (
     <html lang="en">
-      <head>
-        <link rel="icon" href="/favicon.ico" />
-      </head>
       <body>
         <div className="relative box-border min-h-screen bg-global-grey">
           <PublicEnvProvider>