Added new plugin

plugins/talk-plugin-profile-data/client/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@coralproject/eslint-config-talk/client"
+}

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

@@ -0,0 +1,12 @@
+.button {
+  margin: 0;
+
+  i {
+    font-size: inherit;
+    vertical-align: sub;
+  }
+}
+
+.most_recent {
+  color: #808080;
+}

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;

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

@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { compose, gql } from 'react-apollo';
+import DownloadCommentHistory from '../components/DownloadCommentHistory';
+import { withFragments } from 'plugin-api/beta/client/hocs';
+import { withRequestDownloadLink } from '../mutations';
+
+class DownloadCommentHistoryContainer extends Component {
+  static propTypes = {
+    requestDownloadLink: PropTypes.func.isRequired,
+    root: PropTypes.object.isRequired,
+  };
+
+  render() {
+    return (
+      <DownloadCommentHistory
+        root={this.props.root}
+        requestDownloadLink={this.props.requestDownloadLink}
+      />
+    );
+  }
+}
+
+const enhance = compose(
+  withFragments({
+    root: gql`
+      fragment TalkDownloadCommentHistory_DownloadCommentHistorySection_root on RootQuery {
+        __typename
+        me {
+          id
+          lastAccountDownload
+        }
+      }
+    `,
+  }),
+  withRequestDownloadLink
+);
+
+export default enhance(DownloadCommentHistoryContainer);

plugins/talk-plugin-profile-data/client/graphql.js

@@ -0,0 +1,18 @@
+import update from 'immutability-helper';
+
+export default {
+  mutations: {
+    DownloadCommentHistory: () => ({
+      updateQueries: {
+        CoralEmbedStream_Profile: previousData =>
+          update(previousData, {
+            me: {
+              lastAccountDownload: {
+                $set: new Date().toISOString(),
+              },
+            },
+          }),
+      },
+    }),
+  },
+};

plugins/talk-plugin-profile-data/client/index.js

@@ -0,0 +1,11 @@
+import DownloadCommentHistory from './containers/DownloadCommentHistory';
+import translations from './translations.yml';
+import graphql from './graphql';
+
+export default {
+  slots: {
+    profileSettings: [DownloadCommentHistory],
+  },
+  translations,
+  ...graphql,
+};

plugins/talk-plugin-profile-data/client/mutations.js

@@ -0,0 +1,19 @@
+import { withMutation } from 'plugin-api/beta/client/hocs';
+import { gql } from 'react-apollo';
+
+export const withRequestDownloadLink = withMutation(
+  gql`
+    mutation DownloadCommentHistory {
+      requestDownloadLink {
+        errors {
+          translation_key
+        }
+      }
+    }
+  `,
+  {
+    props: ({ mutate }) => ({
+      requestDownloadLink: () => mutate({ variables: {} }),
+    }),
+  }
+);

plugins/talk-plugin-profile-data/client/translations.yml

@@ -0,0 +1,12 @@
+en:
+  download_request:
+    section_title: "Download My Comment History"
+    you_will_get_a_copy: "You will recieve an email with a link to download your comment history. You can make"
+    download_rate: "one download request every 7 days"
+    most_recent_request: "Your most recent request"
+    request: "Request Comment History"
+    rate_limit: "You can submit another Comment History request in {0}"
+    hours: "{0} hours"
+    days: "{0} days"
+    hour: "{0} hour"
+    day: "{0} day"