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?
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