From bc4849632794a2a1947d92b3ecd27113bb92902b Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Wed, 22 Feb 2017 10:47:23 -0700
Subject: [PATCH] add most liked comments widget

---
 .../src/containers/Dashboard/Dashboard.css    |  8 -----
 .../src/containers/Dashboard/Dashboard.js     | 17 ++++-----
 .../Dashboard}/FlagWidget.js                  |  2 +-
 .../Dashboard}/LikeWidget.js                  |  2 +-
 .../Dashboard/MostLikedCommentsWidget.js      | 35 +++++++++++++++++++
 .../Dashboard}/Widget.css                     |  8 +++++
 .../ModerationQueue/ModerationContainer.js    |  5 +--
 .../ModerationQueue/ModerationQueue.js        |  6 ++--
 .../{metrics.graphql => assetMetrics.graphql} |  2 +-
 .../graphql/queries/commentMetrics.graphql    | 19 ++++++++++
 .../coral-admin/src/graphql/queries/index.js  | 23 ++++++++++--
 .../coral-sign-in/components/SignUpContent.js |  9 ++---
 12 files changed, 100 insertions(+), 36 deletions(-)
 rename client/coral-admin/src/{components => containers/Dashboard}/FlagWidget.js (98%)
 rename client/coral-admin/src/{components => containers/Dashboard}/LikeWidget.js (98%)
 create mode 100644 client/coral-admin/src/containers/Dashboard/MostLikedCommentsWidget.js
 rename client/coral-admin/src/{components => containers/Dashboard}/Widget.css (75%)
 rename client/coral-admin/src/graphql/queries/{metrics.graphql => assetMetrics.graphql} (80%)
 create mode 100644 client/coral-admin/src/graphql/queries/commentMetrics.graphql

diff --git a/client/coral-admin/src/containers/Dashboard/Dashboard.css b/client/coral-admin/src/containers/Dashboard/Dashboard.css
index 0e46fb642..a23927d8a 100644
--- a/client/coral-admin/src/containers/Dashboard/Dashboard.css
+++ b/client/coral-admin/src/containers/Dashboard/Dashboard.css
@@ -3,14 +3,6 @@
   flex-wrap: wrap;
 }
 
