oceanprotocol/status-frontend
1
0
Fork 0
mirror of https://github.com/oceanprotocol/status-frontend.git synced 2024-11-22 01:46:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Getting networks

Browse Source
This commit is contained in:
Jamie Hewitt 2022-10-10 14:40:07 +03:00
parent 3110514c16
commit 9856928f3e
2 changed files with 74 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/pages/index.tsx
View File

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

73
src/utils/getData.ts
View File

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