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

…chain feat: data cache
AElfProject · Apr 29, 2024 · b4a67bc · b4a67bc
2 parents caa167f + 873676a
commit b4a67bc
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 3 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/app/[chain]/block/[hash]/page.tsx b/src/app/[chain]/block/[hash]/page.tsx
@@ -17,3 +17,6 @@ export default async function Block({ params }: { params: { hash: string; chain:
   console.log(data, 'data');
   return <Detail SSRData={data} />;
 }
+
+export const revalidate = 1;
+export const dynamic = 'force-dynamic';
diff --git a/src/app/[chain]/blocks/blockList.tsx b/src/app/[chain]/blocks/blockList.tsx
@@ -41,6 +41,7 @@ export default function BlockList({ SSRData }) {
   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;
@@ -71,7 +72,6 @@ export default function BlockList({ SSRData }) {
     [currentPage, data, defaultChain, totalPage],
   );
 
-  const { chain } = useParams();
   const [timeFormat, setTimeFormat] = useState<string>('Age');
   const columns = useMemo<ColumnsType<IBlocksResponseItem>>(() => {
     return getColumns({

diff --git a/src/app/[chain]/layout.tsx b/src/app/[chain]/layout.tsx
@@ -0,0 +1,3 @@
+export default function Layout({ children }) {
+  return <div>{children}</div>;
+}
diff --git a/src/app/[chain]/loading.tsx b/src/app/[chain]/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]/token/[tokenSymbol]/page.tsx b/src/app/[chain]/token/[tokenSymbol]/page.tsx
@@ -25,3 +25,6 @@ export default async function TokenSymbol({
     </div>
   );
 }
+
+export const revalidate = 1;
+export const dynamic = 'force-dynamic';
diff --git a/src/app/[chain]/tokens/page.tsx b/src/app/[chain]/tokens/page.tsx
@@ -22,3 +22,6 @@ export default async function TokensPage({ params }: { params: ChainId }) {
   });
   return <TokensList SSRData={data} />;
 }
+
+export const revalidate = 1;
+export const dynamic = 'force-dynamic';
diff --git a/src/app/api/revalidate/route.ts b/src/app/api/revalidate/route.ts
@@ -0,0 +1,8 @@
+import { NextRequest } from 'next/server';
+import { revalidateTag } from 'next/cache';
+
+export async function GET(request: NextRequest) {
+  const tag = request.nextUrl.searchParams.get('tag');
+  revalidateTag(tag || '');
+  return Response.json({ revalidated: true, now: Date.now() });
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -21,10 +21,11 @@ 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: 'Create Next App',
-  description: 'Generated by create next app',
+  title: 'AELF Block Explorer',
+  description: 'AELF explorer',
 };
 async function fetchData() {
   await new Promise((resolve) => setTimeout(resolve, 1000));
@@ -37,13 +38,17 @@ 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>