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:
parent
90dd1d0828
commit
f268294b93
7
src/app/dashboard/admin/page.tsx
Normal file
7
src/app/dashboard/admin/page.tsx
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
export default function AdminPage() {
|
||||||
|
return (<>
|
||||||
|
<section>
|
||||||
|
<h1>Welcome to the Dashboard</h1>
|
||||||
|
</section>
|
||||||
|
</>)
|
||||||
|
}
|
44
src/app/dashboard/page.tsx
Normal file
44
src/app/dashboard/page.tsx
Normal 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
40
src/app/wallet/page.tsx
Normal 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>
|
||||||
|
</>)
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user