Creating getData util

app.config.js

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

node_modules/.package-lock.json

@@ -1458,6 +1458,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/dotenv": {
+      "version": "16.0.3",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz",
+      "integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/elliptic": {
       "version": "6.5.4",
       "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "axios": "^0.27.2",
+        "dotenv": "^16.0.3",
         "next": "12.3.1",
         "react": "18.2.0",
         "react-dom": "18.2.0"
@@ -1647,6 +1648,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/dotenv": {
+      "version": "16.0.3",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz",
+      "integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/elliptic": {
       "version": "6.5.4",
       "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
@@ -5093,6 +5102,11 @@
         "esutils": "^2.0.2"
       }
     },
+    "dotenv": {
+      "version": "16.0.3",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz",
+      "integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ=="
+    },
     "elliptic": {
       "version": "6.5.4",
       "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "axios": "^0.27.2",
+    "dotenv": "^16.0.3",
     "next": "12.3.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"

pages/index.tsx

@@ -13,90 +13,56 @@ const Home: NextPage = () => {
       </Head>
 
       <main className={styles.main}>
-        <h1 className={styles.title}>
+        <h1 className={styles.title}>Ocean Status</h1>
-          Ocean Status
-        </h1>
 
         <p className={styles.description}>
-        Current Status of Ocean Components{' '}
+          Current Status of Ocean Components{' '}
-          
         </p>
 
         <div className={styles.grid}>
-          <div  className={styles.card}>
+          <div className={styles.card}>
             <h2>Aquarius</h2>
             <p>UP</p>
           </div>
 
-          <div  className={styles.card}>
+          <div className={styles.card}>
             <h2>Provider</h2>
             <p>UP</p>
           </div>
 
-          <div
+          <div className={styles.card}>
-            
-            className={styles.card}
-          >
             <h2>Subgraph</h2>
             <p>UP</p>
           </div>
 
-          <div
+          <div className={styles.card}>
-            className={styles.card}
-          >
             <h2>Market</h2>
-            <p>
+            <p>UP</p>
-              UP
-            </p>
           </div>
-          <div
+          <div className={styles.card}>
-            className={styles.card}
-          >
             <h2>Port</h2>
-            <p>
+            <p>UP</p>
-              UP
-            </p>
           </div>
-          <div
+          <div className={styles.card}>
-            className={styles.card}
-          >
             <h2>Data Farming</h2>
-            <p>
+            <p>UP</p>
-              UP
-            </p>
           </div>
-          <div
+          <div className={styles.card}>
-            className={styles.card}
-          >
             <h2>Operator Service</h2>
-            <p>
+            <p>UP</p>
-              UP
-            </p>
           </div>
-          <div
+          <div className={styles.card}>
-            className={styles.card}
-          >
             <h2>Faucet</h2>
-            <p>
+            <p>UP</p>
-              UP
-            </p>
           </div>
-          <div
+          <div className={styles.card}>
-            className={styles.card}
-          >
             <h2>DAO Grants</h2>
-            <p>
+            <p>UP</p>
-              UP
-            </p>
           </div>
         </div>
       </main>
 
-      <footer className={styles.footer}>
+      <footer className={styles.footer}></footer>
-       
-     
-    
-      </footer>
     </div>
   )
 }

utils/getData.ts

@@ -0,0 +1,18 @@
+import axios, { AxiosResponse } from 'axios'
+import { Status } from '../@types'
+import { statusServiceUri } from '../app.config'
+
+export async function getData(): Promise<Status[] | void> {
+  try {
+    const response: AxiosResponse<Status[]> = await axios.get(
+      `${statusServiceUri}`
+    )
+    if (!response || response.status !== 200 || !response.data) return
+
+    const data = { ...response.data }
+    console.log('data', data)
+    return data
+  } catch (error) {
+    console.log(error)
+  }
+}