remove useless fields on /accounts

selendra · Feb 24, 2024 · 9ced594 · 9ced594
1 parent 0b5f5c0
commit 9ced594
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 60 deletions.
diff --git a/src/app/accounts/page.tsx b/src/app/accounts/page.tsx
@@ -1,43 +1,74 @@
 "use client";
 
-import React, { Suspense, useEffect, useState } from "react";
+import React, { Suspense, useState } from "react";
 
 import AccountsTable from "@/components/AccountsTable";
-import { gql, useQuery } from "@apollo/client";
 import { Card, CardBody, CardFooter } from "@nextui-org/react";
 import { User, Users } from "lucide-react";
 
 import { columns } from "../data/accounts";
 import PaginationControls from "@/components/PaginationControls";
 import { useSearchParams } from "next/navigation";
 import SearchInput from "@/components/SearchInput";
-import { GET_ACCOUNTS } from "@/graphql/queries";
+import { get_accounts } from "@/graphql/queries";
+import { Account } from "@/graphql/types";
+import { HashLoader, ScaleLoader } from "react-spinners";
 
 function Accounts() {
-  const PAGE_SiZE = useSearchParams().get("page") ?? "1";
-  const [currentPage, setCurrentPage] = useState(parseInt(PAGE_SiZE));
+  const PAGE_SIZE = useSearchParams().get("page") ?? "1";
+  const [currentPage, setCurrentPage] = useState(parseInt(PAGE_SIZE));
   const [loading, setLoading] = useState(false);
-  const [accounts, setAccounts] = useState([]);
-  const { error, data } = useQuery(GET_ACCOUNTS);
-  // if (loading) return <p>Loading...</p>;
-  // if (error) return <p>Error :(</p>;
-  // const accounts = data.accounts;
-  // console.log("accounts", accounts.length);
-  useEffect(() => {
-    if (!data) {
-      return;
-    }
-    setLoading(true);
-    const intervalId = setInterval(() => {
-      setAccounts(data.accounts);
-    }, 1000);
+  const result = get_accounts();
+  let accounts: Account[];
+
+  switch (result.state) {
+    case "loading": return <div className="px-4 sm:px-20 lg:px-80 mt-6">
+      <div className="flex items-center justify-between mb-6">
+        <p className="text-2xl">Accounts</p>
+        <div className="flex justify-center items-center">
+          <SearchInput />
+        </div>
+      </div>
+      <div className="flex flex-row gap-3">
+        <Card className="w-full p-4">
+          <CardBody className="flex flex-row gap-3">
+            <div className="w-16 h-16 bg-primary bg-opacity-20 rounded-full flex justify-center items-center">
+              <Users color="#00A4E5" size="36px" />
+            </div>
+            <div className="flex flex-col">
+              <p className="text-sm">Holders</p>
+              <ScaleLoader width={13} radius={15} style={{ alignContent: "center" }} color={"#00A3E4"} />
+            </div>
+          </CardBody>
+        </Card>
 
-    return () => clearInterval(intervalId);
-  }, [data]);
+        <Card className="w-full p-4">
+          <CardBody className="flex flex-row gap-3">
+            {/* <Image width={52} height={52} alt='account-img' src={account.img} /> */}
+            <div className="w-16 h-16 bg-primary bg-opacity-20 rounded-full flex justify-center items-center">
+              <User color="#00A4E5" size="36px" />
+            </div>
+            <div className="flex flex-col">
+              <p className="text-sm">Active Holders</p>
+              <p className="text-2xl text-default-500">-</p>
+            </div>
+          </CardBody>
+        </Card>
+      </div>
+      <Card className="mt-4">
+        <CardBody className="h-40">
+          <HashLoader size={150} style={{ alignContent: "center" }} color={"#00A3E4"} />
+        </CardBody>
+        <CardFooter className="flex justify-end">
+        </CardFooter>
+      </Card>
+    </div>
+    case "error": return <p>Error</p>
+    case "ok": accounts = result.data;
+  }
 
   const itemsPerPage = 20;
-  const totalPages = Math.ceil(data?.accounts.length / itemsPerPage);
-  console.log("length", data?.accounts.length);
+  const totalPages = Math.ceil(accounts.length / itemsPerPage);
 
   const handlePageChange = (newPage: number) => {
     setLoading(true);
@@ -62,7 +93,7 @@ function Accounts() {
               <Users color="#00A4E5" size="36px" />
             </div>
             <div className="flex flex-col">
-              <p className="text-sm">Holder</p>
+              <p className="text-sm">Holders</p>
               <p className="text-2xl text-default-500">{accounts.length - 1}</p>
             </div>
           </CardBody>
@@ -75,7 +106,7 @@ function Accounts() {
               <User color="#00A4E5" size="36px" />
             </div>
             <div className="flex flex-col">
-              <p className="text-sm">Active Holder</p>
+              <p className="text-sm">Active Holders</p>
               <p className="text-2xl text-default-500">-</p>
             </div>
           </CardBody>

diff --git a/src/app/data/accounts.js b/src/app/data/accounts.js
@@ -1,10 +1,6 @@
 const columns = [
-  { name: 'Rank', uid: 'eid' },
   { name: 'Account', uid: 'account' },
-  { name: 'Extrinsics', uid: 'extrinsics' },
   { name: 'Total Balance', uid: 'balance' },
-  // { name: 'Free Balance', uid: 'freeBalance' },
-  { name: 'Reward', uid: 'reward' },
 ];
 
 const users = [

diff --git a/src/components/AccountsTable.tsx b/src/components/AccountsTable.tsx
@@ -25,18 +25,10 @@ interface BlocksTableProps {
 }
 
 export default function AccountsTable({ users, columns }: BlocksTableProps) {
-  console.log("sglagla", users);
-
   const renderCell = React.useCallback((user: Account, columnKey: React.Key) => {
     const cellValue = user[columnKey as keyof Account];
 
     switch (columnKey) {
-      case "eid":
-        return (
-          <Link href="/extrinsics/1" className="text-sel_blue">
-            <p>#</p>
-          </Link>
-        );
       case "name":
         return (
           <Link href={`/accounts/${user.id}`} className="text-sel_blue">
@@ -62,23 +54,6 @@ export default function AccountsTable({ users, columns }: BlocksTableProps) {
           </Link>
         );
 
-      case "reward":
-        return (
-          <div className="relative flex items-center justify-start gap-2">
-            <span className="text-lg text-default-400 cursor-pointer active:opacity-50">
-              -
-            </span>
-          </div>
-        );
-      case "extrinsics":
-        return (
-          <div className="relative flex items-center justify-start gap-2">
-            <span className="text-lg text-default-400 cursor-pointer active:opacity-50">
-              -
-            </span>
-          </div>
-        );
-
       default:
         return cellValue;
     }

diff --git a/src/graphql/queries.ts b/src/graphql/queries.ts
@@ -145,13 +145,15 @@ export function get_latest_transactions(n: number): Result<Transfer[]> {
     { variables: { n } }), (y) => y.transfers)
 }
 
-export const GET_ACCOUNTS = gql`
-  query Accounts {
-    accounts {
-      ${ACCOUNT}
+export function get_accounts(): Result<Account[]> {
+  return map_query(useQuery(gql`
+    query Accounts {
+      accounts {
+        ${ACCOUNT}
+      }
     }
-  }
-`;
+  `), x => x.accounts)
+}
 
 
 export function get_account_by_address(address: string): Result<Account> {