From dfbb01661f6581b2942bfb1f3d7fbc4dca18a1f8 Mon Sep 17 00:00:00 2001
From: Jamie Hewitt <jamie.hewitt15@gmail.com>
Date: Mon, 10 Oct 2022 15:13:56 +0300
Subject: [PATCH] updated styling when network is selected

---
 src/pages/index.tsx        | 19 ++++++++++++++-----
 src/styles/Home.module.css |  5 +++++
 src/utils/getData.ts       |  1 +
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 78adda3..30c73d9 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -5,12 +5,12 @@ import styles from '../styles/Home.module.css'
 import { getData, getSummary, getNetworks } from '../utils/getData'
 
 export default function HomePage(): ReactElement {
-  const [network, setNetwork] = useState<number>(3)
+  const [network, setNetwork] = useState<number>(1)
   const [networks, setNetworks] = useState<string[]>()
   const [statuses, setStatuses] = useState<Status[]>()
   const [summary, setSummary] = useState<Summary[]>()
 
-  function style(state: State) {
+  function statusStyle(state: State) {
     console.log('state', state)
     if (state === State.Down) {
       return styles.down
@@ -21,6 +21,12 @@ export default function HomePage(): ReactElement {
     }
   }
 
+  function networkStyle(networkIndex: number) {
+    if (networkIndex === network) {
+      return styles.networkSelected
+    } else return
+  }
+
   useEffect(() => {
     async function getStatuses() {
       const statusData = await getData()
@@ -55,8 +61,11 @@ export default function HomePage(): ReactElement {
         <div className={styles.grid}>
           {networks && (
             <>
-              {networks.map((value: string) => (
-                <div key={value} className={`${styles.network}`}>
+              {networks.map((value: string, index: number) => (
+                <div
+                  key={value}
+                  className={`${styles.network} ${networkStyle(index)}`}
+                >
                   {value}
                 </div>
               ))}
@@ -69,7 +78,7 @@ export default function HomePage(): ReactElement {
               {summary.map((value: Summary) => (
                 <div
                   key={value.component}
-                  className={`${styles.card} ${style(value.status)}`}
+                  className={`${styles.card} ${statusStyle(value.status)}`}
                 >
                   <h2>{value?.component}</h2>
                   <p>{value?.status}</p>
diff --git a/src/styles/Home.module.css b/src/styles/Home.module.css
index 5cf38c4..84ab7b3 100644
--- a/src/styles/Home.module.css
+++ b/src/styles/Home.module.css
@@ -105,6 +105,11 @@
   font-weight: 600;
   transition: 0.2s ease-out;
 }
+.networkSelected {
+  color: #fcfcfc;
+  background: #41474e;
+  border-color: #fcfcfc;
+}
 .up {
   border: 2px solid #5fb359;
 }
diff --git a/src/utils/getData.ts b/src/utils/getData.ts
index 1c3617e..a05749c 100644
--- a/src/utils/getData.ts
+++ b/src/utils/getData.ts
@@ -11,6 +11,7 @@ export async function getData(): Promise<Status[]> {
 
     const data = [...response.data]
     console.log('1. data length', data.length)
+    console.log('1. data ', data)
 
     return data
   } catch (error) {