63 lines
1.7 KiB
TypeScript
63 lines
1.7 KiB
TypeScript
import Head from 'next/head'
|
|
import React, { ReactElement, useEffect, useState } from 'react'
|
|
import { State, Summary } from '../@types'
|
|
import styles from '../styles/Home.module.css'
|
|
import { getData, getSummary } from '../utils/getData'
|
|
|
|
export default function HomePage(): ReactElement {
|
|
const [network, setNetwork] = useState<number>(0)
|
|
const [data, setData] = useState<Summary[]>()
|
|
|
|
function style(state: State) {
|
|
console.log('state', state)
|
|
if (state === State.Down) {
|
|
return styles.down
|
|
} else if (state === State.Warning) {
|
|
return styles.warning
|
|
} else {
|
|
return styles.up
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
async function getStatuses() {
|
|
const summary = await getSummary(network)
|
|
console.log('summary', summary)
|
|
if (summary) setData(summary)
|
|
}
|
|
getStatuses()
|
|
}, [network])
|
|
|
|
console.log('data', data)
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<Head>
|
|
<title>Ocean Protocol Status</title>
|
|
<meta name="description" content="Generated by create next app" />
|
|
<link rel="icon" href="/favicon.ico" />
|
|
</Head>
|
|
<main className={styles.main}>
|
|
<h1 className={styles.title}>Ocean Status</h1>
|
|
<p className={styles.description}>
|
|
Current Status of Ocean Components{' '}
|
|
</p>
|
|
<div className={styles.grid}>
|
|
{data && (
|
|
<>
|
|
{data.map((value: Summary) => (
|
|
<div className={`${styles.card} ${style(value.status)}`}>
|
|
<h2>{value?.component}</h2>
|
|
<p>{value?.status}</p>
|
|
</div>
|
|
))}
|
|
</>
|
|
)}
|
|
</div>
|
|
</main>
|
|
|
|
<footer className={styles.footer}></footer>
|
|
</div>
|
|
)
|
|
}
|