Added new plugin

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

@@ -0,0 +1,74 @@
+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;