add most liked comments widget

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;

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>
   );
 };

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}>

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}>

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);

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;

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}

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;

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
   }
 }

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
+    }
+  }
+}

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

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>
     );