From f6af847bfbb63dc2c7b621ae968ead8cb6573ba3 Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Thu, 9 Mar 2017 16:05:09 -0700
Subject: [PATCH] add Activity widget

---
 .../containers/Dashboard/ActivityWidget.js    | 49 +++++++++++++++++++
 .../src/containers/Dashboard/Dashboard.js     |  4 +-
 .../src/containers/Dashboard/FlagWidget.js    | 15 ++++--
 .../src/containers/Dashboard/LikeWidget.js    | 16 ++++--
 .../fragments/assetMetricsView.graphql        |  1 +
 .../src/graphql/queries/metricsQuery.graphql  |  3 ++
 6 files changed, 80 insertions(+), 8 deletions(-)
 create mode 100644 client/coral-admin/src/containers/Dashboard/ActivityWidget.js

diff --git a/client/coral-admin/src/containers/Dashboard/ActivityWidget.js b/client/coral-admin/src/containers/Dashboard/ActivityWidget.js
new file mode 100644
index 000000000..e1d0efe34
--- /dev/null
+++ b/client/coral-admin/src/containers/Dashboard/ActivityWidget.js
@@ -0,0 +1,49 @@
+import React, {PropTypes} from 'react';
+import {Link} from 'react-router';
+import styles from './Widget.css';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from 'coral-admin/src/translations';
+
+const lang = new I18n(translations);
+
+const ActivityWidget = ({assets}) => {
+  return (
+    <div className={styles.widget}>
+      <h2 className={styles.heading}>Articles with the most comments (parent)</h2>
+      <div className={styles.widgetHead}>
+        <p>{lang.t('streams.article')}</p>
+        <p>{lang.t('dashboard.comment_count')}</p>
+      </div>
+      <div className={styles.widgetTable}>
+        {
+          assets.length
+          ? assets.map(asset => {
+            return (
+              <div className={styles.rowLinkify} key={asset.id}>
+                <Link className={styles.linkToModerate} to={`/admin/moderate/flagged/${asset.id}`}>Moderate</Link>
+                <p className={styles.widgetCount}>{asset.commentCount}</p>
+                <Link className={styles.linkToAsset} to={`${asset.url}#coralStreamEmbed_iframe`} target="_blank">
+                  <p className={styles.assetTitle}>{asset.title}</p>
+                </Link>
+                <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
+              </div>
+            );
+          })
+          : <div className={styles.rowLinkify}>{lang.t('dashboard.no_activity')}</div>
+        }
+      </div>
+    </div>
+  );
+};
+
+ActivityWidget.propTypes = {
+  assets: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    url: PropTypes.string,
+    commentCount: PropTypes.number,
+    author: PropTypes.string,
+    created_at: PropTypes.string
+  })).isRequired
+};
+
+export default ActivityWidget;
diff --git a/client/coral-admin/src/containers/Dashboard/Dashboard.js b/client/coral-admin/src/containers/Dashboard/Dashboard.js
index 5b4a20282..f1259f796 100644
--- a/client/coral-admin/src/containers/Dashboard/Dashboard.js
+++ b/client/coral-admin/src/containers/Dashboard/Dashboard.js
@@ -5,6 +5,7 @@ import {connect} from 'react-redux';
 import {getMetrics} from 'coral-admin/src/graphql/queries';
 import FlagWidget from './FlagWidget';
 import LikeWidget from './LikeWidget';
+import ActivityWidget from './ActivityWidget';
 import {showBanUserDialog, hideBanUserDialog} from 'coral-admin/src/actions/moderation';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-admin/src/translations';
@@ -47,7 +48,7 @@ class Dashboard extends React.Component {
       return <Spinner />;
     }
 
