adding onclick functionality to network selector

src/pages/index.tsx

@@ -1,11 +1,11 @@
 import Head from 'next/head'
-import React, { ReactElement, useEffect, useState } from 'react'
+import React, { FormEvent, 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'
 
 export default function HomePage(): ReactElement {
-  const [network, setNetwork] = useState<number>(1)
+  const [network, setNetwork] = useState<number>(0)
   const [networks, setNetworks] = useState<string[]>()
   const [statuses, setStatuses] = useState<Status[]>()
   const [summary, setSummary] = useState<Summary[]>()
@@ -24,13 +24,15 @@ export default function HomePage(): ReactElement {
   function networkStyle(networkIndex: number) {
     if (networkIndex === network) {
       return styles.networkSelected
-    } else return
+    } else return styles.networkUnselected
   }
 
   useEffect(() => {
     async function getStatuses() {
       const statusData = await getData()
+      console.log('statusData', statusData)
       if (statusData) setStatuses(statusData)
+      console.log('statuses', statuses)
 
       const summaryData = getSummary(network, statuses)
       console.log('summaryData', summaryData)
@@ -61,13 +63,14 @@ export default function HomePage(): ReactElement {
         <div className={styles.grid}>
           {networks && (
             <>
-              {networks.map((value: string, index: number) => (
+              {networks.map((value: string, i: number) => (
-                <div
+                <button
-                  key={value}
+                  key={i}
-                  className={`${styles.network} ${networkStyle(index)}`}
+                  className={`${styles.network} ${networkStyle(i)}`}
+                  onClick={() => setNetwork(i)}
                 >
                   {value}
-                </div>
+                </button>
               ))}
             </>
           )}

src/styles/Home.module.css

@@ -4,11 +4,10 @@
 
 .main {
   min-height: 100vh;
-  padding: 4rem 0;
+  padding: 2rem 0;
   flex: 1;
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
   font-family: 'Sharp Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
     Helvetica, Arial, sans-serif;
@@ -53,7 +52,6 @@
 }
 
 .description {
-  margin: 4rem 0;
   line-height: 1.5;
   font-size: 1.5rem;
 }
@@ -88,13 +86,11 @@
 }
 .network {
   display: inline-block;
-  border: 1px solid #e2e2e2;
+  border: 1px solid;
   border-radius: 0.2rem;
   margin-right: calc(2rem / 6);
   margin-bottom: calc(2rem / 6);
-  color: #8b98a9;
+  padding: calc(2rem / 6);
-  background: #fff;
-  padding: calc(2rem / 6) !important;
   box-shadow: none;
   cursor: pointer;
   width: fit-content;
@@ -105,6 +101,14 @@
   font-weight: 600;
   transition: 0.2s ease-out;
 }
+.networkUnselected {
+  color: #8b98a9;
+  background: #fff;
+  border-color: #e2e2e2;
+}
+.networkUnselected:hover {
+  color: #41474e;
+}
 .networkSelected {
   color: #fcfcfc;
   background: #41474e;
@@ -122,13 +126,6 @@
   border: 2px solid #d80606;
 }
 
-.card:hover,
-.card:focus,
-.card:active {
-  color: #0070f3;
-  border-color: #0070f3;
-}
-
 .card h2 {
   margin: 0 0 1rem 0;
   font-size: 1.5rem;

src/utils/getData.ts

@@ -20,10 +20,9 @@ export async function getData(): Promise<Status[]> {
 }
 
 export function getSummary(network: number, data: Status[]): Summary[] {
+  console.log('2. data', data)
   try {
     if (data) {
-      console.log('2. data', data)
-
       const summary: Summary[] = [
         { component: 'Aquarius', status: data[network].aquarius.status },
         { component: 'Provider', status: data[network].provider.status },
@@ -57,12 +56,17 @@ export function getSummary(network: number, data: Status[]): Summary[] {
 }
 
 export function getNetworks(data: Status[]): string[] {
-  if (data) {
+  console.log('3. data', data)
-    const networks: string[] = []
+  try {
-    for (let i = 0; i < data.length; i++) {
+    if (data) {
-      console.log(i, 'data', data[i].network)
+      const networks: string[] = []
-      networks.push(data[i].network)
+      for (let i = 0; i < data.length; i++) {
+        console.log(i, 'data', data[i].network)
+        networks.push(data[i].network)
+      }
+      return networks
     }
-    return networks
+  } catch (error) {
+    console.log(error)
   }
 }