From a3dd85e79627496afb847f1108b5f0a0afcdd053 Mon Sep 17 00:00:00 2001
From: harbassan <harbassan@hotmail.com>
Date: Wed, 18 Sep 2024 00:30:29 +1200
Subject: [PATCH] chore(TimerComponent): completely remove

---
 .../TimerComponent/Notification.jsx           | 81 -------------------
 .../src/components/TimerComponent/PopUp.jsx   | 22 -----
 .../components/TimerComponent/ShowCounter.jsx | 20 -----
 .../src/components/TimerComponent/index.jsx   | 34 --------
 .../src/components/TimerComponent/styles.css  | 62 --------------
 .../TimerComponent/useCountdown.jsx           | 33 --------
 .../playScenario/PlayScenarioCanvas.jsx       |  8 --
 7 files changed, 260 deletions(-)
 delete mode 100644 frontend/src/components/TimerComponent/Notification.jsx
 delete mode 100644 frontend/src/components/TimerComponent/PopUp.jsx
 delete mode 100644 frontend/src/components/TimerComponent/ShowCounter.jsx
 delete mode 100644 frontend/src/components/TimerComponent/index.jsx
 delete mode 100644 frontend/src/components/TimerComponent/styles.css
 delete mode 100644 frontend/src/components/TimerComponent/useCountdown.jsx

