Skip to content

Commit 0eaefd3

Browse files
bend-nbend-n
committed
paginate more pages
1 parent dbe06b0 commit 0eaefd3

File tree

9 files changed

+680
-451
lines changed

9 files changed

+680
-451
lines changed

‎package-lock.json

+519-256
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/accounts/page.tsx

+26-63
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,12 @@ import React, { Suspense, useState } from "react";
55
import AccountsTable from "@/components/AccountsTable";
66
import { Card, CardBody, CardFooter } from "@nextui-org/react";
77
import { User, Users } from "lucide-react";
8-
8+
import dynamic from "next/dynamic";
9+
const Odometer = dynamic(() => import("react-odometerjs"), {
10+
ssr: false,
11+
loading: () => <div>0</div>,
12+
});
13+
import "../blocks/odo.css";
914
import { columns } from "../data/accounts";
1015
import PaginationControls from "@/components/PaginationControls";
1116
import { useSearchParams } from "next/navigation";
@@ -16,67 +21,20 @@ import { HashLoader, ScaleLoader } from "react-spinners";
1621

1722
function Accounts() {
1823
const PAGE_SIZE = useSearchParams().get("page") ?? "1";
19-
const [currentPage, setCurrentPage] = useState(parseInt(PAGE_SIZE));
20-
const [loading, setLoading] = useState(false);
24+
const [page, setPage] = useState(parseInt(PAGE_SIZE));
2125
const result = get_accounts();
2226
let accounts: Account[];
2327

2428
switch (result.state) {
25-
case "loading": return <div className="px-4 sm:px-20 lg:px-80 mt-6">
26-
<div className="flex items-center justify-between mb-6">
27-
<p className="text-2xl">Accounts</p>
28-
<div className="flex justify-center items-center">
29-
<SearchInput />
30-
</div>
31-
</div>
32-
<div className="flex flex-row gap-3">
33-
<Card className="w-full p-4">
34-
<CardBody className="flex flex-row gap-3">
35-
<div className="w-16 h-16 bg-primary bg-opacity-20 rounded-full flex justify-center items-center">
36-
<Users color="#00A4E5" size="36px" />
37-
</div>
38-
<div className="flex flex-col">
39-
<p className="text-sm">Holders</p>
40-
<ScaleLoader width={13} radius={15} style={{ alignContent: "center" }} color={"#00A3E4"} />
41-
</div>
42-
</CardBody>
43-
</Card>
44-
45-
<Card className="w-full p-4">
46-
<CardBody className="flex flex-row gap-3">
47-
{/* <Image width={52} height={52} alt='account-img' src={account.img} /> */}
48-
<div className="w-16 h-16 bg-primary bg-opacity-20 rounded-full flex justify-center items-center">
49-
<User color="#00A4E5" size="36px" />
50-
</div>
51-
<div className="flex flex-col">
52-
<p className="text-sm">Active Holders</p>
53-
<p className="text-2xl text-default-500">-</p>
54-
</div>
55-
</CardBody>
56-
</Card>
57-
</div>
58-
<Card className="mt-4">
59-
<CardBody className="h-40">
60-
<HashLoader size={150} style={{ alignContent: "center" }} color={"#00A3E4"} />
61-
</CardBody>
62-
<CardFooter className="flex justify-end">
63-
</CardFooter>
64-
</Card>
65-
</div>
66-
case "error": return <p>Error</p>
67-
case "ok": accounts = result.data;
29+
case "loading":
30+
accounts = [];
31+
break;
32+
case "error":
33+
return <p>Error</p>;
34+
case "ok":
35+
accounts = result.data;
6836
}
6937

70-
const itemsPerPage = 20;
71-
const totalPages = Math.ceil(accounts.length / itemsPerPage);
72-
73-
const handlePageChange = (newPage: number) => {
74-
setLoading(true);
75-
setTimeout(() => {
76-
setLoading(false);
77-
}, 1000);
78-
setCurrentPage(newPage);
79-
};
8038
return (
8139
<div className="px-4 sm:px-20 lg:px-80 mt-6">
8240
<div className="flex items-center justify-between mb-6">
@@ -88,20 +46,21 @@ function Accounts() {
8846
<div className="flex flex-row gap-3">
8947
<Card className="w-full p-4">
9048
<CardBody className="flex flex-row gap-3">
91-
{/* <Image width={52} height={52} alt='account-img' src={account.img} /> */}
49+
{/* <Image width={52} height={52} alt="account-img" src={account.img} /> */}
9250
<div className="w-16 h-16 bg-primary bg-opacity-20 rounded-full flex justify-center items-center">
9351
<Users color="#00A4E5" size="36px" />
9452
</div>
9553
<div className="flex flex-col">
9654
<p className="text-sm">Holders</p>
97-
<p className="text-2xl text-default-500">{accounts.length - 1}</p>
55+
<p className="text-2xl text-default-500">
56+
<Odometer value={accounts.length} />
57+
</p>
9858
</div>
9959
</CardBody>
10060
</Card>
10161

10262
<Card className="w-full p-4">
10363
<CardBody className="flex flex-row gap-3">
104-
{/* <Image width={52} height={52} alt='account-img' src={account.img} /> */}
10564
<div className="w-16 h-16 bg-primary bg-opacity-20 rounded-full flex justify-center items-center">
10665
<User color="#00A4E5" size="36px" />
10766
</div>
@@ -114,13 +73,17 @@ function Accounts() {
11473
</div>
11574
<Card className="mt-4">
11675
<CardBody>
117-
<AccountsTable users={accounts} columns={columns} />
76+
<AccountsTable
77+
users={accounts.slice((page - 1) * 20, page * 20)}
78+
columns={columns}
79+
/>
11880
</CardBody>
11981
<CardFooter className="flex justify-end">
12082
<PaginationControls
121-
currentPage={currentPage}
122-
totalPages={totalPages}
123-
onPageChange={handlePageChange}
83+
persistent
84+
currentPage={page}
85+
max={accounts.length / 20}
86+
onPageChange={setPage}
12487
/>
12588
</CardFooter>
12689
</Card>

‎src/app/blocks/page.tsx

+6-36
Original file line numberDiff line numberDiff line change
@@ -69,42 +69,12 @@ function Blocks() {
6969
<CardBody>
7070
<BlocksTable users={blocks} loading={loading} columns={columns} />
7171
</CardBody>
72-
<CardFooter className="flex">
73-
<Button
74-
style={{ marginRight: "1em" }}
75-
color="primary"
76-
isDisabled={currentPage == 1}
77-
isIconOnly
78-
onPress={() => {
79-
router.push("?page=1");
80-
setCurrentPage(1);
81-
}}
82-
>
83-
<ArrowBigLeftDash size="sm" color="white" />
84-
</Button>
85-
<Button
86-
color="primary"
87-
isDisabled={currentPage == 1}
88-
isIconOnly
89-
onPress={() => {
90-
router.push(`?page=${currentPage - 1}`);
91-
setCurrentPage(currentPage - 1);
92-
}}
93-
>
94-
<ArrowLeft color="white" size="sm" />
95-
</Button>
96-
<div style={{ width: "100%" }} />
97-
<Button
98-
isIconOnly
99-
color="primary"
100-
style={{ justifySelf: "flex-end" }}
101-
onPress={() => {
102-
router.push(`?page=${currentPage + 1}`);
103-
setCurrentPage(currentPage + 1);
104-
}}
105-
>
106-
<ArrowRight size="sm" color="white" />
107-
</Button>
72+
<CardFooter>
73+
<PaginationControls
74+
persistent
75+
currentPage={currentPage}
76+
onPageChange={setCurrentPage}
77+
/>
10878
</CardFooter>
10979
</Card>
11080
</div>

‎src/app/evm/contracts/page.tsx

+36-11
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,29 @@
11
"use client";
22

3-
import React from "react";
3+
import React, { useState } from "react";
44

55
import Image from "next/image";
66

77
import ExplorerTable from "@/components/ExplorerTable";
8-
import { Card, CardBody, Tab, Tabs } from "@nextui-org/react";
9-
8+
import { Card, CardBody, CardFooter, Tab, Tabs } from "@nextui-org/react";
9+
import dynamic from "next/dynamic";
10+
const Odometer = dynamic(() => import("react-odometerjs"), {
11+
ssr: false,
12+
loading: () => <div>0</div>,
13+
});
14+
import "../../blocks/odo.css";
1015
import { columns } from "../../data/evm_contracts";
1116
import { FileCheck2, FileBadge } from "lucide-react";
1217
import { get_evm_contracts } from "@/graphql/queries";
1318
import { Contract } from "@/graphql/types";
19+
import PaginationControls from "@/components/PaginationControls";
1420

1521
function EvmContracts() {
1622
const accounts = [
1723
{
1824
id: 1,
1925
title: "Contract",
20-
value: "12",
26+
value: 0,
2127
img: <FileCheck2 size={30} color="#00A4E5" />,
2228
},
2329
{
@@ -53,15 +59,21 @@ function EvmContracts() {
5359
];
5460

5561
const result = get_evm_contracts();
62+
let [page, setPage] = useState(1);
5663
let data: Contract[];
5764
switch (result.state) {
58-
case "loading": return <p>Loading...</p>
59-
case "error": return <p>Error...</p>
60-
case "ok": data = result.data;
65+
case "loading": {
66+
data = [];
67+
break;
68+
}
69+
case "error":
70+
return <p>Error...</p>;
71+
case "ok":
72+
data = result.data;
6173
}
62-
accounts[0].value = data.length.toLocaleString();
74+
accounts[0].value = data.length;
6375
return (
64-
<div className="px-4 sm:px-20 md:px-40 lg:px-80 mt-6">
76+
<div className="px-4 sm:px-20 md:px-40 lg:px-40 mt-6">
6577
<div className="flex items-center justify-between mb-6">
6678
<p className="text-xl w-80">EVM Contracts</p>
6779
<></>
@@ -78,7 +90,7 @@ function EvmContracts() {
7890
<p className="text-sm text-default-500">{account.title}</p>
7991
<p className="text-lg">
8092
{account.value !== null && account.value !== undefined ? (
81-
<span>{account.value}</span>
93+
<span>{<Odometer value={account.value} />}</span>
8294
) : (
8395
<span>-</span>
8496
)}
@@ -92,7 +104,10 @@ function EvmContracts() {
92104
<CardBody>
93105
<Tabs aria-label="Options" variant="underlined" color="primary">
94106
<Tab key="contracts" title="Contracts">
95-
<ExplorerTable users={data} columns={columns} />
107+
<ExplorerTable
108+
users={data.slice((page - 1) * 20, page * 20)}
109+
columns={columns}
110+
/>
96111
</Tab>
97112
<Tab key="verified" title="Verified Contracts">
98113
{/* <ExplorerTable users={users} columns={columns} /> */}
@@ -101,6 +116,16 @@ function EvmContracts() {
101116
</Tabs>
102117
</CardBody>
103118
</Card>
119+
<Card>
120+
<CardFooter>
121+
<PaginationControls
122+
persistent
123+
max={data.length / 20}
124+
currentPage={page}
125+
onPageChange={setPage}
126+
/>
127+
</CardFooter>
128+
</Card>
104129
</div>
105130
);
106131
}

‎src/app/extrinsics/page.tsx

+28-38
Original file line numberDiff line numberDiff line change
@@ -9,72 +9,62 @@ import { columns } from "../data/extrinsics";
99
import PaginationControls from "@/components/PaginationControls";
1010
import { useSearchParams } from "next/navigation";
1111
import { useExtrinsic } from "@/context/ExtrinsicsContext";
12+
import dynamic from "next/dynamic";
13+
const Odometer = dynamic(() => import("react-odometerjs"), {
14+
ssr: false,
15+
loading: () => <div>0</div>,
16+
});
17+
import "../blocks/odo.css";
1218
import SearchInput from "@/components/SearchInput";
1319
import { get_latest_extrinsics } from "@/graphql/queries";
1420
import { Extrinsic } from "@/graphql/types";
1521

16-
let signedExtrinsics = null;
1722
function Extrinsics() {
18-
const PAGE_SiZE = useSearchParams().get("page") ?? "1";
19-
const [currentPage, setCurrentPage] = useState(parseInt(PAGE_SiZE));
20-
const [loading, setLoading] = useState(false);
21-
const [extrinsics, setExtrinsics] = useState<Extrinsic[]>([]);
22-
const { result, refresh } = get_latest_extrinsics(20, parseInt(PAGE_SiZE));
23+
const PAGE_SIZE = useSearchParams().get("page") ?? "1";
24+
const [page, setPage] = useState(parseInt(PAGE_SIZE));
25+
const { extrinsic } = useExtrinsic();
26+
console.log((page - 1) * 20);
27+
const { result, refresh } = get_latest_extrinsics(20, (page - 1) * 20);
2328
let data: undefined | Extrinsic[];
29+
2430
useEffect(() => {
25-
setLoading(true);
2631
const intervalId = setInterval(() => {
2732
refresh();
28-
setExtrinsics(data!);
2933
}, 1000);
3034

3135
return () => clearInterval(intervalId);
32-
}, [data, refresh]);
36+
}, [refresh]);
3337

3438
switch (result.state) {
35-
case "loading": return <p>loading</p>
36-
case "error": return <p>Error {result.message}</p>
37-
case "ok": data = result.data;
39+
case "loading":
40+
data = [];
41+
break;
42+
case "error":
43+
return <p>Error {result.message}</p>;
44+
case "ok":
45+
data = result.data;
3846
}
39-
// useEffect(() => {
40-
// const intervalId = setInterval(() => {
41-
// refetch();
42-
// }, 1000);
43-
44-
// return () => clearInterval(intervalId);
45-
// }, [refetch]);
46-
47-
// if (loading) return <p>Loading...</p>;
48-
// if (error) return <p>Error: {error.message}</p>;
49-
// console.log("extrinsics", data.extrinsics);
50-
51-
const itemsPerPage = 20;
52-
const totalPages = Math.ceil(data?.length / itemsPerPage);
53-
const handlePageChange = (newPage: number) => {
54-
setLoading(true);
55-
setTimeout(() => {
56-
setLoading(false);
57-
}, 1000);
58-
setCurrentPage(newPage);
59-
};
6047

6148
return (
6249
<div className="px-4 sm:px-20 lg:px-80 mt-4">
6350
<div className="flex items-center justify-between mb-6">
64-
<p className="text-2xl">Extrinsics</p>
51+
<p className="text-2xl">
52+
<Odometer value={extrinsic} /> Extrinsics
53+
</p>
6554
<div className="flex justify-center items-center">
6655
<SearchInput />
6756
</div>
6857
</div>
6958
<Card>
7059
<CardBody>
71-
<ExtrinsicsTable users={extrinsics} columns={columns} />
60+
<ExtrinsicsTable users={data} columns={columns} />
7261
</CardBody>
7362
<CardFooter className="flex justify-end">
7463
<PaginationControls
75-
currentPage={currentPage}
76-
totalPages={totalPages}
77-
onPageChange={handlePageChange}
64+
persistent
65+
currentPage={page}
66+
max={extrinsic / 20}
67+
onPageChange={setPage}
7868
/>
7969
</CardFooter>
8070
</Card>

‎src/components/ExtrinsicsTable.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,6 @@ interface BlocksTableProps {
2525
}
2626

2727
export default function ExtrinsicsTable({ users, columns }: BlocksTableProps) {
28-
console.log("extrin", users);
29-
3028
const renderCell = React.useCallback((user: Extrinsic, columnKey: React.Key) => {
3129
const cellValue = user[columnKey as keyof Extrinsic];
3230

0 commit comments

Comments
 (0)