-.widget {
-  box-sizing: border-box;
-  margin: 10px 5px 5px 5px;
-  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
-  padding: 15px;
-  width: calc(50% - 10px);
-}
-
 .heading {
   margin: 0;
   font-size: 1.5rem;
diff --git a/client/coral-admin/src/containers/Dashboard/Dashboard.js b/client/coral-admin/src/containers/Dashboard/Dashboard.js
index fcccb36b3..282772403 100644
--- a/client/coral-admin/src/containers/Dashboard/Dashboard.js
+++ b/client/coral-admin/src/containers/Dashboard/Dashboard.js
@@ -1,20 +1,15 @@
 import React from 'react';
 import styles from './Dashboard.css';
-import FlagWidget from '../../components/FlagWidget';
-import LikeWidget from '../../components/LikeWidget';
+import FlagWidget from './FlagWidget';
+import LikeWidget from './LikeWidget';
+import MostLikedCommentsWidget from './MostLikedCommentsWidget';
 
 const Dashboard = () => {
   return (
     <div className={styles.Dashboard}>
-      <div className={styles.widget}>
-        <FlagWidget />
-      </div>
-      <div className={styles.widget}>
-        <h2 className={styles.heading}>Top ten comments with the most likes</h2>
-      </div>
-      <div className={styles.widget}>
-        <LikeWidget />
-      </div>
+      <FlagWidget />
+      <MostLikedCommentsWidget />
+      <LikeWidget />
     </div>
   );
 };
diff --git a/client/coral-admin/src/components/FlagWidget.js b/client/coral-admin/src/containers/Dashboard/FlagWidget.js
similarity index 98%
rename from client/coral-admin/src/components/FlagWidget.js
rename to client/coral-admin/src/containers/Dashboard/FlagWidget.js
index a37ddcd2c..4fb993d35 100644
--- a/client/coral-admin/src/components/FlagWidget.js
+++ b/client/coral-admin/src/containers/Dashboard/FlagWidget.js
@@ -18,7 +18,7 @@ const FlagWidget = (props) => {
   const {data: {metrics: assets}} = props;
 
   return (
-    <div>
+    <div className={styles.widget}>
       <h2 className={styles.heading}>Top Ten Articles with the most flagged comments</h2>
       <table className={styles.widgetTable}>
         <thead className={styles.widgetHead}>
diff --git a/client/coral-admin/src/components/LikeWidget.js b/client/coral-admin/src/containers/Dashboard/LikeWidget.js
similarity index 98%
rename from client/coral-admin/src/components/LikeWidget.js
rename to client/coral-admin/src/containers/Dashboard/LikeWidget.js
index ac9e111ea..0f6ea2ba0 100644
--- a/client/coral-admin/src/components/LikeWidget.js
+++ b/client/coral-admin/src/containers/Dashboard/LikeWidget.js
@@ -18,7 +18,7 @@ const LikeWidget = (props) => {
   const {data: {metrics: assets}} = props;
 
   return (
-    <div>
+    <div className={styles.widget}>
       <h2 className={styles.heading}>Top Ten Articles with the most likes</h2>
       <table className={styles.widgetTable}>
         <thead className={styles.widgetHead}>
diff --git a/client/coral-admin/src/containers/Dashboard/MostLikedCommentsWidget.js b/client/coral-admin/src/containers/Dashboard/MostLikedCommentsWidget.js
new file mode 100644
index 000000000..6e7d03185
--- /dev/null
+++ b/client/coral-admin/src/containers/Dashboard/MostLikedCommentsWidget.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import {compose} from 'react-apollo';
+import {mostLikedComments} from 'coral-admin/src/graphql/queries';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from 'coral-admin/src/translations';
+import ModerationQueue from 'coral-admin/src/containers/ModerationQueue/ModerationQueue';
+import {Spinner} from 'coral-ui';
+import styles from './Widget.css';
+
+const lang = new I18n(translations);
+
+const MostLikedCommentsWidget = props => {
+
+  if (props.data.loading) {
+    return <Spinner />;
+  }
+
+  const {data: {comments}} = props;
+
+  console.log('MostLikedCommentsWidget', comments);
+
+  return (
+    <div className={styles.widget}>
+      <h2 className={styles.heading}>most liked comments</h2>
+      <ModerationQueue
+        comments={comments}
+        suspectWords={[]}
+        showBanUserDialog={() => {}}
+        acceptComment={() => {}}
+        rejectComment={() => {}} />
+    </div>
+  );
+};
+
+export default compose(mostLikedComments)(MostLikedCommentsWidget);
diff --git a/client/coral-admin/src/components/Widget.css b/client/coral-admin/src/containers/Dashboard/Widget.css
similarity index 75%
rename from client/coral-admin/src/components/Widget.css
rename to client/coral-admin/src/containers/Dashboard/Widget.css
index f40da403d..d9cce2043 100644
--- a/client/coral-admin/src/components/Widget.css
+++ b/client/coral-admin/src/containers/Dashboard/Widget.css
@@ -1,3 +1,11 @@
+.widget {
+  box-sizing: border-box;
+  margin: 10px 5px 5px 5px;
+  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
+  padding: 15px;
+  width: calc(50% - 10px);
+}
+
 .heading {
   margin: 0;
   font-size: 1.5rem;
diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
index f685ac094..9c68d0728 100644
--- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
+++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
@@ -66,6 +66,8 @@ class ModerationContainer extends Component {
       }
     }
 
+    const comments = data[activeTab];
+
     return (
       <div>
         <ModerationHeader asset={asset} />
@@ -76,9 +78,8 @@ class ModerationContainer extends Component {
           flaggedCount={data.flaggedCount}
         />
         <ModerationQueue
-          data={data}
           currentAsset={asset}
-          activeTab={activeTab}
+          comments={comments}
           suspectWords={settings.wordlist.suspect}
           showBanUserDialog={props.showBanUserDialog}
           acceptComment={props.acceptComment}
diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
index d30f24c1f..2022fd432 100644
--- a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
+++ b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
@@ -3,12 +3,12 @@ import React, {PropTypes} from 'react';
 import Comment from './components/Comment';
 import {actionsMap} from './helpers/moderationQueueActionsMap';
 
-const ModerationQueue = ({activeTab = 'premod', ...props}) => {
+const ModerationQueue = ({comments, ...props}) => {
   return (
     <div id="moderationList">
       <ul>
       {
-        props.data[activeTab].map((comment, i) => {
+        comments.map((comment, i) => {
           const status = comment.action_summaries ? 'FLAGGED' : comment.status;
           return <Comment
             key={i}
@@ -29,7 +29,7 @@ const ModerationQueue = ({activeTab = 'premod', ...props}) => {
 };
 
 ModerationQueue.propTypes = {
-  data: PropTypes.object.isRequired
+  comments: PropTypes.array.isRequired
 };
 
 export default ModerationQueue;
diff --git a/client/coral-admin/src/graphql/queries/metrics.graphql b/client/coral-admin/src/graphql/queries/assetMetrics.graphql
similarity index 80%
rename from client/coral-admin/src/graphql/queries/metrics.graphql
rename to client/coral-admin/src/graphql/queries/assetMetrics.graphql
index 9a226d8bc..caed174b4 100644
--- a/client/coral-admin/src/graphql/queries/metrics.graphql
+++ b/client/coral-admin/src/graphql/queries/assetMetrics.graphql
@@ -13,7 +13,7 @@ fragment metrics on Asset {
 }
 
 query Metrics ($from: Date!, $to: Date!, $sort: ACTION_TYPE!) {
-  metrics(from: $from, to: $to, sort: $sort) {
+  metrics: assetMetrics(from: $from, to: $to, sort: $sort) {
     ...metrics
   }
 }
diff --git a/client/coral-admin/src/graphql/queries/commentMetrics.graphql b/client/coral-admin/src/graphql/queries/commentMetrics.graphql
new file mode 100644
index 000000000..59a89739c
--- /dev/null
+++ b/client/coral-admin/src/graphql/queries/commentMetrics.graphql
@@ -0,0 +1,19 @@
+query CommentMetrics ($from: Date!, $to: Date!, $sort: ACTION_TYPE!) {
+  comments: commentMetrics(from: $from, to: $to, sort: $sort) {
+    id
+    body
+    user {
+      status
+      username
+    }
+    asset {
+      id
+      title
+    }
+    created_at
+    action_summaries {
+      type: __typename
+      count
+    }
+  }
+}
diff --git a/client/coral-admin/src/graphql/queries/index.js b/client/coral-admin/src/graphql/queries/index.js
index 1628a4ac8..ceedffd9d 100644
--- a/client/coral-admin/src/graphql/queries/index.js
+++ b/client/coral-admin/src/graphql/queries/index.js
@@ -1,9 +1,10 @@
 import {graphql} from 'react-apollo';
 
-import METRICS from './metrics.graphql';
+import ASSET_METRICS from './assetMetrics.graphql';
+import COMMENT_METRICS from './commentMetrics.graphql';
 import MOD_QUEUE_QUERY from './modQueueQuery.graphql';
 
-export const mostFlags = graphql(METRICS, {
+export const mostFlags = graphql(ASSET_METRICS, {
   options: () => {
 
     // currently hard-coded per Greg's advice
@@ -19,7 +20,23 @@ export const mostFlags = graphql(METRICS, {
   }
 });
 
-export const mostLikes = graphql(METRICS, {
+export const mostLikes = graphql(ASSET_METRICS, {
+  options: () => {
+
+    // currently hard-coded per Greg's advice
+    const fiveMinutesAgo = new Date();
+    fiveMinutesAgo.setMinutes(fiveMinutesAgo.getMinutes() - 5);
+    return {
+      variables: {
+        sort: 'LIKE',
+        from: fiveMinutesAgo.toISOString(),
+        to: new Date().toISOString()
+      }
+    };
+  }
+});
+
+export const mostLikedComments = graphql(COMMENT_METRICS, {
   options: () => {
 
     // currently hard-coded per Greg's advice
diff --git a/client/coral-sign-in/components/SignUpContent.js b/client/coral-sign-in/components/SignUpContent.js
index 6a781675b..216349412 100644
--- a/client/coral-sign-in/components/SignUpContent.js
+++ b/client/coral-sign-in/components/SignUpContent.js
@@ -138,12 +138,9 @@ class SignUpContent extends React.Component {
           </div>
         }
         <div className={styles.footer}>
-          <span>
-            {lang.t('signIn.alreadyHaveAnAccount')}
-            <a id="coralSignInViewTrigger" onClick={() => changeView('SIGNIN')}>
-              {lang.t('signIn.signIn')}
-            </a>
-          </span>
+          {lang.t('signIn.alreadyHaveAnAccount')} <a id="coralSignInViewTrigger" onClick={() => changeView('SIGNIN')}>
+            {lang.t('signIn.signIn')}
+          </a>
         </div>
       </div>
     );