Updating how networks are handled

.env

@@ -1 +1,2 @@
 NEXT_STATUS_API_URI='http://localhost:8080'
+NEXT_NETWORKS='["mainnet","polygon","bsc","moonriver","energyweb","mumbai","moonbase","goerli"]'

.env.example

@@ -1 +1,2 @@
 NEXT_STATUS_API_URI='http://localhost:8080'
+NEXT_NETWORKS='["mainnet","polygon","bsc","moonriver","energyweb","mumbai","moonbase","goerli"]'

app.config.js

@@ -1,3 +1,6 @@
 module.exports = {
-  statusApiUri: process.env.NEXT_STATUS_API_URI || 'http://localhost:8000'
+  statusApiUri: process.env.NEXT_STATUS_API_URI || 'http://localhost:8000',
+  availableNetworks:
+    process.env.NEXT_NETWORKS ||
+    '["mainnet","polygon","bsc","moonriver","energyweb","mumbai","moonbase","goerli"]'
 }

src/pages/index.tsx

@@ -1,14 +1,15 @@
 import Head from 'next/head'
-import React, { FormEvent, ReactElement, useEffect, useState } from 'react'
+import React, { ReactElement, useEffect, useState } from 'react'
 import { Status, State, Summary } from '../@types'
 import styles from '../styles/Home.module.css'
-import { getData, getSummary, getNetworks } from '../utils/getData'
+import { getData, getSummary } from '../utils/getData'
+import { availableNetworks } from '../../app.config'
 
 export default function HomePage(): ReactElement {
-  const [network, setNetwork] = useState<number>(0)
+  const [network, setNetwork] = useState<string>('mainnet')
-  const [networks, setNetworks] = useState<string[]>()
   const [statuses, setStatuses] = useState<Status[]>()
   const [summary, setSummary] = useState<Summary[]>()
+  const networks = JSON.parse(availableNetworks)
 
   function statusStyle(state: State) {
     console.log('state', state)
@@ -21,8 +22,8 @@ export default function HomePage(): ReactElement {
     }
   }
 
-  function networkStyle(networkIndex: number) {
+  function networkStyle(currentNet: string) {
-    if (networkIndex === network) {
+    if (currentNet === network) {
       return styles.networkSelected
     } else return styles.networkUnselected
   }
@@ -37,10 +38,6 @@ export default function HomePage(): ReactElement {
       const summaryData = getSummary(network, statuses)
       console.log('summaryData', summaryData)
       if (summaryData) setSummary(summaryData)
-
-      const networksData = getNetworks(statuses)
-      console.log('networksData', networksData)
-      if (networksData) setNetworks(networksData)
     }
     getStatuses()
   }, [network])
@@ -66,8 +63,8 @@ export default function HomePage(): ReactElement {
               {networks.map((value: string, i: number) => (
                 <button
                   key={i}
-                  className={`${styles.network} ${networkStyle(i)}`}
+                  className={`${styles.network} ${networkStyle(value)}`}
-                  onClick={() => setNetwork(i)}
+                  onClick={() => setNetwork(value)}
                 >
                   {value}
                 </button>

src/utils/getData.ts

@@ -19,33 +19,37 @@ export async function getData(): Promise<Status[]> {
   }
 }
 
-export function getSummary(network: number, data: Status[]): Summary[] {
+export function getSummary(network: string, data: Status[]): Summary[] {
   console.log('2. data', data)
   try {
     if (data) {
+      let status: Status
+      data.forEach((element) => {
+        if (element.network === network) return (status = element)
+      })
       const summary: Summary[] = [
-        { component: 'Aquarius', status: data[network].aquarius.status },
+        { component: 'Aquarius', status: status.aquarius.status },
-        { component: 'Provider', status: data[network].provider.status },
+        { component: 'Provider', status: status.provider.status },
-        { component: 'Subgraph', status: data[network].subgraph.status },
+        { component: 'Subgraph', status: status.subgraph.status },
-        { component: 'Market', status: data[network].market },
+        { component: 'Market', status: status.market },
-        { component: 'Port', status: data[network].port },
+        { component: 'Port', status: status.port },
         {
           component: 'Data Farming',
-          status: data[network].dataFarming
+          status: status.dataFarming
         },
         {
           component: 'Operator Service',
-          status: data[network].operator.status
+          status: status.operator.status
         },
         {
           component: 'DAO Grants',
-          status: data[network].daoGrants
+          status: status.daoGrants
         }
       ]
-      data[network].faucet.status &&
+      status.faucet.status &&
         summary.push({
           component: 'Faucet',
-          status: data[network].faucet.status
+          status: status.faucet.status
         })
 
       return summary
@@ -54,19 +58,3 @@ export function getSummary(network: number, data: Status[]): Summary[] {
     console.log(error)
   }
 }
-
-export function getNetworks(data: Status[]): string[] {
-  console.log('3. data', data)
-  try {
-    if (data) {
-      const networks: string[] = []
-      for (let i = 0; i < data.length; i++) {
-        console.log(i, 'data', data[i].network)
-        networks.push(data[i].network)
-      }
-      return networks
-    }
-  } catch (error) {
-    console.log(error)
-  }
-}