Like and Flag summaries work again

client/coral-admin/src/components/FlagWidget.js

@@ -1,66 +1,60 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import {compose} from 'react-apollo';
+import {mostFlags} from 'coral-admin/src/graphql/queries';
 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';
+import {Spinner} from 'coral-ui';
 
 const lang = new I18n(translations);
 
-const FlagWidget = ({assets}) => {
+const FlagWidget = (props) => {
+
+  if (props.data.loading) {
+    return <Spinner />;
+  }
+
+  const {data: {metrics: assets}} = props;
 
   return (
-    <table className={styles.widgetTable}>
-      <thead className={styles.widgetHead}>
-        <tr>
-          <th></th>{/* empty on purpose */}
-          <th>{lang.t('streams.article')}</th>
-          <th>{lang.t('modqueue.flagged')}</th>
-          <th>{lang.t('modqueue.likes')}</th>
-          <th>{lang.t('dashboard.comment_count')}</th>
-        </tr>
-      </thead>
-      <tbody>
-        {
-          assets.length
-          ? assets.map((asset, index) => {
-            const flagSummary = asset.action_summaries.find(s => s.__typename === 'FlagAssetActionSummary');
-            const likeSummary = asset.action_summaries.find(s => s.__typename === 'LikeAssetActionSummary');
-            return (
-              <tr key={asset.id}>
-                <td>{index + 1}.</td>
-                <td>
-                  <Link to={`/admin/moderate/flagged/${asset.id}`}>{asset.title}</Link>
-                  <p className={styles.lede}>{asset.author} - Published: {new Date(asset.created_at).toLocaleDateString()}</p>
-                </td>
-                <td>{flagSummary ? flagSummary.actionCount : 0}</td>
-                <td>{likeSummary ? likeSummary.actionCount : 0}</td>
-                <td>{asset.commentCount}</td>
-              </tr>
-            );
-          })
-          : <tr><td colSpan="3">{lang.t('dashboard.no_flags')}</td></tr>
-        }
-      </tbody>
-    </table>
+    <div>
+      <h2 className={styles.heading}>Top Ten Articles with the most flagged comments</h2>
+      <table className={styles.widgetTable}>
+        <thead className={styles.widgetHead}>
+          <tr>
+            <th></th>{/* empty on purpose */}
+            <th>{lang.t('streams.article')}</th>
+            <th>{lang.t('modqueue.flagged')}</th>
+            <th>{lang.t('modqueue.likes')}</th>
+            <th>{lang.t('dashboard.comment_count')}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {
+            assets.length
+            ? assets.map((asset, index) => {
+              const flagSummary = asset.action_summaries.find(s => s.type === 'FlagAssetActionSummary');
+              const likeSummary = asset.action_summaries.find(s => s.type === 'LikeAssetActionSummary');
+              return (
+                <tr key={asset.id}>
+                  <td>{index + 1}.</td>
+                  <td>
+                    <Link to={`/admin/moderate/flagged/${asset.id}`}>{asset.title}</Link>
+                    <p className={styles.lede}>{asset.author} - Published: {new Date(asset.created_at).toLocaleDateString()}</p>
+                  </td>
+                  <td>{flagSummary ? flagSummary.actionCount : 0}</td>
+                  <td>{likeSummary ? likeSummary.actionCount : 0}</td>
+                  <td>{asset.commentCount}</td>
+                </tr>
+              );
+            })
+            : <tr><td colSpan="3">{lang.t('dashboard.no_flags')}</td></tr>
+          }
+        </tbody>
+      </table>
+    </div>
   );
 };
 
-FlagWidget.propTypes = {
-  assets: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string,
-      title: PropTypes.string,
-      url: PropTypes.string,
-      commentCount: PropTypes.number,
-      action_summaries: PropTypes.arrayOf(
-        PropTypes.shape({
-          __typename: PropTypes.string.isRequired,
-          actionCount: PropTypes.number.isRequired,
-          actionableItemCount: PropTypes.number.isRequired
-        })
-      )
-    })
-  ).isRequired
-};
-
-export default FlagWidget;
+export default compose(mostFlags)(FlagWidget);

client/coral-admin/src/components/LikeWidget.js

@@ -1,34 +1,61 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import {compose} from 'react-apollo';
+import {mostLikes} from 'coral-admin/src/graphql/queries';
 import {Link} from 'react-router';
