updating request to new status API, adding key to componenets in map

app.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  statusServiceUri: process.env.NEXT_STATUS_API_URI || 'http://localhost:8080'
+  statusApiUri: process.env.NEXT_STATUS_API_URI || 'http://localhost:8000'
 }

src/pages/index.tsx

@@ -46,7 +46,10 @@ export default function HomePage(): ReactElement {
           {data && (
             <>
               {data.map((value: Summary) => (
-                <div className={`${styles.card} ${style(value.status)}`}>
+                <div
+                  key={value.component}
+                  className={`${styles.card} ${style(value.status)}`}
+                >
                   <h2>{value?.component}</h2>
                   <p>{value?.status}</p>
                 </div>

src/utils/getData.ts

@@ -1,12 +1,10 @@
 import axios, { AxiosResponse } from 'axios'
 import { Status, Summary } from '../@types'
-import { statusServiceUri } from '../../app.config'
+import { statusApiUri } from '../../app.config'
 
 export async function getData(): Promise<Status[]> {
   try {
-    const response: AxiosResponse<Status[]> = await axios.get(
-      `${statusServiceUri}`
-    )
+    const response: AxiosResponse<Status[]> = await axios.get(`${statusApiUri}`)
     if (!response || response.status !== 200 || !response.data)
       console.log('ERROR: no data recieved')
 
@@ -43,14 +41,14 @@ export async function getSummary(network: number): Promise<Summary[]> {
         status: data[network].daoGrants
       }
     ]
+    data[network].faucet.status &&
+      summary.push({
+        component: 'Faucet',
+        status: data[network].faucet.status
+      })
 
     return summary
   } catch (error) {
     console.log(error)
   }
 }
-
-// data[network].faucet.status && {
-//   component: 'Faucet',
-//   status: data[network].faucet.status
-// }