Countdown với Reactjs Typescript sử dụng momentjs

1. Định nghĩa:

type $Parse = { months?: string; days?: string; hours?: string; minutes?: string; seconds?: string;
}; type $Time = { timeString: string; diffTimes: number; stop: boolean; parse: $Parse; initTime?: $Parse;
}; type $Props = { timeThen: Moment; initTime?: $Parse;
};

2. Tạo hook xử lý logic:

'use client';
import moment, { Moment } from 'moment';
import { useState } from 'react'; export function useCountDown({ timeThen, initTime }: $Props) { const [time, setTime] = useState({} as $Time); const padTime = (val: any) => { return val.toString().padStart(2, '0') as string; }; const onConstrueTime = (timeThen: any) => { const now = moment(); const then = moment(timeThen); const diffTimes = then.diff(now); const remaining = moment.duration(diffTimes); const months = padTime(remaining.months()); const days = padTime(remaining.days()); const hours = padTime(remaining.hours()); const minutes = padTime(remaining.minutes()); const seconds = padTime(remaining.seconds()); return { timeString: `ngày: ${days} - giờ: ${hours} - phút :${minutes} - giây: ${seconds}`.toString(), diffTimes, stop: diffTimes < 1, parse: { months, days, hours, minutes, seconds }, } as const; }; const onCountdown = () => { const interval = setInterval(() => { const result = onConstrueTime(timeThen); if (result?.stop) { setTime({ ...result, initTime }); clearInterval(interval); } else { setTime({ ...result }); } }, 1000); }; return { onCountdown, onConstrueTime, time };
}

3. Cách dùng: Tại component gọi trong lifecycirle : ví dụ time then là 30 giây nữa

 const { time, onCountdown } = useCountDown({ timeThen: moment().add(30, 'seconds'), }); useEffect(() => { onCountdown(); }, []); type KeyParse = keyof typeof time.parse; console.log('time :>> ', time);

output time:

{ "timeString": "ngày: 00 - giờ: 00 - phút :00 - giây: 05", "diffTimes": 5485, "stop": false, "parse": { "months": "00", "days": "00", "hours": "00", "minutes": "00", "seconds": "05" }
}

Thích thì mình chỉnh lại xí là được, thấy clean & clear code rồi đúng hông

Phần tiếp theo: Edit JSON