data fetching with useSWR

package-lock.json

@@ -17,6 +17,7 @@
         "next": "12.3.1",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "swr": "^1.3.0",
         "tiny-relative-date": "^1.3.0"
       },
       "devDependencies": {
@@ -6446,6 +6447,14 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/swr": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz",
+      "integrity": "sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==",
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "dev": true,
@@ -10829,6 +10838,12 @@
         "stable": "^0.1.8"
       }
     },
+    "swr": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz",
+      "integrity": "sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==",
+      "requires": {}
+    },
     "text-table": {
       "version": "0.2.0",
       "dev": true

package.json

@@ -20,6 +20,7 @@
     "next": "12.3.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "swr": "^1.3.0",
     "tiny-relative-date": "^1.3.0"
   },
   "devDependencies": {

src/pages/index.tsx

@@ -1,6 +1,6 @@
 import Head from 'next/head'
-import React, { Fragment, ReactElement, useEffect, useState } from 'react'
+import React, { Fragment, ReactElement } from 'react'
-import { State, Status } from '../@types'
+import { State } from '../@types'
 import styles from '../styles/Home.module.css'
 import { getData } from '../utils/getData'
 import LogoAsset from '../images/logo.svg'
@@ -9,6 +9,7 @@ import GithubAsset from '../images/github.svg'
 import addresses from '@oceanprotocol/contracts/addresses/address.json'
 import { statusApiUri } from '../../app.config'
 import relativeDate from 'tiny-relative-date'
+import useSWR from 'swr'
 
 function statusIcon(state: State): ReactElement {
   if (state === State.Normal) {
@@ -31,20 +32,10 @@ function statusStyle(state: State) {
 }
 
 export default function HomePage(): ReactElement {
-  const [data, setData] = useState<{ [key: string]: Status }>()
+  const { data, error } = useSWR(statusApiUri, getData, {
-  const [isLoading, setIsloading] = useState<boolean>()
+    refreshInterval: 60000
-  const [error, setError] = useState<string>()
+  })
-
+  const isLoading = !data && !error
-  useEffect(() => {
-    async function getStatuses() {
-      setIsloading(true)
-      const data = await getData()
-      if (!data) setError(`Could not get data from ${statusApiUri}`)
-      setData(data)
-      setIsloading(false)
-    }
-    getStatuses()
-  }, [])
 
   return (
     <div className={styles.app}>

src/utils/getData.ts

@@ -1,10 +1,9 @@
 import axios, { AxiosResponse } from 'axios'
 import { Status } from '../@types'
-import { statusApiUri } from '../../app.config'
 
-export async function getData(): Promise<{ [key: string]: Status }> {
+export async function getData(url: string): Promise<{ [key: string]: Status }> {
   try {
-    const response: AxiosResponse<Status[]> = await axios.get(`${statusApiUri}`)
+    const response: AxiosResponse<Status[]> = await axios.get(url)
     if (!response?.data || response.status !== 200)
       throw Error('ERROR: no data recieved')