Fixed server side render

Danish-Belal · Jul 5, 2024 · 2d59104 · 2d59104
1 parent f374f99
commit 2d59104
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 75 deletions.
diff --git a/apps/user-app/app/(dashboard)/dashboard/page.tsx b/apps/user-app/app/(dashboard)/dashboard/page.tsx
@@ -1,8 +1,10 @@
-import { authOptions } from "../../lib/auth";
-import { getServerSession } from "next-auth";
-import DashboardCard from "../../../components/DashboardCard";
-// import { getBalance, getOnRampTransactions } from "../transfer/page";
-import dashboard from "../../../public/dashboardimg.png";
+
+import { getServerSession } from 'next-auth';
+import DashboardCard from '../../../components/DashboardCard';
+import dashboard from '../../../public/dashboardimg.png';
+import { authOptions } from '../../lib/auth';
+import { getBalance } from '../../lib/actions/serverAction';
+import Image from 'next/image';
 
 function getGreeting() {
     const hour = new Date().getHours();
@@ -11,28 +13,39 @@ function getGreeting() {
     return "Good Evening";
 }
 
-export default async function Dashboard() {
+async function fetchingBalance(){
+    const balance = await getBalance();
+    return balance.amount/100;
+}
+async function getuser(){
     const session = await getServerSession(authOptions);
-    // const transactions = await getBalance();
-    // const allTransactions = await getOnRampTransactions();
-
-    // console.log("All transactions", allTransactions);
     const userName = session.user.name || "Venmo User";
+    return userName;
+}
+export default async function() {
+
+    const balance = fetchingBalance();
+    console.log(balance);
+
+    const userName =  getuser();
+
     return (
         <div>
             <div className="text-center text-2xl font-semibold mb-4 text-blue-500">
-                {getGreeting()}, <span className="text-blue-500">{ userName}</span>
+                {getGreeting()}, <span className="text-blue-500">{userName}</span>
             </div>
             <div className="relative bg-gray-100">
-                <img src={dashboard.src} alt="Description of the image" className="w-full h-auto" />
-                {/* <div className="absolute top-0 right-0 m-4">
-                    <DashboardCard 
-                        title="Portfolio Value" 
-                        value={transactions.amount || 0}  
-                        transactions={allTransactions} 
+                <Image src={dashboard.src} alt="Description of the image" className="w-full h-auto" />
+                <div className="absolute top-0 right-0 m-4">
+                    <DashboardCard
+                        title="Portfolio Value"
+                        value={balance}
+                        // transactions={allTransactions}
                     />
-                </div> */}
+                </div>
             </div>
         </div>
     );
-}
+};
+
+
diff --git a/apps/user-app/app/(dashboard)/layout.tsx b/apps/user-app/app/(dashboard)/layout.tsx
@@ -1,26 +1,25 @@
 import { SidebarItem } from "../../components/SidebarItem";
 
 export default function Layout({
-  children,
+    children,
 }: {
-  children: React.ReactNode;
+    children: React.ReactNode;
 }): JSX.Element {
-  return (
-    <div className="flex">
-        <div className="w-72 border-r border-slate-300 min-h-screen mr-4 pt-28">
-            <div>
-                <SidebarItem href={"/dashboard"} icon={<HomeIcon />} title="Home" />
-                <SidebarItem href={"/transfer"} icon={<TransferIcon />} title="Transfer" />
-                <SidebarItem href={"/transactions"} icon={<TransactionsIcon />} title="Transactions" />
-                <SidebarItem href={"/p2p"} icon={<P2PTransferIcon />} title="P2P Transfer" />
+    return (
+        <div className="flex">
+            <div className="w-72 border-r border-slate-300 min-h-screen mr-4 pt-28">
+                <div>
+                    <SidebarItem href="/dashboard" icon={<HomeIcon />} title="Home" />
+                    <SidebarItem href="/transfer" icon={<TransferIcon />} title="Transfer" />
+                    <SidebarItem href="/transactions" icon={<TransactionsIcon />} title="Transactions" />
+                    <SidebarItem href="/p2p" icon={<P2PTransferIcon />} title="P2P Transfer" />
+                </div>
             </div>
-        </div>
             {children}
-    </div>
-  );
+        </div>
+    );
 }
 
-// Icons Fetched from https://heroicons.com/
 function HomeIcon() {
     return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="w-6 h-6">
     <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />

diff --git a/apps/user-app/app/(dashboard)/transactions/page.tsx b/apps/user-app/app/(dashboard)/transactions/page.tsx
@@ -1,42 +1,42 @@
-import React, { useState, useEffect, use } from 'react';
-// import { getOnRampTransactions } from '../transfer/page';
-import TransactionCard from '../../../components/TransactionCard';
+import { getOnRampTransactions } from '../../lib/actions/serverAction';
 
-const TransactionPage = async () => {
-    // const transactions = await getOnRampTransactions();
+export default async function() {
+    const transactions = await getOnRampTransactions();
 
     return (
         <div className="container mx-auto px-4 py-8">
             <h2 className="text-3xl font-semibold mb-6">Transaction History</h2>
-            {/* <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                 {transactions.map(transaction => (
                     <div key={transaction.token} className="relative">
                         <div  className={`rounded-lg shadow-md p-6 ${getTransactionColor(transaction.status)}`}>
-                            <h3 className="text-lg font-semibold mb-2">{transaction.date}</h3>
+                            <h3 className="text-lg font-semibold mb-2">Date: {getTimeinUTC(transaction.time)}</h3>
                             <p className="text-gray-600 mb-4">Status: {transaction.status}</p>
                             <p className="text-gray-600 mb-4">Provider: {transaction.provider}</p>
                             <p className="text-gray-600 mb-4">Amount: {transaction.amount}</p>
                         </div>
                     </div>
                 ))}
-            </div> */}
+            </div>
 
         </div>
     );
 };
 
+const getTimeinUTC = (time: Date) =>{
+    return time.toUTCString();
+}
 // Function to get appropriate background color based on transaction status
 const getTransactionColor = (status: any) => {
     switch (status) {
-        case 'success':
+        case 'Success':
             return 'bg-green-50'; // Greenish background for successful transactions
-        case 'failed':
+        case 'Failed':
             return 'bg-red-50'; // Reddish background for failed transactions
-        case 'pending':
+        case 'Processing':
             return 'bg-yellow-50'; // Yellowish background for pending transactions
         default:
             return 'bg-white'; // Default background color
     }
 };
 
-export default TransactionPage;
diff --git a/apps/user-app/app/(dashboard)/transfer/page.tsx b/apps/user-app/app/(dashboard)/transfer/page.tsx
@@ -1,37 +1,39 @@
-import prisma from "@repo/db/client";
+
+// import prisma from "@repo/db/client";
 import { AddMoney } from "../../../components/AddMoneyCard";
 import { BalanceCard } from "../../../components/BalanceCard";
 import { OnRampTransactions } from "../../../components/OnRampTransaction";
-import { getServerSession } from "next-auth";
-import { authOptions } from "../../../app/lib/auth";
+// import { getServerSession } from "next-auth";
+// import { authOptions } from "../../../app/lib/auth";
+import { getBalance, getOnRampTransactions } from "../../lib/actions/serverAction";
 
- async function getBalance() {
-    const session = await getServerSession(authOptions);
-    const balance = await prisma.balance.findFirst({
-        where: {
-            userId: Number(session?.user?.id)
-        }
-    });
-    return {
-        amount: balance?.amount || 0,
-        locked: balance?.locked || 0
-    }
-}
+//  async function getBalance() {
+//     const session = await getServerSession(authOptions);
+//     const balance = await prisma.balance.findFirst({
+//         where: {
+//             userId: Number(session?.user?.id)
+//         }
+//     });
+//     return {
+//         amount: balance?.amount || 0,
+//         locked: balance?.locked || 0
+//     }
+// }
 
- async function getOnRampTransactions() {
-    const session = await getServerSession(authOptions);
-    const txns = await prisma.onRampTransaction.findMany({
-        where: {
-            userId: Number(session?.user?.id)
-        }
-    });
-    return txns.map(t => ({
-        time: t.startTime,
-        amount: t.amount,
-        status: t.status,
-        provider: t.provider
-    }))
-}
+//  async function getOnRampTransactions() {
+//     const session = await getServerSession(authOptions);
+//     const txns = await prisma.onRampTransaction.findMany({
+//         where: {
+//             userId: Number(session?.user?.id)
+//         }
+//     });
+//     return txns.map(t => ({
+//         time: t.startTime,
+//         amount: t.amount,
+//         status: t.status,
+//         provider: t.provider
+//     }))
+// }
 
 export default async function() {
     const balance = await getBalance();

diff --git a/apps/user-app/app/lib/actions/createOnrampTransaction.ts b/apps/user-app/app/lib/actions/createOnrampTransaction.ts
@@ -24,7 +24,7 @@ export async function createOnRampTransaction(provider: string, amount: number)
             startTime: new Date(),
             token: token,
             userId: Number(session?.user?.id),
-            amount: amount * 100
+            amount: amount 
         }
     });