feat: load components before making backend request

Signed-off-by: Ameya Shenoy <shenoy.ameya@gmail.com>

web/app/components/BankAccounts.tsx

@@ -0,0 +1,54 @@
+
+import React from 'react'
+import BankAccount from './BankAccount'
+
+export default function BankAccounts({ bankDetails }) {
+  const bankAccounts = []
+  const infoTitles = [
+    {
+      "title": "Account Number",
+      "key": "account_number",
+    },
+    {
+      "title": "IFSC Code",
+      "key": "ifsc_code",
+    },
+    {
+      "title": "Swift BIC",
+      "key": "swift_bic",
+    },
+    {
+      "title": "Holder's Name",
+      "key": "holders_name",
+    },
+  ]
+
+
+  bankDetails.forEach((bank) => {
+    const infoLines = []
+    infoTitles.forEach((option) => {
+      infoLines.push({
+        "title": option.title,
+        "value": bank[option.key],
+      })
+    })
+
+    bankAccounts.push(
+      <BankAccount
+        key={bank.bank.name}
+        bankLogoSrc={`http://localhost:8000/media/${bank.bank.logo}`}
+        bankName={bank.bank.name}
+        bankFullName={bank.bank.name}
+        bankAccountBalance={bank.balance.toLocaleString('en-IN')}
+        infoLines={infoLines}
+      />
+    )
+  })
+
+
+  return (
+    <>
+      {bankAccounts}
+    </>
+  )
+}

web/app/components/CenterCol.tsx

@@ -1,21 +1,9 @@
-"use client"
-
 import styles from './centerCol.module.css'
-import Dashboard from './Dashboard'
-import BankAccount from './BankAccount'
 import React from 'react'
-import useSWR from 'swr'
+import CenterLoading from './CenterLoading'
 
 
 export default function CenterCol() {
-  const fetcher = (...args) => fetch(...args).then((res) => res.json())
-  const { data, error } = useSWR(`http://localhost:8000/api/v1/accounts/`, fetcher)
-
-  if (error) return <div>Error: Failed to load</div>
-  if (!data) return <div>Loading...</div>
-
-  const bankDetails = data.results
-
   // const bankDetails = {
   //   banks: [{
   //     bankName: "SBI",
@@ -91,58 +79,25 @@ export default function CenterCol() {
   //     }]
   //   }]
   // }
+  let today = new Date()
+  let curHr = today.getHours()
+  let greet = "Good "
 
-  const bankAccounts = []
+  if (curHr < 12) {
-  const infoTitles = [
+    greet += 'morning'
-    {
+  } else if (curHr < 18) {
-      "title": "Account Number",
+    greet += 'afternoon'
-      "key": "account_number",
+  } else {
-    },
+    greet += 'evening'
-    {
+  }
-      "title": "IFSC Code",
-      "key": "ifsc_code",
-    },
-    {
-      "title": "Swift BIC",
-      "key": "swift_bic",
-    },
-    {
-      "title": "Holder's Name",
-      "key": "holders_name",
-    },
-  ]
-
-  bankDetails.forEach((bank) => {
-    const infoLines = []
-    infoTitles.forEach((option) => {
-      infoLines.push({
-        "title": option.title,
-        "value": bank[option.key],
-      })
-    })
-
-    bankAccounts.push(
-      <BankAccount
-        key={bank.bank.name}
-        bankLogoSrc={`http://localhost:8000/media/${bank.bank.logo}`}
-        bankName={bank.bank.name}
-        bankFullName={bank.bank.name}
-        bankAccountBalance={bank.balance}
-        infoLines={infoLines}
-      />
-    )
-  })
 
   return (
     <div className={styles.main}>
       <div className={styles.title}>
-        <div className={styles.greeting}>Good morning, Nishant</div>
+        <div className={styles.greeting}>{greet}, Nishant</div>
         <div className={styles.date}>It's 3rd of January, a Monday</div>
       </div>
-      <Dashboard />
+      <CenterLoading />
-      <div className={styles.accounts}>
-        {bankAccounts}
-      </div>
     </div>
   )
 }

web/app/components/CenterLoading.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import React from 'react'
+import useSWR from 'swr'
+import Dashboard from './Dashboard'
+import BankAccounts from './BankAccounts'
+import styles from './centerCol.module.css'
+
+
+export default function CenterLoading() {
+  const fetcher = (...args) => fetch(...args).then((res) => res.json())
+  const { data, error } = useSWR(`http://localhost:8000/api/v1/accounts/`, fetcher)
+
+  if (error) return <div>Error: Failed to load</div>
+  if (!data) return <div></div>
+
+  const bankDetails = data.results
+
+  return (
+    <>
+      <Dashboard bankDetails={bankDetails} />
+      <div className={styles.accounts}>
+        <BankAccounts bankDetails={bankDetails} />
+      </div>
+    </>
+  )
+}

web/app/components/Dashboard.tsx

@@ -7,7 +7,21 @@ import { AiOutlineBank } from 'react-icons/ai';
 import { BiRupee } from 'react-icons/bi';
 
 
-export default function Dashboard() {
+export default function Dashboard({ bankDetails }) {
+  const banks = []
+  let total_balance = 0
+  bankDetails.forEach((bank) => {
+    total_balance += bank.balance
+    banks.push(
+      <Bank
+        bankLogoSrc={`http://localhost:8000/media/${bank.bank.logo}`}
+        bankName={bank.bank.name}
+        bankBalance={bank.balance.toLocaleString('en-IN')}
+      />
+    )
+  })
+
+
   return (
     <div className={styles.main}>
       <div className={styles.banks}>
@@ -20,26 +34,7 @@ export default function Dashboard() {
           />
           Banks
         </div>
-        <Bank
+        {banks}
-          bankLogoSrc="/sbi.svg"
-          bankName="SBI"
-          bankBalance="27,932"
-        />
-        <Bank
-          bankLogoSrc="/icici.svg"
-          bankName="ICICI"
-          bankBalance="7,932"
-        />
-        <Bank
-          bankLogoSrc="/hdfc.svg"
-          bankName="HDFC"
-          bankBalance="2,58,630"
-        />
-        <Bank
-          bankLogoSrc="/axis.svg"
-          bankName="Axis"
-          bankBalance="55,410"
-        />
       </div>
       <div className={styles.totalBalance}>
         <div
@@ -55,7 +50,7 @@ export default function Dashboard() {
         </div>
         <div className={styles.totalBalanceAmountHolder}>
           <div>₹</div>
-          <div className={styles.amount}>3,49,904</div>
+          <div className={styles.amount}>{total_balance.toLocaleString('en-IN')}</div>
         </div>
         <div className={styles.message}>
           ↑20% compared to previous month

web/app/components/RecentTransactionsList.tsx

@@ -9,7 +9,7 @@ export default function RecentTransactionsList() {
   const { data, error } = useSWR(`http://localhost:8000/api/v1/transactions/`, fetcher)
 
   if (error) return <div>Error: Failed to load</div>
-  if (!data) return <div>Loading...</div>
+  if (!data) return <div></div>
 
   const transactions = data.results
 
@@ -55,7 +55,7 @@ export default function RecentTransactionsList() {
         title={transaction.to_account.holders_name}
         tag={transaction.tag.title}
         datetime={relateive_date(new Date(transaction.created_at))}
-        amount={transaction.amount}
+        amount={transaction.amount.toLocaleString('en-IN')}
         icon_type={transaction.tag.icon_type}
       />
     )