From 6c7ec16cecbd60c48400019fcd93254e253c47d4 Mon Sep 17 00:00:00 2001 From: Gyanaranjan Sendha <75114005+grsendha@users.noreply.github.com> Date: Fri, 10 May 2024 19:35:22 +0530 Subject: [PATCH] Added loading and Suspense --- app/(root)/loading.tsx | 16 +++++ app/(root)/my-banks/page.tsx | 49 +++++++------- app/(root)/page.tsx | 64 +++++++++--------- app/(root)/payment-transfer/page.tsx | 29 +++++---- app/(root)/transaction-history/page.tsx | 87 +++++++++++++------------ 5 files changed, 137 insertions(+), 108 deletions(-) create mode 100644 app/(root)/loading.tsx diff --git a/app/(root)/loading.tsx b/app/(root)/loading.tsx new file mode 100644 index 0000000..e519390 --- /dev/null +++ b/app/(root)/loading.tsx @@ -0,0 +1,16 @@ +import React from 'react' + +const Loading = () => { + return ( +
+ +
+
+
+
+
+
+ ) +} + +export default Loading \ No newline at end of file diff --git a/app/(root)/my-banks/page.tsx b/app/(root)/my-banks/page.tsx index 38d4969..39d526b 100644 --- a/app/(root)/my-banks/page.tsx +++ b/app/(root)/my-banks/page.tsx @@ -2,38 +2,41 @@ import BankCard from '@/components/BankCard'; import HeaderBox from '@/components/HeaderBox' import { getAccounts } from '@/lib/actions/bank.actions'; import { getLoggedInUser } from '@/lib/actions/user.actions'; -import React from 'react' +import React, { Suspense } from 'react' +import Loading from '../loading'; const MyBanks = async () => { const loggedIn = await getLoggedInUser(); - const accounts = await getAccounts({ - userId: loggedIn.$id + const accounts = await getAccounts({ + userId: loggedIn.$id }) return ( -
-
- + }> +
+
+ -
-

- Your cards -

-
- {accounts && accounts.data.map((a: Account) => ( - - ))} +
+

+ Your cards +

+
+ {accounts && accounts.data.map((a: Account) => ( + + ))} +
-
-
+
+ ) } diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx index 697454b..d00f70e 100644 --- a/app/(root)/page.tsx +++ b/app/(root)/page.tsx @@ -4,53 +4,57 @@ import RightSidebar from '@/components/RightSidebar'; import TotalBalanceBox from '@/components/TotalBalanceBox'; import { getAccount, getAccounts } from '@/lib/actions/bank.actions'; import { getLoggedInUser } from '@/lib/actions/user.actions'; +import Loading from './loading'; +import { Suspense } from 'react'; const Home = async ({ searchParams: { id, page } }: SearchParamProps) => { const currentPage = Number(page as string) || 1; const loggedIn = await getLoggedInUser(); - const accounts = await getAccounts({ - userId: loggedIn.$id + const accounts = await getAccounts({ + userId: loggedIn.$id }) - if(!accounts) return; - + if (!accounts) return; + const accountsData = accounts?.data; const appwriteItemId = (id as string) || accountsData[0]?.appwriteItemId; const account = await getAccount({ appwriteItemId }) return ( -
-
-
- - - }> +
+
+
+ + + +
+ + -
+
- - - - -
+ + ) } diff --git a/app/(root)/payment-transfer/page.tsx b/app/(root)/payment-transfer/page.tsx index b11c510..84d14d8 100644 --- a/app/(root)/payment-transfer/page.tsx +++ b/app/(root)/payment-transfer/page.tsx @@ -2,29 +2,32 @@ import HeaderBox from '@/components/HeaderBox' import PaymentTransferForm from '@/components/PaymentTransferForm' import { getAccounts } from '@/lib/actions/bank.actions'; import { getLoggedInUser } from '@/lib/actions/user.actions'; -import React from 'react' +import React, { Suspense } from 'react' +import Loading from '../loading'; const Transfer = async () => { const loggedIn = await getLoggedInUser(); - const accounts = await getAccounts({ - userId: loggedIn.$id + const accounts = await getAccounts({ + userId: loggedIn.$id }) - if(!accounts) return; - + if (!accounts) return; + const accountsData = accounts?.data; return ( -
- + }> +
+ -
- +
+ +
-
+ ) } diff --git a/app/(root)/transaction-history/page.tsx b/app/(root)/transaction-history/page.tsx index d8a16a4..26915de 100644 --- a/app/(root)/transaction-history/page.tsx +++ b/app/(root)/transaction-history/page.tsx @@ -4,71 +4,74 @@ import TransactionsTable from '@/components/TransactionsTable'; import { getAccount, getAccounts } from '@/lib/actions/bank.actions'; import { getLoggedInUser } from '@/lib/actions/user.actions'; import { formatAmount } from '@/lib/utils'; -import React from 'react' +import React, { Suspense } from 'react' +import Loading from '../loading'; -const TransactionHistory = async ({ searchParams: { id, page }}:SearchParamProps) => { +const TransactionHistory = async ({ searchParams: { id, page } }: SearchParamProps) => { const currentPage = Number(page as string) || 1; const loggedIn = await getLoggedInUser(); - const accounts = await getAccounts({ - userId: loggedIn.$id + const accounts = await getAccounts({ + userId: loggedIn.$id }) - if(!accounts) return; - + if (!accounts) return; + const accountsData = accounts?.data; const appwriteItemId = (id as string) || accountsData[0]?.appwriteItemId; const account = await getAccount({ appwriteItemId }) -const rowsPerPage = 10; -const totalPages = Math.ceil(account?.transactions.length / rowsPerPage); + const rowsPerPage = 10; + const totalPages = Math.ceil(account?.transactions.length / rowsPerPage); -const indexOfLastTransaction = currentPage * rowsPerPage; -const indexOfFirstTransaction = indexOfLastTransaction - rowsPerPage; + const indexOfLastTransaction = currentPage * rowsPerPage; + const indexOfFirstTransaction = indexOfLastTransaction - rowsPerPage; -const currentTransactions = account?.transactions.slice( - indexOfFirstTransaction, indexOfLastTransaction -) + const currentTransactions = account?.transactions.slice( + indexOfFirstTransaction, indexOfLastTransaction + ) return ( -
-
- -
+ }> +
+
+ +
-
-
-
-

{account?.data.name}

-

- {account?.data.officialName} -

-

- ●●●● ●●●● ●●●● {account?.data.mask} -

-
- -
-

Current balance

-

{formatAmount(account?.data.currentBalance)}

+
+
+
+

{account?.data.name}

+

+ {account?.data.officialName} +

+

+ ●●●● ●●●● ●●●● {account?.data.mask} +

+
+ +
+

Current balance

+

{formatAmount(account?.data.currentBalance)}

+
-
-
- +
+ {totalPages > 1 && (
)} -
+
+
-
+ ) }