Updating imports on homepage

src/pages/index.tsx

@@ -1,35 +1,14 @@
 import Head from 'next/head'
 import React, { Fragment, ReactElement } from 'react'
-import { State } from '../@types'
 import styles from '../styles/Home.module.css'
 import { getData } from '../utils/getData'
 import LogoAsset from '../images/logo.svg'
-import CheckAsset from '../images/check.svg'
 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) {
-    return <CheckAsset className={`${styles.icon} ${styles.check}`} />
-  } else if (state === State.Outage) {
-    return <span className={styles.icon}>🚨</span>
-  } else {
-    return <span className={styles.icon}>🚧</span>
-  }
-}
-
-function statusStyle(state: State) {
-  if (state === State.Outage) {
-    return styles.outage
-  } else if (state === State.Degraded) {
-    return styles.degraded
-  } else {
-    return styles.normal
-  }
-}
+import { statusIcon, statusStyle } from '../utils/statusHelpers'
 
 export default function HomePage(): ReactElement {
   const { data, error } = useSWR(statusApiUri, getData, {

src/pages/stats.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -24,55 +24,37 @@ export const options = {
     }
   }
 }
-// const options = {
-//   legend: { display: false },
-//   title: {
-//     fontFamily: 'sans-serif',
-//     display: true,
-//     text: 'NFTS Published per week'
-//   }
-// }
 
-// const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July']
+export default function Stats() {
+  const [chartData, setChartData] = useState(null)
 
-export const data = {
-  labels: [],
-  datasets: [
-    {
-      label: 'NFTS Published',
-      data: {
-        '2022-45': 19,
-        '2022-46': 45,
-        '2022-47': 33,
-        '2022-48': 286,
-        '2022-49': 96,
-        '2022-50': 224,
-        '2022-51': 84,
-        '2022-52': 35,
-        '2023-1': 65,
-        '2023-2': 82,
-        '2023-3': 59,
-        '2023-4': 110,
-        '2023-5': 153,
-        '2023-6': 117,
-        '2023-7': 121,
-        '2023-8': 23,
-        '2023-9': 37,
-        '2023-10': 21,
-        '2023-11': 2,
-        '2023-12': 10,
-        '2023-13': 7,
-        '2023-14': 13,
-        '2023-15': 0,
-        '2023-16': 8,
-        '2023-17': 11,
-        '2023-18': 11,
-        '2023-19': 2
-      }
+  useEffect(() => {
+    async function fetchData() {
+      const res = await fetch('http://localhost:8000/stats/core/publishedNFT')
+      const data = await res.json()
+      console.log(data)
+
+      // Assuming the response data is an object with keys as labels and values as data points
+      const labels = Object.keys(data)
+      const datasetData = Object.values(data)
+
+      setChartData({
+        labels: labels,
+        datasets: [
+          {
+            label: 'NFTS Published',
+            data: datasetData
+          }
+        ]
+      })
     }
-  ]
-}
 
-export default function App() {
-  return <Bar options={options} data={data} />
+    fetchData()
+  }, [])
+
+  if (!chartData) {
+    return <div>Loading...</div>
+  }
+
+  return <Bar options={options} data={chartData} />
 }

src/utils/getData.ts

@@ -4,6 +4,8 @@ import { Status } from '../@types'
 export async function getData(url: string): Promise<{ [key: string]: Status }> {
   try {
     const response: AxiosResponse<Status[]> = await axios.get(url)
+    console.log('Got response', response)
+    console.log('Got data', response.data)
     if (!response?.data || response.status !== 200)
       throw Error('ERROR: no data recieved')
 

src/utils/getStats.ts

@@ -0,0 +1,17 @@
+import axios, { AxiosResponse } from 'axios'
+
+export async function getStats(url: string): Promise<any> {
+  try {
+    console.log('Fetching data from', url)
+    const response: AxiosResponse<any[]> = await axios.get(url)
+    console.log('Got response', response)
+    if (!response?.data || response.status !== 200)
+      throw Error('ERROR: no data recieved')
+
+    // transform data into object with network names as keys
+    console.log('Got new data', response.data)
+    return response
+  } catch (error) {
+    console.error(error.message)
+  }
+}

src/utils/statusHelpers.tsx

@@ -0,0 +1,24 @@
+import { State } from '../@types'
+import { ReactElement } from 'react'
+import CheckAsset from '../images/check.svg'
+import styles from '../styles/Home.module.css'
+
+export function statusIcon(state: State): ReactElement {
+  if (state === State.Normal) {
+    return <CheckAsset className={`${styles.icon} ${styles.check}`} />
+  } else if (state === State.Outage) {
+    return <span className={styles.icon}>🚨</span>
+  } else {
+    return <span className={styles.icon}>🚧</span>
+  }
+}
+
+export function statusStyle(state: State) {
+  if (state === State.Outage) {
+    return styles.outage
+  } else if (state === State.Degraded) {
+    return styles.degraded
+  } else {
+    return styles.normal
+  }
+}