Day.js 倒数计时器

Question

I need to create a simple timer that is counting from 10 minutes down and after 10 minuets it will chnage isValid from true to false . But I was ask to do this with Day.js. This is getting a bit tricky. I am checking Day.js docs but I am faling to get this working. This is waht i got, nut much and not even close to get this working properly:

const [minutes, setMinutes] = useState(0);
const [seconds, setSeconds] = useState(0);
const tokenTTL = 10;
// let difference;
const now = dayjs().second();
// const nowFormat = dayjs().format("hh:mm:ss");
const addTime = dayjs().add(tokenTTL, "minute");
const timeTo = addTime.subtract(now).minute();

useEffect(() => {
    // const actualTime = new Date();
    // const target = new Date(
    //   actualTime.setMinutes(actualTime.getMinutes() + tokenTTL)
    // );

    const interval = setInterval(() => {
        console.log(now);
        console.log("TT", timeTo);
        console.log("add", addTime.format("mm:ss"));
        console.log("nf", dayjs().second());
        console.log(TimeHelper.getCurrentDateTime());

        setMinutes(dayjs().minute());
        setSeconds(dayjs().second());
        // const now = new Date();
        // difference = target.getTime() - now.getTime();
        // let m: string | number = Math.floor(
        //   (difference % (1000 * 60 * 60)) / (1000 * 60)
        // );
        // m = m < 10 ? "0" + m : m;
        // setMinutes(m as number);
        // let s: string | number = Math.floor((difference % (1000 * 60)) / 1000);
        // s = s < 10 ? "0" + s : s;
        // setSeconds(s as number);
        // if (difference === 0) {
        //   isValid(false);
        // }
    }, 1000);
    return () => clearInterval(interval);
}, []);

return (
    <p className="Timer">
        <span className="minutes">{minutes}</span>
        <span className="divider">:</span>
        <span className="seconds">{seconds}</span>
    </p>
);

As you can see, with some basic stuff that tehy provide I do get minutes and seconds using setMinutes(dayjs().minute()); and setSeconds(dayjs().second()); also i was able to add 10 minutes to my current time that I am getting from const now = dayjs().second(); const addTime = dayjs().add(tokenTTL, "minute"); but this is all i can get from this. I am strugling to get this properly worknig and counting down from 10 minutes.

Is this even posible to get this done with Day.js?

Answer 1

This is my timer component:

    import React,{ useEffect, useState } from "react";
export default function Timer() {
  const [time, setTime] = useState();
  useEffect(() => {
    let duration = 2;
    let endTime = new Date();
    endTime.setMinutes(endTime.getMinutes() + duration);
    let min = duration;
    let sec = 0;
    
    let interval = setInterval(() => {
      sec--;
      if (sec === -1) {
        sec = 59;
        min--;
      }
      let newValue=<><span className="minutes">{formatNumber(min)}</span>
      <span className="divider">:</span>
      <span className="seconds">{formatNumber(sec)}</span></>
      if ((min === 0) && (sec === 0)) {
        clearInterval(interval);
      }
      setTime(newValue);      
    }, 1000);
  }, []);
  let formatNumber=(num)=>{
    return num.toLocaleString("en-US", {
      minimumIntegerDigits: 2,
      useGrouping: false
    });
  }
  return <p className="Timer">{time}</p>;
}

The demo URL: https://stackblitz.com/edit/react-cagrm7?file=src%2FTimer.js