Countdown is not updating even with SetInterval

Question

I am trying to create a countdown forge application that takes an input of type date and starts counting based on the actual date. As an example, I am giving as input "After 3 days from now", But I only get as a result, 2d:23h:59m:59s , ans this result is not updating every second.

Here is the main function:

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);
};

This is where I display the countdown:

const Edit = () => {

const THREE_DAYS_IN_MS = 3 * 24 * 60 * 60 * 1000;
const NOW_IN_MS = new Date().getTime();

const dateTimeAfterThreeDays = NOW_IN_MS + THREE_DAYS_IN_MS;
 return(
  <Fragment>
  <Text>Time left 123:</Text>
  <CountdownTimer targetDate={dateTimeAfterThreeDays} />
  </Fragment>
   )
       };
    export const renderFieldView = render(<View />);

I am using Atlassian forge and deploying the app in Jira.

Answer 1

Are you sure you do not have an error in your console?

The only thing I can think of is using milliseconds (Number) as a Date or vice versa.

const { Fragment, useEffect, useState } = React;

const shiftDate = (date) =>
  new Date(date.getTime() - date.getTimezoneOffset() * 6e4);

const startOfYearLocal = (date) =>
  shiftDate(new Date(date.getFullYear(), 0, 1));

const dayOfYear = (date) =>
  Math.floor((date - startOfYearLocal(date)) / 864e5);

const getReturnValues = (dateInMillis) => {
  const date = new Date(dateInMillis);
  return {
    days: dayOfYear(date),
    hours: date.getHours(),
    minutes: date.getMinutes(),
    seconds: date.getSeconds(),
  };
};

const useCountdown = (targetDate) => {
  const countDownDate = new Date(targetDate).getTime();
  const [countDown, setCountDown] = useState(countDownDate - Date.now());
  useEffect(() => {
    const interval = setInterval(() =>
      setCountDown(countDownDate - Date.now()), 1000);
    return () => clearInterval(interval);
  }, [countDownDate]);
  return getReturnValues(countDown);
};

const Text = ({ children }) => <span>{children}</span>;

const CountdownTimer = ({ targetDate }) => {
  const { days, hours, minutes, seconds } = useCountdown(new Date(targetDate));
  return (
    <div className="CountdownTimer">
      <span>Days:</span><span>{days}</span>
      <span>Hours:</span><span>{hours}</span>
      <span>Minutes:</span><span>{minutes}</span>
      <span>Seconds:</span><span>{seconds}</span>
    </div>
  );
};

const Edit = () => {
  const THREE_DAYS_IN_MS = 2592e5;
  const NOW_IN_MS = Date.now();
  const dateTimeAfterThreeDays = NOW_IN_MS + THREE_DAYS_IN_MS;
  return (
    <Fragment>
      <Text>Time Left</Text>
      <CountdownTimer targetDate={dateTimeAfterThreeDays} />
    </Fragment>
  );
};

ReactDOM
  .createRoot(document.getElementById('root'))
  .render(<Edit />);

html, body, #root {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#root {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.CountdownTimer {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-column-gap: 0.5rem;
  grid-row-gap: 0.25rem;
  padding: 1rem;
}

.CountdownTimer span {
  text-align: right;
}

.CountdownTimer span:nth-child(odd) {
  font-weight: bold;
}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>