Files
BajaUofCWebsite/src/CountDown/CountDownTimer.js

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;