Necesito crear un temporizador simple que cuente desde 10 minutos hacia abajo y después de 10 minutos cambiará isValid de true a false . Pero me pidieron que hiciera esto con Day.js. Esto se está poniendo un poco complicado. Estoy revisando los documentos de Day.js pero no puedo hacer que esto funcione. Esto es lo que obtuve, mucho y ni siquiera cerca para que esto funcione correctamente:
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> ); Como puede ver, con algunas cosas básicas que proporcionan, obtengo minutos y segundos usando setMinutes(dayjs().minute()); y setSeconds(dayjs().second()); también pude agregar 10 minutos a mi hora actual que obtengo de const now = dayjs().second(); const addTime = dayjs().add(tokenTTL, "minute"); pero esto es todo lo que puedo obtener de esto. Estoy luchando para que esto funcione correctamente y estoy haciendo una cuenta regresiva de 10 minutos.
¿Es esto posible hacer esto con Day.js?
Este es mi componente de temporizador:
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>; }La URL de demostración: https://stackblitz.com/edit/react-cagrm7?file=src%2FTimer.js