From 27a95e511b95bc0fb0649248fb0177249f7a680d Mon Sep 17 00:00:00 2001
From: Kilerd Chan <blove694@gmail.com>
Date: Tue, 14 May 2024 12:55:08 +0800
Subject: [PATCH] perf: enhance the render logic

---
 .../components/AccountBalanceHistoryGraph.tsx    | 15 ++++++++-------
 frontend/src/pages/SingleAccount.tsx             | 16 ++++++++++------
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/AccountBalanceHistoryGraph.tsx b/frontend/src/components/AccountBalanceHistoryGraph.tsx
index d58df152..22d3b6ac 100644
--- a/frontend/src/components/AccountBalanceHistoryGraph.tsx
+++ b/frontend/src/components/AccountBalanceHistoryGraph.tsx
@@ -21,13 +21,14 @@ export function AccountBalanceHistoryGraph(props: Props) {
 
   const data = sortBy(
     Object.values(dataByDate).map((it) => {
-      // @ts-ignore
-      let ret: { [commodity: string]: number; date: string } = { date: '' };
-      for (let each of it) {
-        ret.date = each.date;
-        ret[each.balance.commodity] = new BigNumber(each.balance.number).toNumber();
-      }
-      return ret;
+      return it.reduce(
+        (acc, each) => {
+          acc.date = each.date;
+          acc[each.balance.commodity] = new BigNumber(each.balance.number).toNumber();
+          return acc;
+        },
+        {} as Record<string, string | number>,
+      );
     }),
     (it) => new Date(it.date),
   );
diff --git a/frontend/src/pages/SingleAccount.tsx b/frontend/src/pages/SingleAccount.tsx
index c5e5fbcb..861ddec8 100644
--- a/frontend/src/pages/SingleAccount.tsx
+++ b/frontend/src/pages/SingleAccount.tsx
@@ -16,7 +16,7 @@ import { useDocumentTitle } from '@mantine/hooks';
 import { createStyles } from '@mantine/emotion';
 import { AccountBalanceHistoryGraph } from '../components/AccountBalanceHistoryGraph';
 
-const useStyles = createStyles((theme, _, u) => ({
+const useStyles = createStyles((theme, _) => ({
   calculatedAmount: {
     fontSize: `calc(${theme.fontSizes.xl} * 1.1)`,
     fontWeight: 500,
@@ -31,7 +31,7 @@ function SingleAccount() {
   const { classes } = useStyles();
 
   const { data: account, error } = useSWR<AccountInfo>(`/api/accounts/${accountName}`, fetcher);
-  const { data: account_balance_data } = useSWR<AccountBalanceHistory>(`/api/accounts/${accountName}/balances`, fetcher);
+  const { data: account_balance_data, error: account_balance_error } = useSWR<AccountBalanceHistory>(`/api/accounts/${accountName}/balances`, fetcher);
 
   console.log('account data', account);
   console.log('account balance data', account_balance_data);
@@ -65,7 +65,11 @@ function SingleAccount() {
           )}
         </Stack>
       </Group>
-      <AccountBalanceHistoryGraph data={account_balance_data} />
+      {account_balance_error ? (
+        <div>fail to fetch account balance history</div>
+      ) : (
+        account_balance_data && <AccountBalanceHistoryGraph data={account_balance_data} />
+      )}
 
       <Tabs keepMounted={false} variant="outline" defaultValue="journals" mt="lg">
         <Tabs.List>
@@ -142,12 +146,12 @@ function SingleAccount() {
                 <Table.Th>Current Balance</Table.Th>
                 <Table.Th>Latest Balance Time</Table.Th>
                 <Table.Th>Pad Account</Table.Th>
-                <Table.Th>Distanation</Table.Th>
+                <Table.Th>Destination</Table.Th>
               </Table.Tr>
             </Table.Thead>
             <tbody>
-              {Object.entries(account?.amount.detail ?? {}).map(([commodity, amount], idx) => (
-                <AccountBalanceCheckLine currentAmount={amount} commodity={commodity} accountName={account.name} />
+              {Object.entries(account?.amount.detail ?? {}).map(([commodity, amount]) => (
+                <AccountBalanceCheckLine key={commodity} currentAmount={amount} commodity={commodity} accountName={account.name} />
               ))}
             </tbody>
           </Table>