-    const {data: {assetsByLike, assetsByFlag}} = this.props;
+    const {data: {assetsByLike, assetsByFlag, assetsByActivity}} = this.props;
 
     return (
       <div>
@@ -61,6 +62,7 @@ class Dashboard extends React.Component {
         <div className={styles.Dashboard}>
           <FlagWidget assets={assetsByFlag} />
           <LikeWidget assets={assetsByLike} />
+          <ActivityWidget assets={assetsByActivity} />
         </div>
       </div>
     );
diff --git a/client/coral-admin/src/containers/Dashboard/FlagWidget.js b/client/coral-admin/src/containers/Dashboard/FlagWidget.js
index 7d2ffe17a..468875d3d 100644
--- a/client/coral-admin/src/containers/Dashboard/FlagWidget.js
+++ b/client/coral-admin/src/containers/Dashboard/FlagWidget.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {PropTypes} from 'react';
 import {Link} from 'react-router';
 import styles from './Widget.css';
 import I18n from 'coral-framework/modules/i18n/i18n';
@@ -6,8 +6,7 @@ import translations from 'coral-admin/src/translations';
 
 const lang = new I18n(translations);
 
-const FlagWidget = (props) => {
-  const {assets} = props;
+const FlagWidget = ({assets}) => {
 
   return (
     <div className={styles.widget}>
@@ -39,4 +38,14 @@ const FlagWidget = (props) => {
   );
 };
 
+FlagWidget.propTypes = {
+  assets: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    url: PropTypes.string,
+    action_summaries: PropTypes.array,
+    author: PropTypes.string,
+    created_at: PropTypes.string
+  })).isRequired
+};
+
 export default FlagWidget;
diff --git a/client/coral-admin/src/containers/Dashboard/LikeWidget.js b/client/coral-admin/src/containers/Dashboard/LikeWidget.js
index 436fbcaf3..b878c281b 100644
--- a/client/coral-admin/src/containers/Dashboard/LikeWidget.js
+++ b/client/coral-admin/src/containers/Dashboard/LikeWidget.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {PropTypes} from 'react';
 import {Link} from 'react-router';
 import styles from './Widget.css';
 import I18n from 'coral-framework/modules/i18n/i18n';
@@ -6,9 +6,7 @@ import translations from 'coral-admin/src/translations';
 
 const lang = new I18n(translations);
 
-const LikeWidget = (props) => {
-
-  const {assets} = props;
+const LikeWidget = ({assets}) => {
 
   return (
     <div className={styles.widget}>
@@ -40,4 +38,14 @@ const LikeWidget = (props) => {
   );
 };
 
+LikeWidget.propTypes = {
+  assets: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    url: PropTypes.string,
+    action_summaries: PropTypes.array,
+    author: PropTypes.string,
+    created_at: PropTypes.string
+  })).isRequired
+};
+
 export default LikeWidget;
diff --git a/client/coral-admin/src/graphql/fragments/assetMetricsView.graphql b/client/coral-admin/src/graphql/fragments/assetMetricsView.graphql
index 37335aeaa..c77fbc32b 100644
--- a/client/coral-admin/src/graphql/fragments/assetMetricsView.graphql
+++ b/client/coral-admin/src/graphql/fragments/assetMetricsView.graphql
@@ -4,6 +4,7 @@ fragment metrics on Asset {
   url
   author
   created_at
+  commentCount
   action_summaries {
     type: __typename
     actionCount
diff --git a/client/coral-admin/src/graphql/queries/metricsQuery.graphql b/client/coral-admin/src/graphql/queries/metricsQuery.graphql
index 42a9fb70e..f0dff8965 100644
--- a/client/coral-admin/src/graphql/queries/metricsQuery.graphql
+++ b/client/coral-admin/src/graphql/queries/metricsQuery.graphql
@@ -7,4 +7,7 @@ query Metrics ($from: Date!, $to: Date!) {
   assetsByLike: assetMetrics(from: $from, to: $to, sort: LIKE) {
     ...metrics
   }
+  assetsByActivity: assetMetrics(from: $from, to: $to, sort: ACTIVITY) {
+    ...metrics
+  }
 }