From c6b053ce1a5dd4211c60f9c1b3caf4e4456a4aee Mon Sep 17 00:00:00 2001
From: Erika <87762061+NovaT82@users.noreply.github.com>
Date: Mon, 5 Aug 2024 16:11:29 +0200
Subject: [PATCH] fix: blockinfo formatting (#20)

Description
---
Fixes the formatting & typescript errors on the BlockInfo component
The days calculation looks way off though, so please check

Motivation and Context
---
The BlockInfo component was causing the app to crash

How Has This Been Tested?
---
Manually

What process can a PR reviewer use to test or verify this change?
---

<!-- Checklist -->
<!-- 1. Is the title of your PR in the form that would make nice release
notes? The title, excluding the conventional commit
tag, will be included exactly as is in the CHANGELOG, so please think
about it carefully. -->


Breaking Changes
---
x

- [x] None
- [ ] Requires data directory on base node to be deleted
- [ ] Requires hard fork
- [ ] Other - Please specify

<!-- Does this include a breaking change? If so, include this line as a
footer -->
<!-- BREAKING CHANGE: Description what the user should do, e.g. delete a
database, resync the chain -->
---
 .../MiningView/components/BlockInfo.tsx       | 85 ++++++++++---------
 1 file changed, 44 insertions(+), 41 deletions(-)

diff --git a/src/containers/Dashboard/MiningView/components/BlockInfo.tsx b/src/containers/Dashboard/MiningView/components/BlockInfo.tsx
index 4acc2781..87c32a67 100644
--- a/src/containers/Dashboard/MiningView/components/BlockInfo.tsx
+++ b/src/containers/Dashboard/MiningView/components/BlockInfo.tsx
@@ -1,52 +1,55 @@
 import { Stack, Typography, Divider } from '@mui/material';
-import useAppStateStore from "../../../../store/appStateStore.ts";
-import {useEffect, useState} from "react";
+import useAppStateStore from '../../../../store/appStateStore.ts';
+import { useEffect, useState } from 'react';
 
 function BlockInfo() {
-    // let [blockHeight,  blockTime] =  useAppStateStore((state) => ({
-    //     blockHeight: state.blockHeight,
-    //     blockTime: state.blockTime,
-    // }));
+  let { blockHeight, blockTime } = useAppStateStore((state) => ({
+    blockHeight: state.blockHeight,
+    blockTime: state.blockTime,
+  }));
 
-    // const [timeSince, setTimeSince] = useState('');
+  const [timeSince, setTimeSince] = useState('');
 
-    // useEffect(() => {
-    //     // Function to calculate the time difference
-    //     const calculateTimeSince = () => {
-    //         const now = new Date();
-    //         const past = new Date(blockTime * 1000); // Convert seconds to milliseconds
-    //         const diff = now - past;
-    //
-    //         // Convert the difference to days, hours, minutes, and seconds
-    //         const days = Math.floor(diff / (1000 * 60 * 60 * 24));
-    //         const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
-    //         const minutes = Math.floor((diff / 1000 / 60) % 60);
-    //         const seconds = Math.floor((diff / 1000) % 60);
-    //
-    //         if (days > 0) {
-    //             setTimeSince(`${days}.${hours}::${minutes}::${seconds}`);
-    //         } else if (hours > 0) {
-    //             setTimeSince(`${hours}::${minutes}::${seconds}`);
-    //
-    //         }else {
-    //             setTimeSince(`${minutes}::${seconds}`);
-    //         }
-    //     };
-    //
-    //     // Initial calculation
-    //     calculateTimeSince();
-    //
-    //     // Update every second
-    //     const interval = setInterval(calculateTimeSince, 1000);
-    //
-    //     // Cleanup interval on component unmount
-    //     return () => clearInterval(interval);
-    // }, [blockTime]);
+  useEffect(() => {
+    // Function to calculate the time difference
+    const calculateTimeSince = () => {
+      const now: Date = new Date();
+      const past: Date = new Date(blockTime * 1000); // Convert seconds to milliseconds
+      const diff: number = now.getTime() - past.getTime();
+
+      // Convert the difference to days, hours, minutes, and seconds
+      const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+      const hours = Math.floor(
+        (diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+      );
+      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+      const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+
+      if (days > 0) {
+        setTimeSince(
+          `${days} day${days === 1 ? '' : 's'}, ${hours}:${minutes}:${seconds}`
+        );
+      } else if (hours > 0) {
+        setTimeSince(`${hours}:${minutes}:${seconds}`);
+      } else {
+        setTimeSince(`${minutes}:${seconds}`);
+      }
+    };
+
+    // Initial calculation
+    calculateTimeSince();
+
+    // Set interval to update the time since every second
+    const interval = setInterval(calculateTimeSince, 1000);
+
+    // Cleanup interval on component unmount
+    return () => clearInterval(interval);
+  }, [blockTime]);
 
   return (
     <Stack direction="row" spacing={2}>
       <Stack>
-        <Typography variant="h6">#0</Typography>
+        <Typography variant="h6">#{blockHeight}</Typography>
         <Typography variant="body2">Floor</Typography>
       </Stack>
       <Divider orientation="vertical" flexItem />
@@ -56,7 +59,7 @@ function BlockInfo() {
       </Stack>
       <Divider orientation="vertical" flexItem />
       <Stack>
-        <Typography variant="h6">0</Typography>
+        <Typography variant="h6">{timeSince}</Typography>
         <Typography variant="body2">Current floor build time</Typography>
       </Stack>
     </Stack>