omg, a bunch of UI madness

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

@@ -1,17 +1,76 @@
 import React from 'react';
 import styles from './Dashboard.css';
+import {graphql} from 'react-apollo';
+import {connect} from 'react-redux';
 import FlagWidget from './FlagWidget';
 import LikeWidget from './LikeWidget';
-import MostLikedCommentsWidget from './MostLikedCommentsWidget';
+import METRICS from 'coral-admin/src/graphql/queries/metrics.graphql';
+// import MostLikedCommentsWidget from './MostLikedCommentsWidget';
+import {showBanUserDialog, hideBanUserDialog} from 'coral-admin/src/actions/moderation';
+import {Spinner} from 'coral-ui';
 
-const Dashboard = () => {
-  return (
-    <div className={styles.Dashboard}>
-      <FlagWidget />
-      <MostLikedCommentsWidget />
-      <LikeWidget />
-    </div>
-  );
+class Dashboard extends React.Component {
+
+  render () {
+
+    if (this.props.data && this.props.data.loading) {
+      return <Spinner />;
+    }
+
+    console.log(this.props.data);
+
+    const {data: {assetsByLike, assetsByFlag}} = this.props;
+
+    console.log('assetsByLike', assetsByLike);
+    console.log('assetsByFlag', assetsByFlag);
+
+    // const {moderation, settings} = this.props;
+
+    return (
+      <div className={styles.Dashboard}>
+        {assetsByFlag && <FlagWidget assets={assetsByFlag} />}
+        {/*<MostLikedCommentsWidget
+          moderation={moderation}
+          settings={settings}
+          showBanUserDialog={this.props.showBanUserDialog}
+          hideBanUserDialog={this.props.hideBanUserDialog} />*/}
+        {assetsByLike && <LikeWidget assets={assetsByLike} />}
+      </div>
+    );
+  }
+}
+
+let fiveMinutesAgo = new Date();
+fiveMinutesAgo.setMinutes(fiveMinutesAgo.getMinutes() - 5);
+fiveMinutesAgo = fiveMinutesAgo.toISOString();
+const now = new Date().toISOString();
+
+const getMetrics = graphql(METRICS, {
+  options: () => {
+
+    return {
+      variables: {
+        from: fiveMinutesAgo,
+        // from: '2017-02-23T16:09:44.235Z',
+        to: now
+        // to: '2017-02-23T19:30:23.251Z'
+      }
+    };
+  }
+});
+
+const DashboardWithData = getMetrics(Dashboard);
+
+const mapStateToProps = state => {
+  return {
+    settings: state.settings.toJS(),
+    moderation: state.moderation.toJS()
+  };
 };
 
-export default Dashboard;
+const mapDispatchToProps = dispatch => ({
+  showBanUserDialog: (user, commentId) => dispatch(showBanUserDialog(user, commentId)),
+  hideBanUserDialog: () => dispatch(hideBanUserDialog(false))
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(DashboardWithData);

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

@@ -1,21 +1,13 @@
 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 = (props) => {
-
-  if (props.data.loading) {
-    return <Spinner />;
-  }
-
-  const {data: {assets}} = props;
+  const {assets} = props;
 
   return (
     <div className={styles.widget}>
@@ -57,4 +49,4 @@ const FlagWidget = (props) => {
   );
 };
 
-export default compose(mostFlags)(FlagWidget);
+export default FlagWidget;

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

@@ -11,11 +11,7 @@ const lang = new I18n(translations);
 
 const LikeWidget = (props) => {
 
-  if (props.data.loading) {
-    return <Spinner />;
-  }
-
-  const {data: {assets}} = props;
+  const {assets} = props;
 
   return (
     <div className={styles.widget}>
@@ -58,4 +54,4 @@ const LikeWidget = (props) => {
   );
 };
 
-export default compose(mostLikes)(LikeWidget);
+export default LikeWidget;

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

@@ -1,37 +1,44 @@
 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 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';
+import BanUserDialog from 'coral-admin/src/components/BanUserDialog';
 
-// const lang = new I18n(translations);
+const lang = new I18n(translations);
 
-const MostLikedCommentsWidget = props => {
+class MostLikedCommentsWidget extends React.Component {
 
-  if (props.data.loading) {
-    return <Spinner />;
+  render () {
+    // console.log('render! loading?', this.props.data.loading);
+
+    // if (this.props.data.loading) {
+    //   return <Spinner />;
+    // }
+
+    // const {
+    //   comments,
+    //   moderation,
+    //   settings,
+    //   showBanUserDialog,
+    //   hideBanUserDialog
+    // } = this.props;
+
+    // console.log('MostLikedCommentsWidget', comments);
+
+    return (
+      <div className={styles.widget}>
+        <h2 className={styles.heading}>{lang.t('most_liked_comments')}</h2>
+        {/*<ModerationQueue
+          comments={comments}
+          suspectWords={settings.wordlist.suspect}
+          showBanUserDialog={showBanUserDialog}
+          acceptComment={() => {}}
+          rejectComment={() => {}} />*/}
+      </div>
+    );
   }
+}
 
-  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);
+export default MostLikedCommentsWidget;

client/coral-admin/src/graphql/queries/assetMetrics.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!) {
-  assets: assetMetrics(from: $from, to: $to, sort: $sort) {
-    ...metrics
-  }
-}

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

@@ -1,19 +0,0 @@
-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,56 +1,24 @@
 import {graphql} from 'react-apollo';
 
-import ASSET_METRICS from './assetMetrics.graphql';
-import COMMENT_METRICS from './commentMetrics.graphql';
+import METRICS from './metrics.graphql';
 import MOD_QUEUE_QUERY from './modQueueQuery.graphql';
 
-export const mostFlags = graphql(ASSET_METRICS, {
-  options: () => {
-
-    // currently hard-coded per Greg's advice
-    const fiveMinutesAgo = new Date();
-    fiveMinutesAgo.setMinutes(fiveMinutesAgo.getMinutes() - 5);
-    return {
-      variables: {
-        sort: 'FLAG',
-        from: fiveMinutesAgo.toISOString(),
-        to: new Date().toISOString()
-      }
-    };
-  }
-});
-
-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
-    const fiveMinutesAgo = new Date();
-    fiveMinutesAgo.setMinutes(fiveMinutesAgo.getMinutes() - 5);
-    return {
-      variables: {
-        sort: 'LIKE',
-        from: fiveMinutesAgo.toISOString(),
-        to: new Date().toISOString()
-      }
-    };
-  }
-});
+// export const getMetrics = graphql(METRICS, {
+//   options: () => {
+//
+//     // currently hard-coded per Greg's advice
+//     const fiveMinutesAgo = new Date();
+//     fiveMinutesAgo.setMinutes(fiveMinutesAgo.getMinutes() - 5);
+//     return {
+//       variables: {
+//         // from: fiveMinutesAgo.toISOString(),
+//         from: '2017-02-23T16:09:44.235Z',
+//         // to: new Date().toISOString()
+//         to: '2017-02-23T19:30:23.251Z'
+//       }
+//     };
+//   }
+// });
 
 export const modQueueQuery = graphql(MOD_QUEUE_QUERY, {
   options: ({params: {id = null}}) => {

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

@@ -0,0 +1,39 @@
+fragment metrics on Asset {
+  id
+  title
+  url
+  commentCount
+  author
+  created_at
+  action_summaries {
+    type: __typename
+    actionCount
+    actionableItemCount
+  }
+}
+
+query Metrics ($from: Date!, $to: Date!) {
+  assetsByFlag: assetMetrics(from: $from, to: $to, sort: FLAG) {
+    ...metrics
+  }
+  assetsByLike: assetMetrics(from: $from, to: $to, sort: LIKE) {
+    ...metrics
+  }
+  mostLikedComments: commentMetrics(from: $from, to: $to, sort: LIKE) {
+    id
+    body
+    user {
+      status
+      username
+    }
+    asset {
+      id
+      title
+    }
+    created_at
+    action_summaries {
+      type: __typename
+      count
+    }
+  }
+}

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

@@ -1,14 +0,0 @@
-query Metrics ($from: Date!, $to: Date!, $sort: ACTION_TYPE!) {
-  metrics(from: $from, to: $to, sort: $sort) {
-    id
-    title
-    url
-    commentCount
-    author
-    created_at
-    action_summaries {
-      actionCount
-      actionableItemCount
-    }
-  }
-}