refactor epochprogressbar component

explorer-nextjs/src/components/progressBar/ProgressBar.tsx

@@ -11,7 +11,7 @@ const ProgressBar = ({
     <LinearProgress
       variant="determinate"
       value={value}
-      sx={{ height: 8, borderRadius: 5, width: "100%" }}
+      sx={{ height: 6, borderRadius: 5, width: "100%" }}
       color={color}
     />
   );

explorer-nextjs/src/components/progressBars/DynamicProgressBar.tsx

@@ -1,109 +0,0 @@
-"use client";
-
-import { Typography } from "@mui/material";
-import Box from "@mui/material/Box";
-import LinearProgress from "@mui/material/LinearProgress";
-import * as React from "react";
-
-export interface IDynamicProgressBarProps {
-  overTitle?: string;
-  start: string; // Start timestamp as ISO 8601 string
-  showEpoch: boolean;
-}
-
-export const DynamicProgressBar = (props: IDynamicProgressBarProps) => {
-  const { start, showEpoch, overTitle } = props;
-  const [progress, setProgress] = React.useState(0);
-
-  React.useEffect(() => {
-    // Parse the start timestamp
-    const startTime = new Date(start).getTime();
-    const endTime = startTime + 60 * 60 * 1000; // Add 1 hour to the start time
-
-    // Validate start timestamp
-    if (Number.isNaN(startTime)) {
-      console.error("Invalid start timestamp:", { start });
-      return;
-    }
-
-    // Function to calculate progress
-    const calculateProgress = () => {
-      const currentTime = Date.now();
-      if (currentTime < startTime) {
-        return 0;
-      }
-      if (currentTime >= endTime) {
-        return 100;
-      }
-      const elapsed = currentTime - startTime;
-      const total = endTime - startTime;
-      return (elapsed / total) * 100;
-    };
-
-    // Set initial progress and start timer
-    setProgress(calculateProgress());
-    const timer = setInterval(() => {
-      setProgress(calculateProgress());
-    }, 60000); // Update every minute (60000 milliseconds)
-
-    // Cleanup on unmount
-    return () => {
-      clearInterval(timer);
-    };
-  }, [start]);
-
-  // Helper function to format date
-  const formatDate = (timestamp: number) => {
-    const date = new Date(timestamp);
-    const hours = String(date.getHours()).padStart(2, "0");
-    const minutes = String(date.getMinutes()).padStart(2, "0");
-    const day = String(date.getDate()).padStart(2, "0");
-    const month = String(date.getMonth() + 1).padStart(2, "0"); // Months are 0-based
-    const year = date.getFullYear();
-    return `${hours}:${minutes}, ${day}/${month}/${year}`;
-  };
-
-  const startTime = new Date(start).getTime();
-  const endTime = startTime + 60 * 60 * 1000;
-
-  return (
-    <Box sx={{ width: "100%" }}>
-      {overTitle && (
-        <Typography variant="subtitle2" sx={{ color: "pine.600" }} mb={2}>
-          {overTitle}
-        </Typography>
-      )}
-
-      <LinearProgress
-        variant="determinate"
-        value={progress}
-        sx={{
-          backgroundColor: "#CAD6D7",
-          "& .MuiLinearProgress-bar": {
-            backgroundColor: "#14E76F",
-          },
-        }}
-      />
-      {showEpoch && (
-        <Box mt={2}>
-          <Box display={"flex"} justifyContent={"space-between"}>
-            <Typography variant="h6" sx={{ color: "pine.600" }}>
-              START:
-            </Typography>
-            <Typography variant="h6" sx={{ color: "pine.600" }}>
-              {startTime ? formatDate(startTime) : ""}
-            </Typography>
-          </Box>
-          <Box display={"flex"} justifyContent={"space-between"}>
-            <Typography variant="h6" sx={{ color: "pine.600" }}>
-              END:
-            </Typography>
-            <Typography variant="h6" sx={{ color: "pine.600" }}>
-              {endTime ? formatDate(endTime) : ""}
-            </Typography>
-          </Box>
-        </Box>
-      )}
-    </Box>
-  );
-};

explorer-nextjs/src/components/progressBars/EpochProgressBar.tsx

@@ -0,0 +1,42 @@
+import { Stack } from "@mui/material";
+import Box from "@mui/material/Box";
+import { addHours, differenceInMinutes, format } from "date-fns";
+import * as React from "react";
+import ListItem from "../list/ListItem";
+import ProgressBar from "../progressBar/ProgressBar";
+
+export interface IDynamicProgressBarProps {
+  start: string; // Start timestamp as ISO 8601 string
+  showEpoch: boolean;
+}
+
+const EpochProgressBar = ({ start, showEpoch }: IDynamicProgressBarProps) => {
+  const startTime = format(new Date(start), "HH:mm dd-MM-yyyy");
+  const endTime = format(addHours(new Date(start), 1), "HH:mm dd-MM-yyyy");
+  const totalEpochTime = differenceInMinutes(
+    new Date(endTime),
+    new Date(startTime),
+  );
+
+  const progress =
+    (differenceInMinutes(new Date(), startTime) / totalEpochTime) * 100;
+
+  console.log(progress);
+
+  return (
+    <Box sx={{ width: "100%" }}>
+      <ProgressBar value={progress} color="secondary" />
+
+      {showEpoch && (
+        <Box mt={3}>
+          <Stack gap={0}>
+            <ListItem row label="START" value={startTime} />
+            <ListItem row label="END" value={endTime} />
+          </Stack>
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default EpochProgressBar;