codingcoffee/foldbank-mock
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feat: load components before making backend request

Browse source 
Signed-off-by: Ameya Shenoy <shenoy.ameya@gmail.com>
This commit is contained in:
Ameya Shenoy 2023-03-22 23:13:50 +05:30
parent 981de5b604
commit 703604b9a7
Signed by: codingcoffee
GPG key ID: EEC8EA855D61CEEC
5 changed files with 113 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
web/app/components/BankAccounts.tsx Normal file
View file

@ -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}
</>
)
}

71
web/app/components/CenterCol.tsx
View file

@ -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 = []
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}
infoLines={infoLines}
/>
)
})
if (curHr < 12) {
greet += 'morning'
} else if (curHr < 18) {
greet += 'afternoon'
} else {
greet += 'evening'
}
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 />
<div className={styles.accounts}>
{bankAccounts}
</div>
<CenterLoading />
</div>
)
}

27
web/app/components/CenterLoading.tsx Normal file
View file

@ -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>
</>
)
}

39
web/app/components/Dashboard.tsx
View file

@ -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
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"
/>
{banks}
</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

4
web/app/components/RecentTransactionsList.tsx
View file

@ -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}
/>
)