import Head from 'next/head' import React, { Fragment, ReactElement, useEffect, useState } from 'react' import { State, Status } from '../@types' import styles from '../styles/Home.module.css' import { getData } from '../utils/getData' import LogoAsset from '../images/logo.svg' import CheckAsset from '../images/check.svg' function statusIcon(state: State): ReactElement { 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 } } export default function HomePage(): ReactElement { const [data, setData] = useState<{ [key: string]: Status }>() useEffect(() => { async function getStatuses() { const data = await getData() setData(data) } getStatuses() }, []) return (
Ocean Protocol Status

Ocean Status

Current Status of Ocean Components

{Object.entries(data || {}).map(([key, value]) => (

{key}

{Object.entries(value) .filter( // TODO: Remove this filter if we fix this on API level // Needs a new `components` key under Status response ([key]) => key !== 'currentBlock' && key !== 'lastUpdatedOn' && key !== 'network' && key !== '_id' && key !== '__v' ) .map(([key, value]) => (

{statusIcon( key === 'market' || key === 'dataFarming' ? value : value.status )}{' '} {key}

{value.version}
))}
))}
) }