Merge pull request #159 from oceanprotocol/issue-152-column-header-no…

…t-updated Column header not updated on new epoch
oceanprotocol · Sep 7, 2023 · 4bb13eb · 4bb13eb · vercel · Sep 7, 2023
2 parents 794baf3 + 1b6893e
commit 4bb13eb
Show file tree

Hide file tree

Showing 3 changed files with 190 additions and 158 deletions.
diff --git a/src/components/AssetTable.tsx b/src/components/AssetTable.tsx
@@ -2,7 +2,6 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { tooltipOptions, tooltipsText } from '../metadata/tootltips'
 
 import { usePredictoorsContext } from '@/contexts/PredictoorsContext'
-import { useSocketContext } from '@/contexts/SocketContext'
 import LiveTime from '@/elements/LiveTime'
 import { TableRowWrapper } from '@/elements/TableRowWrapper'
 import Tooltip from '@/elements/Tooltip'
@@ -42,7 +41,7 @@ export type TAssetTableState = {
 export const AssetTable: React.FC<TAssetTableProps> = ({ contracts }) => {
   const { subscribedPredictoors, currentEpoch, secondsPerEpoch } =
     usePredictoorsContext()
-  const { epochData } = useSocketContext()
+  const [tableColumns, setTableColumns] = useState<any>(assetTableColumns)
   const [assetsData, setAssetsData] = useState<TAssetTableState['AssetsData']>(
     []
   )
@@ -111,68 +110,74 @@ export const AssetTable: React.FC<TAssetTableProps> = ({ contracts }) => {
 
   useEffect(() => {
     if (!currentEpoch) return
-    assetTableColumns[1].Header = formatTime(
+    let newAssetTableColumns = JSON.parse(JSON.stringify(assetTableColumns))
+    newAssetTableColumns[1].Header = formatTime(
       new Date((currentEpoch - secondsPerEpoch) * 1000)
     )
-    assetTableColumns[2].Header = formatTime(new Date(currentEpoch * 1000))
-    assetTableColumns[3].Header = <LiveTime />
-    assetTableColumns[4].Header = (
+    newAssetTableColumns[2].Header = formatTime(new Date(currentEpoch * 1000))
+    newAssetTableColumns[3].Header = <LiveTime />
+    newAssetTableColumns[4].Header = (
       <div className={styles.predictionHeader}>
         <span>
           {formatTime(new Date((currentEpoch + secondsPerEpoch) * 1000))}
         </span>
         <span className={styles.predictionText}>Predictions</span>
       </div>
     )
-    assetTableColumns[5].Header = (
+    newAssetTableColumns[5].Header = (
       <div>
         Accuracy
         <span className={styles.greyText}>{` 24h`}</span>
       </div>
     )
+    setTableColumns(newAssetTableColumns)
   }, [currentEpoch])
 
   return (
-    <table className={styles.table}>
-      <thead>
-        <TableRowWrapper
-          className={styles.tableRow}
-          cellProps={{
-            className: styles.tableHeaderCell
-          }}
-          cellType="th"
-        >
-          {assetTableColumns.map((item) => (
-            <div
-              className={styles.assetHeaderContainer}
-              id={item.accessor}
-              key={`assetHeader${item.accessor}`}
-            >
-              <span>{item.Header}</span>
-              <Tooltip
-                selector={item.accessor}
-                text={tooltipsText[item.Header as keyof typeof tooltipOptions]}
+    tableColumns && (
+      <table className={styles.table}>
+        <thead>
+          <TableRowWrapper
+            className={styles.tableRow}
+            cellProps={{
+              className: styles.tableHeaderCell
+            }}
+            cellType="th"
+          >
+            {tableColumns.map((item: any) => (
+              <div
+                className={styles.assetHeaderContainer}
+                id={item.accessor}
+                key={`assetHeader${item.accessor}`}
+              >
+                <span>{item.Header}</span>
+                <Tooltip
+                  selector={item.accessor}
+                  text={
+                    tooltipsText[item.Header as keyof typeof tooltipOptions]
+                  }
+                />
+              </div>
+            ))}
+          </TableRowWrapper>
+        </thead>
+        {assetsData.length > 0 ? (
+          <tbody>
+            {assetsData.map((item) => (
+              <AssetRow
+                key={`assetRow${item.contract.address}`}
+                assetData={item}
               />
-            </div>
-          ))}
-        </TableRowWrapper>
-      </thead>
-      {assetsData.length > 0 ? (
-        <tbody>
-          {assetsData.map((item) => (
-            <AssetRow
-              key={`assetRow${item.contract.address}`}
-              assetData={item}
-            />
-          ))}
-        </tbody>
-      ) : (
-        <tbody className={styles.message}>
-          <tr>
-            <td>No contracts found</td>
-          </tr>
-        </tbody>
-      )}
-    </table>
+            ))}
+          </tbody>
+        ) : (
+          <tbody className={styles.message}>
+            <tr>
+              <td>No contracts found</td>
+            </tr>
+          </tbody>
+        )}
+      </table>
+    )
   )
 }