talk/plugins/talk-plugin-profile-data/client/components/DownloadCommentHistory.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { t } from 'plugin-api/beta/client/services';
import { Button } from 'plugin-api/beta/client/components/ui';
import styles from './DownloadCommentHistory.css';

export const readableDuration = durAsHours => {
  const durAsDays = Math.ceil(durAsHours / 24);

  return durAsHours > 23
    ? durAsDays > 1
      ? t('download_request.days', durAsDays)
      : t('download_request.day', durAsDays)
    : durAsHours > 1
      ? t('download_request.hours', durAsHours)
      : t('download_request.hour', durAsHours);
};

class DownloadCommentHistory extends Component {
  static propTypes = {
    requestDownloadLink: PropTypes.func.isRequired,
    root: PropTypes.object.isRequired,
  };

  render() {
    const {
      root: { me: { lastAccountDownload } },
      requestDownloadLink,
    } = this.props;

    const now = new Date();
    const lastAccountDownloadDate =
      lastAccountDownload && new Date(lastAccountDownload);
    const hoursLeft = lastAccountDownloadDate
      ? Math.ceil(
          7 * 24 - (now.getTime() - lastAccountDownloadDate.getTime()) / 3.6e6
        )
      : 0;
    const canRequestDownload = !lastAccountDownloadDate || hoursLeft <= 0;

    return (
      <section className={'talk-plugin-ignore-user-section'}>
        <h3>{t('download_request.section_title')}</h3>
        <p>
          {t('download_request.you_will_get_a_copy')}{' '}
          <b>{t('download_request.download_rate')}</b>.
        </p>
        {lastAccountDownloadDate && (
          <p className={styles.most_recent}>
            {t('download_request.most_recent_request')}:{' '}
            {lastAccountDownloadDate.toLocaleString()}
          </p>
        )}
        {canRequestDownload ? (
          <Button className={styles.button} onClick={requestDownloadLink}>
            <i className="material-icons" aria-hidden={true}>
              file_download
            </i>{' '}
            {t('download_request.request')}
          </Button>
        ) : (
          <Button className={styles.button} disabled>
            <i className="material-icons" aria-hidden={true}>
              access_time
            </i>{' '}
            {t('download_request.rate_limit', readableDuration(hoursLeft))}
          </Button>
        )}
      </section>
    );
  }
}

export default DownloadCommentHistory;