status-frontend/src/pages/index.tsx

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<string>('mainnet')
  const [summary, setSummary] = useState<Summary[]>()
  const [networks, setNetworks] = useState<NetworkSummary[]>()

  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 (
    <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}>
          {networks && (
            <>
              {networks.map((network: NetworkSummary, i: number) => (
                <button
                  key={i}
                  className={`${styles.network} ${networkStyle(network.name)}`}
                  onClick={() => setNetwork(network.name)}
                >
                  <span>
                    {network.name} {statusIcon(network.status)}
                  </span>
                </button>
              ))}
            </>
          )}
        </div>
        <div className={styles.grid}>
          {summary && (
            <>
              {summary.map((value: Summary) => (
                <div
                  key={value.component}
                  className={`${styles.card} ${statusStyle(value.status)}`}
                >
                  <h2>{value?.component}</h2>
                  <p>{value?.status}</p>
                </div>
              ))}
            </>
          )}
        </div>
      </main>

      <footer className={styles.footer}></footer>
    </div>
  )
}
next.js setup 2022-09-29 16:25:10 +02:00			`import Head from 'next/head'`
Updating how networks are handled 2022-10-10 17:02:21 +02:00			`import React, { ReactElement, useEffect, useState } from 'react'`
Showing emoji for network status 2022-10-17 14:34:22 +02:00			`import { Status, State, Summary, NetworkSummary } from '../@types'`
next.js setup 2022-09-29 16:25:10 +02:00			`import styles from '../styles/Home.module.css'`
Showing emoji for network status 2022-10-17 14:34:22 +02:00			`import { getData, getNetworkSUmmary, getSummary } from '../utils/getData'`
Calling getStatus from home page 2022-09-30 12:47:53 +02:00
			`export default function HomePage(): ReactElement {`
Updating how networks are handled 2022-10-10 17:02:21 +02:00			`const [network, setNetwork] = useState<string>('mainnet')`
Getting networks 2022-10-10 13:40:07 +02:00			`const [summary, setSummary] = useState<Summary[]>()`
Showing emoji for network status 2022-10-17 14:34:22 +02:00			`const [networks, setNetworks] = useState<NetworkSummary[]>()`

			`function statusIcon(state: State): string {`
			`if (state === State.Up) {`
			`return '✅'`
			`} else if (state === State.Down) {`
			`return '🚨'`
Removing console logs 2022-10-17 14:36:37 +02:00			`} else {`
			`return '🚧'`
Showing emoji for network status 2022-10-17 14:34:22 +02:00			`}`
			`}`
Getting summary data + mapping it onto homepage 2022-10-05 15:21:07 +02:00
updated styling when network is selected 2022-10-10 14:13:56 +02:00			`function statusStyle(state: State) {`
Getting summary data + mapping it onto homepage 2022-10-05 15:21:07 +02:00			`if (state === State.Down) {`
			`return styles.down`
			`} else if (state === State.Warning) {`
			`return styles.warning`
			`} else {`
			`return styles.up`
			`}`
			`}`
Calling getStatus from home page 2022-09-30 12:47:53 +02:00
Updating how networks are handled 2022-10-10 17:02:21 +02:00			`function networkStyle(currentNet: string) {`
			`if (currentNet === network) {`
updated styling when network is selected 2022-10-10 14:13:56 +02:00			`return styles.networkSelected`
adding onclick functionality to network selector 2022-10-10 15:57:47 +02:00			`} else return styles.networkUnselected`
updated styling when network is selected 2022-10-10 14:13:56 +02:00			`}`

Calling getStatus from home page 2022-09-30 12:47:53 +02:00			`useEffect(() => {`
			`async function getStatuses() {`
Getting networks 2022-10-10 13:40:07 +02:00			`const statusData = await getData()`
Updating data format & improving error handling 2022-10-17 12:51:32 +02:00			`const summaryData = getSummary(network, statusData)`
Getting networks 2022-10-10 13:40:07 +02:00			`if (summaryData) setSummary(summaryData)`
Showing emoji for network status 2022-10-17 14:34:22 +02:00			`const networkSummary = getNetworkSUmmary(statusData)`
			`if (networkSummary) setNetworks(networkSummary)`
Calling getStatus from home page 2022-09-30 12:47:53 +02:00			`}`
			`getStatuses()`
Getting summary data + mapping it onto homepage 2022-10-05 15:21:07 +02:00			`}, [network])`

next.js setup 2022-09-29 16:25:10 +02:00			`return (`
			`<div className={styles.container}>`
			`<Head>`
Editing page to show each component status 2022-09-29 16:42:07 +02:00			`<title>Ocean Protocol Status</title>`
next.js setup 2022-09-29 16:25:10 +02:00			`<meta name="description" content="Generated by create next app" />`
			`<link rel="icon" href="/favicon.ico" />`
			`</Head>`
			`<main className={styles.main}>`
Creating getData util 2022-09-30 12:16:56 +02:00			`<h1 className={styles.title}>Ocean Status</h1>`
next.js setup 2022-09-29 16:25:10 +02:00			`<p className={styles.description}>`
Creating getData util 2022-09-30 12:16:56 +02:00			`Current Status of Ocean Components{' '}`
next.js setup 2022-09-29 16:25:10 +02:00			`</p>`
			`<div className={styles.grid}>`
Getting networks 2022-10-10 13:40:07 +02:00			`{networks && (`
			`<>`
Showing emoji for network status 2022-10-17 14:34:22 +02:00			`{networks.map((network: NetworkSummary, i: number) => (`
adding onclick functionality to network selector 2022-10-10 15:57:47 +02:00			`<button`
			`key={i}`
Showing emoji for network status 2022-10-17 14:34:22 +02:00			className={`${styles.network} ${networkStyle(network.name)}`}
			`onClick={() => setNetwork(network.name)}`
updated styling when network is selected 2022-10-10 14:13:56 +02:00			`>`
Showing emoji for network status 2022-10-17 14:34:22 +02:00			`<span>`
			`{network.name} {statusIcon(network.status)}`
			`</span>`
adding onclick functionality to network selector 2022-10-10 15:57:47 +02:00			`</button>`
Getting networks 2022-10-10 13:40:07 +02:00			`))}`
			`</>`
			`)}`
			`</div>`
			`<div className={styles.grid}>`
			`{summary && (`
Updating port, types, and data imports 2022-10-05 13:15:54 +02:00			`<>`
Getting networks 2022-10-10 13:40:07 +02:00			`{summary.map((value: Summary) => (`
updating request to new status API, adding key to componenets in map 2022-10-06 16:43:52 +02:00			`<div`
			`key={value.component}`
updated styling when network is selected 2022-10-10 14:13:56 +02:00			className={`${styles.card} ${statusStyle(value.status)}`}
updating request to new status API, adding key to componenets in map 2022-10-06 16:43:52 +02:00			`>`
Getting summary data + mapping it onto homepage 2022-10-05 15:21:07 +02:00			`<h2>{value?.component}</h2>`
			`<p>{value?.status}</p>`
Updating port, types, and data imports 2022-10-05 13:15:54 +02:00			`</div>`
Getting summary data + mapping it onto homepage 2022-10-05 15:21:07 +02:00			`))}`
Updating port, types, and data imports 2022-10-05 13:15:54 +02:00			`</>`
			`)}`
next.js setup 2022-09-29 16:25:10 +02:00			`</div>`
			`</main>`

Creating getData util 2022-09-30 12:16:56 +02:00			`<footer className={styles.footer}></footer>`
next.js setup 2022-09-29 16:25:10 +02:00			`</div>`
			`)`
			`}`