updated timer to include hours

sn163 · Mar 30, 2024 · 19f4db5 · 19f4db5
1 parent 43facbd
commit 19f4db5
Show file tree

Hide file tree

Showing 2 changed files with 126 additions and 103 deletions.
diff --git a/src/app/_components/Dashboard.tsx b/src/app/_components/Dashboard.tsx
@@ -1,115 +1,138 @@
-import { CSSProperties, useEffect, useMemo, useRef, useState } from "react";
+import {
+	CSSProperties,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
 
 type DashBoardProps = {
-  startMin: number;
-  startSec: number;
+	startHr: number;
+	startMin: number;
+	startSec: number;
 };
 
-export default function Dashboard({ startMin, startSec }: DashBoardProps) {
-  const [activeTimer, setActiveTimer] = useState(false);
-  const [minutes, setMinutes] = useState(startMin);
-  const [seconds, setSeconds] = useState(startSec);
-  const [percentage, setPercentage] = useState(100);
+export default function Dashboard({
+	startHr,
+	startMin,
+	startSec,
+}: DashBoardProps) {
+	const [activeTimer, setActiveTimer] = useState(false);
+	const [hours, setHours] = useState(startHr);
+	const [minutes, setMinutes] = useState(startMin);
+	const [seconds, setSeconds] = useState(startSec);
+	const [percentage, setPercentage] = useState(100);
 
-  // turn 
-  const timeToSecs = (min:number, sec:number):number => min * 60 + sec;
-
-  const totalStartSec = useMemo(
-    () => timeToSecs(startMin, startSec),
-    [startMin, startSec]
-  );
+	const timeToSecs = (hr: number = 0, min: number, sec: number): number =>
+		hr * 3600 + min * 60 + sec;
 
-  const timerRef = useRef<NodeJS.Timeout>();
+	const totalStartSec = useMemo(
+		() => timeToSecs(startHr, startMin, startSec),
+		[startHr, startMin, startSec]
+	);
 
-  useEffect(() => {
-    if (activeTimer) {
-      timerRef.current = setInterval(() => {
-        if (seconds > 0) {
-          setSeconds(seconds - 1);
-        }
-        if (seconds === 0) {
-          if (minutes === 0) {
-            clearInterval(timerRef.current);
-          } else {
-            setMinutes(minutes - 1);
-            setSeconds(59);
-          }
-        }
-      }, 1000);
-    }
-    return () => clearInterval(timerRef.current);
-  }, [activeTimer, minutes, seconds]);
+	const timerRef = useRef<NodeJS.Timeout>();
 
-  useEffect(() => {
-    setPercentage(Math.abs((timeToSecs(minutes, seconds) / totalStartSec) * 100));
-    console.log((timeToSecs(minutes, seconds) / totalStartSec) * 100);
-  }, [minutes, seconds, totalStartSec]);
+	useEffect(() => {
+		if (activeTimer) {
+			timerRef.current = setInterval(() => {
+				if (seconds === 0) {
+					if (minutes === 0) {
+						if (hours === 0) {
+							setActiveTimer(false);
+						} else {
+							setHours(hours - 1);
+							setMinutes(59);
+							setSeconds(59);
+						}
+					} else {
+						setMinutes(minutes - 1);
+						setSeconds(59);
+					}
+				} else {
+					setSeconds(seconds - 1);
+				}
+			}, 1000);
+		} else {
+			clearInterval(timerRef.current);
+		}
+		return () => clearInterval(timerRef.current);
+	}, [activeTimer, hours, minutes, seconds]);
 
-  const restart = () => {
-    // Clears the interval to stop the timer from updating
-    setActiveTimer(false);
-    setMinutes(startMin);
-    setSeconds(startSec);
-  };
+	useEffect(() => {
+		setPercentage((timeToSecs(hours, minutes, seconds) / totalStartSec) * 100);
+	}, [totalStartSec, hours, minutes, seconds]);
 
-  const pause = () => {
-    // Clears the interval to stop the timer from updating
-    if (activeTimer) {
-      setActiveTimer(false);
-      clearInterval(timerRef.current);
-    }
-  };
+	const restart = () => {
+		// Clears the interval to stop the timer from updating
+		setActiveTimer(false);
+		setHours(startHr);
+		setMinutes(startMin);
+		setSeconds(startSec);
+	};
 
-  return (
-    <main className="flex min-h-screen flex-col items-center space-y-10 p-24">
-      <div
-        className="radial-progress bg-primary text-white border-4 border-primary"
-        style={
-          {
-            "--value": percentage,
-            "--size": "12rem",
-            "--thickness": "2px",
-          } as CSSProperties
-        }
-        role="progressbar"
-      >
-        <div className="grid grid-flow-col gap-1 text-center auto-cols-max">
-          <div className="flex flex-col text-white">
-            <span className="countdown font-mono text-2xl">
-              <span style={{ "--value": minutes } as CSSProperties}></span>:
-            </span>
-            min
-          </div>
+	const pause = () => {
+		// Clears the interval to stop the timer from updating
+		setActiveTimer(false);
+	};
+
+	return (
+		<main className="flex min-h-screen flex-col items-center space-y-10 p-24">
+			<div
+				className="radial-progress bg-primary text-white border-4 border-primary"
+				style={
+					{
+						"--value": percentage,
+						"--size": "12rem",
+						"--thickness": "2px",
+					} as CSSProperties
+				}
+				role="progressbar"
+			>
+				<div className="grid grid-flow-col gap-1 text-center auto-cols-max">
           <div className="flex flex-col text-white">
-            <span className="countdown font-mono text-2xl">
-              <span style={{ "--value": seconds } as CSSProperties}></span>
-            </span>
-            sec
-          </div>
-        </div>
-      </div>
-      <div className="flex space-x-5">
-        <button
-          className="btn rounded-full btn-primary text-white border-2 shadow-md"
-          disabled={!!activeTimer}
-          onClick={() => setActiveTimer(true)}
-        >
-          Start
-        </button>
-        <button
-          className="btn rounded-full btn-primary text-white border-2 shadow-md"
-          disabled={!activeTimer}
-          onClick={() => pause()}
-        >
-          Pause
-        </button>
-        <button
-          className="btn rounded-full btn-primary text-white border-2 shadow-md"
-          onClick={() => restart()}
-        >
-          Reset
-        </button>
-      </div>
-    </main>
-  );
+						<span className="countdown font-mono text-2xl">
+							<span style={{ "--value": hours } as CSSProperties}></span>:
+						</span>
+						hours
+					</div>
+					<div className="flex flex-col text-white">
+						<span className="countdown font-mono text-2xl">
+							<span style={{ "--value": minutes } as CSSProperties}></span>:
+						</span>
+						min
+					</div>
+					<div className="flex flex-col text-white">
+						<span className="countdown font-mono text-2xl">
+							<span style={{ "--value": seconds } as CSSProperties}></span>
+						</span>
+						sec
+					</div>
+				</div>
+			</div>
+			<div className="flex space-x-5">
+				<button
+					className="btn rounded-full btn-primary text-white border-2 shadow-md"
+					disabled={!!activeTimer}
+					onClick={() => setActiveTimer(true)}
+				>
+					Start
+				</button>
+				<button
+					className="btn rounded-full btn-primary text-white border-2 shadow-md"
+					disabled={!activeTimer}
+					onClick={() => pause()}
+				>
+					Pause
+				</button>
+				<button
+					className="btn rounded-full btn-primary text-white border-2 shadow-md"
+					onClick={() => restart()}
+				>
+					Reset
+				</button>
+			</div>
+		</main>
+	);
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -2,5 +2,5 @@
 import Dashboard from "./_components/Dashboard";
 
 export default function Home() {
-	return <Dashboard startMin={2} startSec={10} />;
+	return <Dashboard startHr={1} startMin={0} startSec={1} />;
 }