session-desktop/ts/components/conversation/ExpireTimer.tsx

import React, { useState } from 'react';
import classNames from 'classnames';

import { getIncrement, getTimerBucket } from '../../util/timer';
import { useInterval } from '../../hooks/useInterval';

type Props = {
  withImageNoCaption: boolean;
  expirationLength: number;
  expirationTimestamp: number;
  direction: 'incoming' | 'outgoing';
};

export const ExpireTimer = (props: Props) => {
  const {
    direction,
    expirationLength,
    expirationTimestamp,
    withImageNoCaption,
  } = props;

  const initialTimeLeft = Math.max(
    Math.round((expirationTimestamp - Date.now()) / 1000),
    0
  );
  const [timeLeft, setTimeLeft] = useState(initialTimeLeft);

  const update = () => {
    const newTimeLeft = Math.max(
      Math.round((expirationTimestamp - Date.now()) / 1000),
      0
    );
    if (newTimeLeft !== timeLeft) {
      setTimeLeft(newTimeLeft);
    }
  };

  const increment = getIncrement(expirationLength);
  const updateFrequency = Math.max(increment, 500);

  useInterval(update, updateFrequency);

  if (timeLeft <= 60) {
    return (
      <span
        className={classNames(
          'module-expire-timer-margin',
          'module-message__metadata__date',
          `module-message__metadata__date--${direction}`
        )}
      >
        {timeLeft}
      </span>
    );
  }
  const bucket = getTimerBucket(expirationTimestamp, expirationLength);

  return (
    <div
      className={classNames(
        'module-expire-timer',
        'module-expire-timer-margin',
        `module-expire-timer--${bucket}`,
        `module-expire-timer--${direction}`,
        withImageNoCaption ? 'module-expire-timer--with-image-no-caption' : null
      )}
    />
  );
};