perf: enhance the render logic

zhang-accounting · May 14, 2024 · 27a95e5 · 27a95e5
1 parent 8c3acee
commit 27a95e5
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 13 deletions.
diff --git 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
@@ -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>