mirror of
https://github.com/wasp-lang/wasp.git
synced 2024-09-20 20:17:12 +03:00
40 lines
1.2 KiB
JavaScript
40 lines
1.2 KiB
JavaScript
import React from 'react'
|
|
|
|
import refreshDashboardData from '@wasp/queries/dashboard'
|
|
import { useQuery } from '@wasp/queries'
|
|
|
|
import './style.css'
|
|
import addWaspSourceHeader from './addWaspSourceHeader'
|
|
|
|
const MainPage = () => {
|
|
const { data: dashboardData, isFetching, error } = useQuery(refreshDashboardData, null, { refetchInterval: 60 * 1000 })
|
|
|
|
return (
|
|
<div style={{ minWidth: "800px" }}>
|
|
|
|
<div className="container">
|
|
<div className="dashboard">
|
|
{dashboardData && <DashboardData items={dashboardData} />}
|
|
{isFetching && 'Fetching...'}
|
|
{error && 'Error: ' + error}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const DashboardItem = (props) => (
|
|
<div className="dashboard-item">
|
|
<p className="title">{props.item.name}</p>
|
|
<p className="value">{props.item.value || "-"}</p>
|
|
<p className="footer">{props.item.updatedAt && ("Updated At: " + (new Date(props.item.updatedAt)).toLocaleString())}</p>
|
|
</div>
|
|
)
|
|
|
|
const DashboardData = (props) => {
|
|
if (!props.items?.length) return 'No dashboard items'
|
|
return props.items.map((item) => <DashboardItem item={item} key={item.name} />)
|
|
}
|
|
|
|
export default addWaspSourceHeader(MainPage)
|