Updating port, types, and data imports

.env

@@ -0,0 +1 @@
+NEXT_STATUS_API_URI='http://localhost:8080'

.env.example

@@ -0,0 +1 @@
+NEXT_STATUS_API_URI='http://localhost:8080'

@types/index.d.ts

@@ -30,8 +30,9 @@ export interface ProviderStatus {
 export interface AquariusStatus {
   status?: State
   response?: number
-  chain?: boolean
+  validChainList?: boolean
   version?: string
+  monitorVersion?: string
   latestRelease?: string
   block?: number
   validQuery?: boolean
@@ -77,6 +78,7 @@ export interface dbRow {
   aquariusResponse: number
   aquariusChain: number
   aquariusVersion: string
+  aquariusMonitorVersion: string
   aquariusLatestRelease: string
   aquariusBlock: number
   aquariusValidQuery: number

app.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  statusServiceUri: process.env.NEXT_STATUS_API_URI || 'http://localhost:3000'
+  statusServiceUri: process.env.NEXT_STATUS_API_URI || 'http://localhost:8080'
 }

pages/index.tsx

@@ -1,19 +1,19 @@
-import type { NextPage } from 'next'
 import Head from 'next/head'
-import Image from 'next/image'
-import { ReactElement, useEffect, useState } from 'react'
+import React, { ReactElement, useEffect, useState } from 'react'
 import { Status } from '../@types'
 import styles from '../styles/Home.module.css'
 import { getData } from '../utils/getData'
 
 export default function HomePage(): ReactElement {
   const [statuses, setStatuses] = useState<Status[]>()
+  const [network, setNetwork] = useState<number>(1)
 
   useEffect(() => {
     async function getStatuses() {
       const data = await getData()
       data && setStatuses(data)
-      console.log('statuses', statuses)
+      // console.log('statuses', statuses)
+      // console.log('statuses?[1].aquarius.status', statuses[1].aquarius.status)
     }
     getStatuses()
   }, [])
@@ -25,54 +25,56 @@ export default function HomePage(): ReactElement {
         <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}>
-          <div className={styles.card}>
-            <h2>Aquarius</h2>
-            <p>UP</p>
-          </div>
+          {statuses && (
+            <>
+              <div className={styles.card}>
+                <h2>Aquarius</h2>
+                <p>{statuses[network].aquarius.status}</p>
+              </div>
+              <div className={styles.card}>
+                <h2>Provider</h2>
+                <p>{statuses[network].provider.status}</p>
+              </div>
 
-          <div className={styles.card}>
-            <h2>Provider</h2>
-            <p>UP</p>
-          </div>
+              <div className={styles.card}>
+                <h2>Subgraph</h2>
+                <p>{statuses[network].subgraph.status}</p>
+              </div>
 
-          <div className={styles.card}>
-            <h2>Subgraph</h2>
-            <p>UP</p>
-          </div>
-
-          <div className={styles.card}>
-            <h2>Market</h2>
-            <p>UP</p>
-          </div>
-          <div className={styles.card}>
-            <h2>Port</h2>
-            <p>UP</p>
-          </div>
-          <div className={styles.card}>
-            <h2>Data Farming</h2>
-            <p>UP</p>
-          </div>
-          <div className={styles.card}>
-            <h2>Operator Service</h2>
-            <p>UP</p>
-          </div>
-          <div className={styles.card}>
-            <h2>Faucet</h2>
-            <p>UP</p>
-          </div>
-          <div className={styles.card}>
-            <h2>DAO Grants</h2>
-            <p>UP</p>
-          </div>
+              <div className={styles.card}>
+                <h2>Market</h2>
+                <p>{statuses[network].market}</p>
+              </div>
+              <div className={styles.card}>
+                <h2>Port</h2>
+                <p>{statuses[network].port}</p>
+              </div>
+              <div className={styles.card}>
+                <h2>Data Farming</h2>
+                <p>{statuses[network].dataFarming}</p>
+              </div>
+              <div className={styles.card}>
+                <h2>Operator Service</h2>
+                <p>{statuses[network].operator.status}</p>
+              </div>
+              {statuses[network].faucet.status && (
+                <div className={styles.card}>
+                  <h2>Faucet</h2>
+                  <p>{statuses[network].faucet.status}</p>
+                </div>
+              )}
+              <div className={styles.card}>
+                <h2>DAO Grants</h2>
+                <p>{statuses[network].daoGrants}</p>
+              </div>
+            </>
+          )}
         </div>
       </main>
 

tsconfig.json

@@ -51,4 +51,3 @@
   "exclude": ["node_modules", ".next", "*.js"],
   "include": ["./src/**/*", "./tests/**/*", "./next-env.d.ts", "./content/**/*"]
 }
-