Getting networks

src/pages/index.tsx

@@ -1,12 +1,14 @@
 import Head from 'next/head'
 import React, { ReactElement, useEffect, useState } from 'react'
-import { State, Summary } from '../@types'
+import { Status, State, Summary } from '../@types'
 import styles from '../styles/Home.module.css'
-import { getData, getSummary } from '../utils/getData'
+import { getData, getSummary, getNetworks } from '../utils/getData'
 
 export default function HomePage(): ReactElement {
-  const [network, setNetwork] = useState<number>(0)
-  const [data, setData] = useState<Summary[]>()
+  const [network, setNetwork] = useState<number>(3)
+  const [networks, setNetworks] = useState<string[]>()
+  const [statuses, setStatuses] = useState<Status[]>()
+  const [summary, setSummary] = useState<Summary[]>()
 
   function style(state: State) {
     console.log('state', state)
@@ -21,14 +23,22 @@ export default function HomePage(): ReactElement {
 
   useEffect(() => {
     async function getStatuses() {
-      const summary = await getSummary(network)
-      console.log('summary', summary)
-      if (summary) setData(summary)
+      const statusData = await getData()
+      if (statusData) setStatuses(statusData)
+
+      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])
 
-  console.log('data', data)
+  console.log('summary', summary)
+  console.log('~ networks', networks)
 
   return (
     <div className={styles.container}>
@@ -43,9 +53,20 @@ export default function HomePage(): ReactElement {
           Current Status of Ocean Components{' '}
         </p>
         <div className={styles.grid}>
-          {data && (
+          {networks && (
             <>
-              {data.map((value: Summary) => (
+              {networks.map((value: string) => (
+                <div key={value} className={`${styles.card}`}>
+                  <h2>{value}</h2>
+                </div>
+              ))}
+            </>
+          )}
+        </div>
+        <div className={styles.grid}>
+          {summary && (
+            <>
+              {summary.map((value: Summary) => (
                 <div
                   key={value.component}
                   className={`${styles.card} ${style(value.status)}`}

src/utils/getData.ts

@@ -4,12 +4,13 @@ import { statusApiUri } from '../../app.config'
 
 export async function getData(): Promise<Status[]> {
   try {
+    console.log(`${statusApiUri}`)
     const response: AxiosResponse<Status[]> = await axios.get(`${statusApiUri}`)
     if (!response || response.status !== 200 || !response.data)
       console.log('ERROR: no data recieved')
 
-    const data = { ...response.data }
-    console.log('data', data)
+    const data = [...response.data]
+    console.log('1. data length', data.length)
 
     return data
   } catch (error) {
@@ -17,38 +18,50 @@ export async function getData(): Promise<Status[]> {
   }
 }
 
-export async function getSummary(network: number): Promise<Summary[]> {
+export function getSummary(network: number, data: Status[]): Summary[] {
   try {
-    const data = await getData()
-    console.log('data', data)
+    if (data) {
+      console.log('2. data', data)
 
-    const summary: Summary[] = [
-      { component: 'Aquarius', status: data[network].aquarius.status },
-      { component: 'Provider', status: data[network].provider.status },
-      { component: 'Subgraph', status: data[network].subgraph.status },
-      { component: 'Market', status: data[network].market },
-      { component: 'Port', status: data[network].port },
-      {
-        component: 'Data Farming',
-        status: data[network].dataFarming
-      },
-      {
-        component: 'Operator Service',
-        status: data[network].operator.status
-      },
-      {
-        component: 'DAO Grants',
-        status: data[network].daoGrants
-      }
-    ]
-    data[network].faucet.status &&
-      summary.push({
-        component: 'Faucet',
-        status: data[network].faucet.status
-      })
+      const summary: Summary[] = [
+        { component: 'Aquarius', status: data[network].aquarius.status },
+        { component: 'Provider', status: data[network].provider.status },
+        { component: 'Subgraph', status: data[network].subgraph.status },
+        { component: 'Market', status: data[network].market },
+        { component: 'Port', status: data[network].port },
+        {
+          component: 'Data Farming',
+          status: data[network].dataFarming
+        },
+        {
+          component: 'Operator Service',
+          status: data[network].operator.status
+        },
+        {
+          component: 'DAO Grants',
+          status: data[network].daoGrants
+        }
+      ]
+      data[network].faucet.status &&
+        summary.push({
+          component: 'Faucet',
+          status: data[network].faucet.status
+        })
 
-    return summary
+      return summary
+    }
   } catch (error) {
     console.log(error)
   }
 }
+
+export function getNetworks(data: Status[]): string[] {
+  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
+  }
+}