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 */ const CountDownTimer = ({ dateFinished, messageDisplayAfter, messageDisplayBefore, }) => { const [days, hours, minutes, seconds] = useCountdown(dateFinished); if (days + hours + minutes + seconds <= 0) { return (
{messageDisplayAfter}
); } else { return (
{messageDisplayBefore}
); } }; 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 (

:

:

:

); }; const DateTimeDisplay = ({ valueAwayFrom, discriptor }) => { return (

{valueAwayFrom}

{discriptor}

); }; export default CountDownTimer;