@redocly/theme/src/core/hooks/use-time-ago.ts

Shared UI components lib

import { useCallback } from 'react';

import type { Plural, TranslationKey } from '@redocly/theme/core/types';

import { useThemeHooks } from '@redocly/theme/core/hooks';

const timeUnits = ['second', 'minute', 'hour', 'day', 'week', 'month', 'year'] as const;
const timeUnitConversions = [
  60, // 60 seconds in 1 min
  60, // 60 mins in 1 hour
  24, // 24 hours in 1 day
  7, // 7 days in 1 week
  365 / 7 / 12, // 4.345238095238096 weeks in 1 month
  12, // 12 months in 1 year
] as const;

type TimeUnit = (typeof timeUnits)[number];

export function useTimeAgo() {
  const { useTranslate } = useThemeHooks();
  const { translate } = useTranslate();

  const format = useCallback(
    (date: Date) => {
      let timeUnitIndex = 0;
      let elapsedTime = (Date.now() - date.getTime()) / 1000;
      for (
        ;
        elapsedTime >= timeUnitConversions[timeUnitIndex] &&
        timeUnitIndex < timeUnitConversions.length;
        timeUnitIndex++
      ) {
        elapsedTime /= timeUnitConversions[timeUnitIndex];
      }
      elapsedTime = Math.floor(elapsedTime);

      if (timeUnitIndex === 0) return translate('time.justNow', 'just now');

      const timeUnit: TimeUnit | Plural<TimeUnit> = timeUnits[timeUnitIndex];

      const suffix = elapsedTime > 1 ? 's' : '';
      const translationKey: TranslationKey = `time.past.${timeUnit}${suffix}`;

      return translate(translationKey, {
        defaultValue: `${elapsedTime} ${timeUnit}${suffix} ago`,
        count: elapsedTime,
        replace: { value: elapsedTime },
      });
    },
    [translate],
  );

  return { format };
}