+import {Spinner} from 'coral-ui';
 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 LikeWidget = ({assets}) => {
+const LikeWidget = (props) => {
+
+  if (props.data.loading) {
+    return <Spinner />;
+  }
+
+  const {data: {metrics: assets}} = props;
+
   return (
-    <table className={styles.widgetTable}>
-    </table>
+    <div>
+      <h2 className={styles.heading}>Top Ten Articles with the most likes</h2>
+      <table className={styles.widgetTable}>
+        <thead className={styles.widgetHead}>
+          <tr>
+            <th></th>{/* empty on purpose */}
+            <th>{lang.t('streams.article')}</th>
+            <th>{lang.t('modqueue.flagged')}</th>
+            <th>{lang.t('modqueue.likes')}</th>
+            <th>{lang.t('dashboard.comment_count')}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {
+            assets.length
+            ? assets.map((asset, index) => {
+              const flagSummary = asset.action_summaries.find(s => s.type === 'FlagAssetActionSummary');
+              const likeSummary = asset.action_summaries.find(s => s.type === 'LikeAssetActionSummary');
+              console.log('LikeWidget', likeSummary);
+              return (
+                <tr key={asset.id}>
+                  <td>{index + 1}.</td>
+                  <td>
+                    <Link to={`/admin/moderate/flagged/${asset.id}`}>{asset.title}</Link>
+                    <p className={styles.lede}>{asset.author} - Published: {new Date(asset.created_at).toLocaleDateString()}</p>
+                  </td>
+                  <td>{flagSummary ? flagSummary.actionCount : 0}</td>
+                  <td>{likeSummary ? likeSummary.actionCount : 0}</td>
+                  <td>{asset.commentCount}</td>
+                </tr>
+              );
+            })
+            : <tr><td colSpan="3">{lang.t('dashboard.no_likes')}</td></tr>
+          }
+        </tbody>
+      </table>
+    </div>
   );
 };
 
-LikeWidget.propTypes = {
-  assets: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string,
-      title: PropTypes.string,
-      url: PropTypes.string,
-      commentCount: PropTypes.number,
-      action_summaries: PropTypes.arrayOf(
-        PropTypes.shape({
-          __typename: PropTypes.string.isRequired,
-          actionCount: PropTypes.number.isRequired,
-          actionableItemCount: PropTypes.number.isRequired
-        })
-      )
-    })
-  ).isRequired
-};
-
-export default LikeWidget;
+export default compose(mostLikes)(LikeWidget);

client/coral-admin/src/containers/Dashboard/Dashboard.js

@@ -1,45 +1,22 @@
 import React from 'react';
-import {compose} from 'react-apollo';
-import {mostFlags, mostLikes} from 'coral-admin/src/graphql/queries';
-import {Spinner} from 'coral-ui';
 import styles from './Dashboard.css';
 import FlagWidget from '../../components/FlagWidget';
 import LikeWidget from '../../components/LikeWidget';
 
-class Dashboard extends React.Component {
-  render () {
-
-    const {data} = this.props;
-    console.log('data', data);
-    const {assetsByLike, assetsByFlag} = data;
-
-    if (data.loading) {
-      return <Spinner />;
-    }
-
-    if (data.error) {
-      return <code><pre>{data.error}</pre></code>;
-    }
-
-    return (
-      <div className={styles.Dashboard}>
-        <div className={styles.widget}>
-          <h2 className={styles.heading}>Top Ten Articles with the most flagged comments</h2>
-          <FlagWidget assets={assetsByFlag} />
-        </div>
-        <div className={styles.widget}>
-          <h2 className={styles.heading}>Top ten comments with the most likes</h2>
-        </div>
-        <div className={styles.widget}>
-          <h2 className={styles.heading}>Top Ten Articles with the most likes</h2>
-          <LikeWidget assets={assetsByLike} />
-        </div>
+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>
+    </div>
+  );
+};
 
-export default compose(
-  mostFlags,
-  mostLikes
-)(Dashboard);
+export default Dashboard;

client/coral-admin/src/graphql/queries/assetsByLike.graphql

@@ -1,19 +0,0 @@
-fragment metrics on Asset {
-  id
-  title
-  url
-  commentCount
-  author
-  created_at
-  action_summaries {
-    type: __typename
-    actionCount
-    actionableItemCount
-  }
-}
-
-query Metrics ($from: Date!, $to: Date!, $sort: ACTION_TYPE!) {
-  assetsByLike: metrics(from: $from, to: $to, sort: $sort) {
-    ...metrics
-  }
-}

client/coral-admin/src/graphql/queries/index.js

@@ -1,10 +1,9 @@
 import {graphql} from 'react-apollo';
 
-import BY_LIKES from './assetsByLike.graphql';
-import BY_FLAGS from './assetsByFlag.graphql';
+import METRICS from './metrics.graphql';
 import MOD_QUEUE_QUERY from './modQueueQuery.graphql';
 
-export const mostFlags = graphql(BY_FLAGS, {
+export const mostFlags = graphql(METRICS, {
   options: () => {
 
     // currently hard-coded per Greg's advice
@@ -20,8 +19,10 @@ export const mostFlags = graphql(BY_FLAGS, {
   }
 });
 
-export const mostLikes = graphql(BY_LIKES, {
+export const mostLikes = graphql(METRICS, {
   options: () => {
+
+    // currently hard-coded per Greg's advice
     const fiveMinutesAgo = new Date();
     fiveMinutesAgo.setMinutes(fiveMinutesAgo.getMinutes() - 5);
     return {

client/coral-admin/src/graphql/queries/metrics.graphql

@@ -13,7 +13,7 @@ fragment metrics on Asset {
 }
 
 query Metrics ($from: Date!, $to: Date!, $sort: ACTION_TYPE!) {
-  assetsByFlag: metrics(from: $from, to: $to, sort: $sort) {
+  metrics(from: $from, to: $to, sort: $sort) {
     ...metrics
   }
 }

client/coral-admin/src/translations.json

@@ -110,6 +110,7 @@
     },
     "dashboard": {
       "no_flags": "There have been no flags in the last 5 minutes! Hooray!",
+      "no_likes": "There have been no likes in the last 5 minutes. All quiet.",
       "comment_count": "Comments"
     },
     "streams": {
@@ -217,6 +218,7 @@
     },
     "dashbord": {
       "no_flags": "¡Nadie ha marcado nada en los últimos 5 minutos! ¡Bravo!",
+      "no_likes": "A nadie le ha gustado algún comentario en los últimos 5 minutos. Todo tranquilo.",
       "comment_count": "Comentarios"
     },
     "streams": {