Moment.js ile basit bir sayaç nasıl oluşturulur?

Bu örnekte tarih ve süre hesapları için Moment.js kullanıyorum. Bir sayaç yaparken gerekli olan girdiler başlangıç zamanı ve bitiş zamanıdır.

Öncelikle kütüphanemizi yükleyelim.

npm install moment          # npm
yarn add moment             # Yarn

const startTime = moment(); // bugünün tarihini veriyor 
// örnek olarak "2022-06-29T14:18:25.920Z" bir çıktı alırsınız (ISO 8601)

moment() fonksiyonu ile bugünün tarihini alıyoruz. Buradaki T harfi zaman kısmının başladığını, Z harfi ise UTC(Universal Time Coordinated) anlamına gelen +00:00’ın kısaltmasıdır. Z, sıfır UTC kayması için bölge tanımlayıcısıdır. Z, Zulu time olarak bilinir ve bu harfi havacılar, denizciler zaman farklarını hesaplamak için kullanıyorlar. Biz kullanmayacağız.

const endTime = moment("30/06/2022 12:00:00", "DD/MM/YYYY HH:mm:ss", true);

Bitiş zamanını da belirlemiş olduk. Şimdi bu startTime ve endTime değişkenlerinin değerleri aynı formatta bunları birbirinden çıkararak aslında sayacımızın ne kadar süre geri sayacağını belirlemiş oluyoruz.

const duration = moment.duration(endTime.diff(startTime), 'milliseconds');

moment.duration() fonksiyonu bize girilen zamanın milisaniye cinsinden uzunluğunu veriyor. endTime.diff(startTime) bu fonksiyonda ise endTime ile startTime arasındaki zaman farkını almaktayız.

Kalan süreyi güncelleme

setInterval ile saniyede bir ekranı güncelliyorum. Tarayıcı arka plandaki sekmelerde zamanlayıcıyı geciktirebildiği için her adımda hedef tarihten o anki zamanı çıkarıyorum.

startTime.isBefore(endTime), başlangıç zamanının hedef tarihten önce olup olmadığını kontrol eder. Aşağıdaki örnekte süre bittiğinde zamanlayıcı durur.

function formatCounter(duration) {
  const pad = (number) => String(number).padStart(2, "0");
  return {
    days: Math.floor(duration.asDays()),
    hours: pad(Math.floor(duration.asHours()) % 24),
    minutes: pad(duration.minutes()),
    seconds: pad(duration.seconds()),
  };
}

Saat, dakika ve saniye değerleri tek basamaklıysa başına sıfır ekliyorum. Gün sayısını toplam saatten ayrı göstermek sayacın 24 saatin üzerindeki süreleri de doğru göstermesini sağlıyor.

React’te geri sayım

useEffect(() => {
  const endTime = moment(eventTime, "DD/MM/YYYY HH:mm:ss", true);
  if (!endTime.isValid()) return;

  function updateCounter() {
    const remaining = Math.max(0, endTime.diff(moment()));
    setCounter(formatCounter(moment.duration(remaining)));
    return remaining;
  }

  if (updateCounter() === 0) return;

  const timer = setInterval(() => {
    if (updateCounter() === 0) clearInterval(timer);
  }, 1000);

  return () => clearInterval(timer);
}, [eventTime]);

eventTime değiştiğinde veya bileşen kaldırıldığında önceki zamanlayıcı temizlenir. Bu örnekte DOM ölçümü yapmadığım için useEffect yeterli. Bir DOM ölçümünü tarayıcı ekranı boyamadan önce yapmak gerektiğinde useLayoutEffect kullanılabilir.