import Head from 'next/head' import React, { ReactElement, useEffect, useState } from 'react' import { Status, State, Summary, NetworkSummary } from '../@types' import styles from '../styles/Home.module.css' import { getData, getNetworkSUmmary, getSummary } from '../utils/getData' export default function HomePage(): ReactElement { const [network, setNetwork] = useState('mainnet') const [summary, setSummary] = useState() const [networks, setNetworks] = useState() function statusIcon(state: State): string { if (state === State.Up) { return '✅' } else if (state === State.Down) { return '🚨' } else { return '🚧' } } function statusStyle(state: State) { if (state === State.Down) { return styles.down } else if (state === State.Warning) { return styles.warning } else { return styles.up } } function networkStyle(currentNet: string) { if (currentNet === network) { return styles.networkSelected } else return styles.networkUnselected } useEffect(() => { async function getStatuses() { const statusData = await getData() const summaryData = getSummary(network, statusData) if (summaryData) setSummary(summaryData) const networkSummary = getNetworkSUmmary(statusData) if (networkSummary) setNetworks(networkSummary) } getStatuses() }, [network]) return (
Ocean Protocol Status

Ocean Status

Current Status of Ocean Components{' '}

{networks && ( <> {networks.map((network: NetworkSummary, i: number) => ( ))} )}
{summary && ( <> {summary.map((value: Summary) => (

{value?.component}

{value?.status}

))} )}
) }