feat: Add new dashboard, admin, and wallet pages

Implement new page.tsx files for dashboard, admin, and wallet modules, providing essential UI logic and data-fetching mechanisms. These components handle their respective data retrieval and loading states, and present the information via relevant UI structures such as 'CryptosTable' and 'WalletTable'.
This commit is contained in:
Mathis H (Avnyr) 2024-06-20 14:59:28 +02:00
parent 90dd1d0828
commit f268294b93
Signed by: Mathis
GPG Key ID: DD9E0666A747D126
3 changed files with 91 additions and 0 deletions

View File

@ -0,0 +1,7 @@
export default function AdminPage() {
return (<>
<section>
<h1>Welcome to the Dashboard</h1>
</section>
</>)
}

View File

@ -0,0 +1,44 @@
"use client"
import type {ICryptoInWalletInfo} from "@/interfaces/crypto.interface";
import {CryptosTable} from "@/components/data-tables/cryptos-table";
import {useEffect, useState} from "react";
import {Skeleton} from "@/components/ui/skeleton";
import ApiRequest from "@/services/apiRequest";
import type {IApiAllOffersRes} from "@/interfaces/api.interface";
export default function DashboardPage() {
const [isLoading, setIsLoading] = useState<boolean>(true)
const [cryptosList, setCryptosList] = useState<ICryptoInWalletInfo[]>([])
//FIX the loop
useEffect(() => {
ApiRequest.authenticated.get.json<ICryptoInWalletInfo[]>(
"crypto/all"
).then((response)=>{
if (response.data.length <= 0) {
setCryptosList([])
setIsLoading(false)
return
}
const resp = response.data
setCryptosList(resp)
setIsLoading(false)
})
}, []);
if (isLoading) {
return (<div className={"container flex flex-col justify-center items-center min-h-64 my-6 gap-4"}>
<h1 className={"text-2xl font-bold"}>Available cryptos</h1>
<Skeleton className={"container flex flex-col justify-center items-center min-h-64 my-6 gap-4"}/>
</div>)
}
return (<>
<section className={"container flex flex-col justify-center items-center min-h-64 my-6 gap-4"}>
<h1 className={"text-2xl font-bold"}>Available cryptos</h1>
<CryptosTable cryptosArray={cryptosList}/>
</section>
</>)
}

40
src/app/wallet/page.tsx Normal file
View File

@ -0,0 +1,40 @@
"use client"
import type {ICryptoInWalletInfo} from "@/interfaces/crypto.interface";
import {CryptosTable} from "@/components/data-tables/cryptos-table";
import {useContext, useEffect, useState} from "react";
import {Skeleton} from "@/components/ui/skeleton";
import ApiRequest from "@/services/apiRequest";
import type {IApiAllOffersRes} from "@/interfaces/api.interface";
import {WalletTable} from "@/components/data-tables/wallet-table";
import {UserDataContext} from "@/components/providers/userdata-provider";
import {IUserWallet} from "@/interfaces/userdata.interface";
export default function WalletPage() {
const [isLoading, setIsLoading] = useState<boolean>(true)
const [cryptosList, setCryptosList] = useState<ICryptoInWalletInfo[]>([])
const userContext = useContext(UserDataContext);
//FIX the loop
useEffect(() => {
console.log(userContext?.userData)
if (userContext?.userData) {
setIsLoading(false)
}
}, [userContext]);
if (isLoading || !userContext?.userData) {
return (<div className={"container flex flex-col justify-center items-center min-h-64 my-6 gap-4"}>
<h1 className={"text-2xl font-bold"}>Cryptos in your wallet</h1>
<Skeleton className={"container flex flex-col justify-center items-center min-h-64 my-6 gap-4"}/>
</div>)
}
return (<>
<section className={"container flex flex-col justify-center items-center min-h-64 my-6 gap-4"}>
<h1 className={"text-2xl font-bold"}>Cryptos in your wallet</h1>
<WalletTable walletArray={userContext.userData.wallet as unknown as IUserWallet}/>
</section>
</>)
}