mirror of
https://github.com/UofCBaja/BajaUofCWebsite.git
synced 2025-07-10 13:17:13 -06:00
127 lines
2.8 KiB
JavaScript
127 lines
2.8 KiB
JavaScript
import { useEffect, useState } from "react";
|
|
import "./CountDownTimer.css";
|
|
|
|
/**
|
|
* @param {Date} dateFinished - Date object with time that it finishes Date(year, monthNumber, day, hour, minute, second)
|
|
* @param {React.JSX.Element} messageDisplayAfter - Message to display afterwards
|
|
* @param {React.JSX.Element} messageDisplayBefore - The Message to display while it is counting down
|
|
* @returns {React.JSX.Element} page - returns the page content
|
|
* @description A fun countdown timer of how many days, minutesz and seconds until x happens
|
|
* @author Brock <darkicewolf50@gmail.com>
|
|
*/
|
|
const CountDownTimer = ({
|
|
dateFinished,
|
|
messageDisplayAfter,
|
|
messageDisplayBefore,
|
|
}) => {
|
|
const [days, hours, minutes, seconds] = useCountdown(dateFinished);
|
|
if (days + hours + minutes + seconds <= 0) {
|
|
return (
|
|
<div
|
|
id="afterTime"
|
|
className="countDownTimer">
|
|
<ShowCounter
|
|
days={days}
|
|
hours={hours}
|
|
minutes={minutes}
|
|
seconds={seconds}
|
|
/>
|
|
{messageDisplayAfter}
|
|
</div>
|
|
);
|
|
} else {
|
|
return (
|
|
<div
|
|
id="countDownTimer"
|
|
className="countDownTimer">
|
|
<ShowCounter
|
|
days={days}
|
|
hours={hours}
|
|
minutes={minutes}
|
|
seconds={seconds}
|
|
/>
|
|
{messageDisplayBefore}
|
|
</div>
|
|
);
|
|
}
|
|
};
|
|
|
|
const useCountdown = (DateDone) => {
|
|
const countDownDate = new Date(DateDone).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);
|
|
};
|
|
|
|
const getReturnValues = (countDown) => {
|
|
let days = Math.floor(countDown / (1000 * 60 * 60 * 24));
|
|
let hours = Math.floor(
|
|
(countDown % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
|
|
);
|
|
let minutes = Math.floor((countDown % (1000 * 60 * 60)) / (1000 * 60));
|
|
let seconds = Math.floor((countDown % (1000 * 60)) / 1000);
|
|
if (days < 0) {
|
|
days = 0;
|
|
}
|
|
if (hours < 0) {
|
|
hours = 0;
|
|
}
|
|
if (minutes < 0) {
|
|
minutes = 0;
|
|
}
|
|
if (seconds < 0) {
|
|
seconds = 0;
|
|
}
|
|
return [days, hours, minutes, seconds];
|
|
};
|
|
|
|
const ShowCounter = ({ days, hours, minutes, seconds }) => {
|
|
let dangerDays = days > 10 ? "" : "dangerDays";
|
|
return (
|
|
<div
|
|
className={dangerDays}
|
|
id="counter">
|
|
<DateTimeDisplay
|
|
valueAwayFrom={days}
|
|
discriptor={"Days"}
|
|
/>
|
|
<p>:</p>
|
|
<DateTimeDisplay
|
|
valueAwayFrom={hours}
|
|
discriptor={"Hours"}
|
|
/>
|
|
<p>:</p>
|
|
<DateTimeDisplay
|
|
valueAwayFrom={minutes}
|
|
discriptor={"Mins"}
|
|
/>
|
|
<p>:</p>
|
|
<DateTimeDisplay
|
|
valueAwayFrom={seconds}
|
|
discriptor={"Seconds"}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const DateTimeDisplay = ({ valueAwayFrom, discriptor }) => {
|
|
return (
|
|
<div>
|
|
<p>{valueAwayFrom}</p>
|
|
<p>{discriptor}</p>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CountDownTimer;
|