diff --git a/frontend/src/components/TimerComponent/Notification.jsx b/frontend/src/components/TimerComponent/Notification.jsx
deleted file mode 100644
index c21b96cf..00000000
--- a/frontend/src/components/TimerComponent/Notification.jsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import Box from "@material-ui/core/Box";
-import Button from "@material-ui/core/Button";
-import Modal from "@material-ui/core/Modal";
-import Typography from "@material-ui/core/Typography";
-import { useState } from "react";
-
-const style = {
-  position: "absolute",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%, -50%)",
-  width: "20%",
-  bgcolor: "background.paper",
-  border: "2px solid #000",
-  boxShadow: 24,
-  p: 4,
-};
-
-function Notification({ setTime, sceneTime }) {
-  const [open, setOpen] = useState(true);
-  const handleClose = () => setOpen(false);
-  const closeTab = () => window.close();
-
-  /* function to restart the scenario upon timer completion */
-  function handleRestartScenario() {
-    window.location.href = window.parent.location;
-  }
-
-  return (
-    <Modal
-      open={open}
-      onClose={handleClose}
-      aria-labelledby="modal-modal-title"
-      aria-describedby="modal-modal-description"
-    >
-      <Box sx={style}>
-        <Typography id="modal-modal-title" variant="h6" component="h2">
-          Out of Time!
-        </Typography>
-        <Typography id="modal-modal-description" sx={{ mt: 2 }}>
-          Exit the scenario or continue:
-        </Typography>
-        <div style={{ "margin-top": "5%" }}>
-          <Button variant="contained" color="black" onClick={closeTab}>
-            Exit
-          </Button>
-          <Button
-            variant="contained"
-            color="black"
-            onClick={handleClose}
-            style={{ marginLeft: "10%" }}
-          >
-            Continue
-          </Button>
-          <Button
-            variant="contained"
-            color="black"
-            onClick={handleRestartScenario}
-            style={{ "margin-top": "5%" }}
-          >
-            Restart Scenario
-          </Button>
-          <Button
-            variant="contained"
-            color="black"
-            onClick={() =>
-              setTime(
-                new Date().setSeconds(new Date().getSeconds() + sceneTime)
-              )
-            }
-            style={{ "margin-top": "5%" }}
-          >
-            Restart Scene
-          </Button>
-        </div>
-      </Box>
-    </Modal>
-  );
-}
-
-export default Notification;
diff --git a/frontend/src/components/TimerComponent/PopUp.jsx b/frontend/src/components/TimerComponent/PopUp.jsx
deleted file mode 100644
index 4c1df7bd..00000000
--- a/frontend/src/components/TimerComponent/PopUp.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-const style = {
-  position: "absolute",
-  bottom: "0%",
-  right: "0%",
-  width: "20%",
-  backgroundColor: "red",
-  border: "2px solid #000",
-  margin: 0,
-  padding: "40px",
-};
-
-function PopUp({ seconds }) {
-  return (
-    <p style={style}>
-      {seconds > 15
-        ? "You have less than 30 seconds left!"
-        : "You have less than 15 seconds left!"}
-    </p>
-  );
-}
-
-export default PopUp;
diff --git a/frontend/src/components/TimerComponent/ShowCounter.jsx b/frontend/src/components/TimerComponent/ShowCounter.jsx
deleted file mode 100644
index 60588af1..00000000
--- a/frontend/src/components/TimerComponent/ShowCounter.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-const DateTimeDisplay = ({ value, type, isDanger }) => {
-  return (
-    <div className={isDanger ? "countdown danger" : "countdown"}>
-      <p>{value}</p>
-      <span>{type}</span>
-    </div>
-  );
-};
-
-const ShowCounter = ({ minutes, seconds }) => {
-  return (
-    <div className="show-counter ">
-      <DateTimeDisplay value={minutes} type="Mins" isDanger={false} />
-      <p>:</p>
-      <DateTimeDisplay value={seconds} type="Seconds" isDanger={false} />
-    </div>
-  );
-};
-
-export default ShowCounter;
diff --git a/frontend/src/components/TimerComponent/index.jsx b/frontend/src/components/TimerComponent/index.jsx
deleted file mode 100644
index 53379580..00000000
--- a/frontend/src/components/TimerComponent/index.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { useEffect, useState } from "react";
-import Notification from "./Notification";
-import PopUp from "./PopUp";
-import ShowCounter from "./ShowCounter";
-import "./styles.css";
-import useCountdown from "./useCountdown";
-
-const CountdownTimer = ({ targetDate, sceneTime }) => {
-  const [time, setTime] = useState(
-    new Date().setSeconds(new Date().getSeconds() + sceneTime)
-  );
-
-  useEffect(() => {
-    setTime(targetDate);
-  }, [targetDate]);
-
-  const [days, hours, minutes, seconds] = useCountdown(time);
-  const totalTime = days + hours + minutes + seconds;
-
-  if (totalTime <= 0) {
-    return <Notification setTime={setTime} sceneTime={sceneTime} />;
-  }
-  return (
-    <div>
-      {totalTime > 25 && totalTime <= 30 && <PopUp seconds={seconds} />}
-
-      {totalTime > 10 && totalTime <= 15 && <PopUp seconds={seconds} />}
-
-      <ShowCounter minutes={minutes} seconds={seconds} />
-    </div>
-  );
-};
-
-export default CountdownTimer;
diff --git a/frontend/src/components/TimerComponent/styles.css b/frontend/src/components/TimerComponent/styles.css
deleted file mode 100644
index 2f5bb2e4..00000000
--- a/frontend/src/components/TimerComponent/styles.css
+++ /dev/null
@@ -1,62 +0,0 @@
-.expired-notice {
-  text-align: center;
-  padding: 2rem;
-  border: 1px solid #ebebeb;
-  border-radius: 0.25rem;
-  margin: 0.5rem;
-}
-
-.expired-notice > span {
-  font-size: 2.5rem;
-  font-weight: bold;
-  color: red;
-}
-
-.expired-notice > p {
-  font-size: 1.5rem;
-}
-
-.show-counter {
-  padding: 0.5rem;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-}
-
-.show-counter .countdown-link {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  font-weight: 700;
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-  padding: 0.5rem;
-  border: 1px solid #ebebeb;
-  border-radius: 0.25rem;
-  text-decoration: none;
-  color: #000;
-}
-
-.show-counter .countdown {
-  line-height: 1.25rem;
-  padding: 0 0.75rem 0 0.75rem;
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-}
-
-.show-counter .countdown.danger {
-  color: #ff0000;
-}
-
-.show-counter .countdown > p {
-  margin: 0;
-}
-
-.show-counter .countdown > span {
-  text-transform: uppercase;
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
diff --git a/frontend/src/components/TimerComponent/useCountdown.jsx b/frontend/src/components/TimerComponent/useCountdown.jsx
deleted file mode 100644
index 9a57eb69..00000000
--- a/frontend/src/components/TimerComponent/useCountdown.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { useEffect, useState } from "react";
-
-const getReturnValues = (countDown) => {
-  // calculate time left
-  const days = Math.floor(countDown / (1000 * 60 * 60 * 24));
-  const hours = Math.floor(
-    (countDown % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
-  );
-  const minutes = Math.floor((countDown % (1000 * 60 * 60)) / (1000 * 60));
-  const seconds = Math.floor((countDown % (1000 * 60)) / 1000);
-
-  return [days, hours, minutes, seconds];
-};
-
-const useCountdown = (targetDate) => {
-  const countDownDate = new Date(targetDate).getTime();
-
-  const [countDown, setCountDown] = useState(
-    countDownDate - new Date().getTime()
-  );
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setCountDown(countDownDate - new Date().getTime());
-    }, 1000);
-
-    return () => clearInterval(interval);
-  }, [countDownDate]);
-
-  return getReturnValues(countDown);
-};
-
-export default useCountdown;
diff --git a/frontend/src/features/playScenario/PlayScenarioCanvas.jsx b/frontend/src/features/playScenario/PlayScenarioCanvas.jsx
index 807ecb79..6f172ad6 100644
--- a/frontend/src/features/playScenario/PlayScenarioCanvas.jsx
+++ b/frontend/src/features/playScenario/PlayScenarioCanvas.jsx
@@ -77,14 +77,6 @@ export default function PlayScenarioCanvas({
 
         return componentResolver(component, index, action);
       })}
-      {scene.time && (
-        <CountdownTimer
-          targetDate={new Date().setSeconds(
-            new Date().getSeconds() + scene.time
-          )}
-          sceneTime={scene.time}
-        />
-      )}
       <ResetConfirmationModal
         isOpen={isModalOpen}
         onConfirm={handleConfirmReset}