Add LoadingComponent and Link components to Dashboard

pratikkabade · Mar 6, 2024 · 6ecdfd8 · 6ecdfd8
1 parent 605e3e9
commit 6ecdfd8
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 20 deletions.
diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
@@ -2,6 +2,8 @@ import axios from 'axios'
 import React, { useEffect, useState } from 'react'
 import { getDate, getDay } from '../hooks/Functions'
 import { PlusButton } from './add-functionalities/PlusButton'
+import { LoadingComponent } from './LoadingComponent'
+import { Link } from 'react-router-dom'
 
 export const Dashboard = () => {
     const [data, setData] = useState<any>([])
@@ -23,58 +25,92 @@ export const Dashboard = () => {
     useEffect(() => {
         fetchData()
     })
-    console.log(data.transactions)
-
 
     // load page after data is fetched
     if (data.transactions === undefined) {
         return (
-            <div className="container mb-32 flex flex-wrap flex-col mx-auto justify-center items-center">
-                <div className="flex flex-wrap flex-row mx-auto justify-center items-center">
-                    <h1 className="text-4xl font-bold">Loading...</h1>
-                </div>
-            </div>
+            <LoadingComponent />
         )
     }
 
 
+    // only show 100 transactions
+    const currentData = data.transactions.slice(0, 100)
+
+    // get name from accounts array using id from transactions
+    currentData.map((item: any) => {
+        const account = data.accounts.find((account: any) => account.id === item.accountId)
+        const color = data.accounts.find((account: any) => account.id === item.accountId)
+        const currency = data.accounts.find((account: any) => account.id === item.accountId)
+        const icon = data.accounts.find((account: any) => account.id === item.accountId)
+        item.accountName = account.name
+        item.accountColor = color.color
+        item.accountCurrency = currency.currency
+        item.accountIcon = icon.icon
+    })
+
+    // get name form categories array using id from transactions
+    currentData.map((item: any) => {
+        const category = data.categories.find((category: any) => category.id === item.categoryId)
+        const color = data.categories.find((category: any) => category.id === item.categoryId)
+        const icon = data.categories.find((category: any) => category.id === item.categoryId)
+        item.category = category.name
+        item.color = color.color
+        item.icon = icon.icon
+    })
+
+
 
     return (
         <div className="container mb-32 flex flex-wrap flex-col mx-auto justify-center items-center">
             <div className="flex flex-wrap flex-row mx-auto justify-center items-center">
-                {data.transactions.map((item: any) => (
+                {currentData.map((item: any) => (
                     <div className="flex justify-center slide-r">
                         <div className="p-5 lg:w-96 md:w-72 m-10 bg-slate-100 dark:bg-slate-800 rounded-2xl hover:shadow-lg cursor-default">
                             <p
+                                key={item.id + 'date'}
                                 className="text-xl font-bold">
                                 {getDate(item.dateTime)}
                             </p>
-                            <p className="text-slate-500 dark:text-slate-300 text-sm font-medium">
+                            <p
+                                key={item.id + 'day'}
+                                className="text-slate-500 dark:text-slate-300 text-sm font-medium">
                                 {getDay(item.dateTime)}
                             </p>
 
                             <div className="flex flex-row flex-wrap justify-around text-lg font-bold my-5">
-                                <p key={item.id}
-                                    className="bg-green-100 dark:bg-green-800 p-2 px-10 m-1 rounded-full hover:shadow-md cursor-pointer">
-                                    {item.category}
-                                </p>
-                                <p key={item.id}
-                                    className="bg-white p-2 dark:bg-gray-900 px-10 m-1 rounded-full hover:shadow-md cursor-pointer">
-                                    {item.accountName}
-                                </p>
+                                <Link to={`/Category/${item.category}`}
+                                    onClick={() => localStorage.setItem('category', item.category)}>
+                                    <p key={item.id + 'category'}
+                                        className="bg-green-100 dark:bg-green-800 p-2 px-10 m-1 rounded-full hover:shadow-md cursor-pointer">
+                                        {/* {item.icon} */}
+                                        {/* {item.color} */}
+                                        {item.category}
+                                    </p>
+                                </Link>
+                                <Link to={`/Accounts/${item.accountName}`}
+                                    onClick={() => localStorage.setItem('account', item.accountName)}>
+                                    <p key={item.id + 'account name'}
+                                        className="bg-white p-2 dark:bg-gray-900 px-10 m-1 rounded-full hover:shadow-md cursor-pointer">
+                                        {/* {item.accountIcon} */}
+                                        {/* {item.accountColor} */}
+                                        {item.accountName}
+                                    </p>
+                                </Link>
                             </div>
 
-                            <p key={item.id} className="text-2xl font-bold my-3">
+                            <p key={item.id + 'id'} className="text-2xl font-bold my-3">
                                 {item.title}
                             </p>
-                            <p key={item.id} className="text-slate-500 dark:text-slate-200 my-3">
+                            <p key={item.id + 'description'} className="text-slate-500 dark:text-slate-200 my-3">
                                 {item.description}
                             </p>
-                            <p key={item.id}
+                            <p key={item.id + 'amount'}
                                 className={`text-5xl font-extrabold ml-12 flex flex-wrap 
                         ${item.type === "EXPENSE" ? "" : "text-green-500"}`}>
                                 {item.amount}
                                 <abbr
+                                    key={item.id + 'currency'}
                                     className="font-normal ml-2">
                                     {item.currency}
                                 </abbr>

diff --git a/src/components/LoadingComponent.tsx b/src/components/LoadingComponent.tsx
@@ -0,0 +1,22 @@
+export const LoadingComponent = () => {
+
+    // fetch url from local storage
+    const url = localStorage.getItem('theURL') || ''
+
+    console.log(URL)
+    if (url === '') {
+        return (
+            <div className="container my-32 flex flex-wrap flex-col mx-auto justify-center items-center text-center text-4xl font-bold">
+                    <h1>Seems like you haven't added the URL</h1>
+            </div>
+        )
+    }
+    else {
+        return (
+            <div className="container my-32 flex flex-wrap flex-col mx-auto justify-center items-center text-center text-4xl font-bold">
+                    <h1>Something went <span className="text-red-800 dark:text-red-300">wrong</span>...</h1>
+                    <h1>Please check the link again</h1>    
+            </div>
+        )
+    }
+}