From 0bef413a3a7efa0c8195bbecdaab0eb7f9f62355 Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Tue, 14 Feb 2017 15:20:28 -0700
Subject: [PATCH] saving my place

---
 client/coral-admin/src/AppRouter.js           |  1 +
 .../src/containers/Dashboard/Dashboard.css    | 23 +++++++++++++++++++
 .../src/containers/Dashboard/Dashboard.js     | 15 +++++++++++-
 .../src/graphql/queries/mostFlags.graphql     |  4 +++-
 4 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 client/coral-admin/src/containers/Dashboard/Dashboard.css

diff --git a/client/coral-admin/src/AppRouter.js b/client/coral-admin/src/AppRouter.js
index 33baa4d7b..37616a207 100644
--- a/client/coral-admin/src/AppRouter.js
+++ b/client/coral-admin/src/AppRouter.js
@@ -22,6 +22,7 @@ const routes = (
       <Route path='dashboard' component={Dashboard} />
       <Route path='moderate' component={ModerationContainer} />
       <Route path='moderate/:id' component={ModerationContainer} />
+      <Route path='dashboard' component={Dashboard} />
     </Route>
   </div>
 );
diff --git a/client/coral-admin/src/containers/Dashboard/Dashboard.css b/client/coral-admin/src/containers/Dashboard/Dashboard.css
new file mode 100644
index 000000000..be2cd9f7a
--- /dev/null
+++ b/client/coral-admin/src/containers/Dashboard/Dashboard.css
@@ -0,0 +1,23 @@
+.Dashboard {
+  display: flex;
+  padding: 5px;
+}
+
+.widget {
+  margin-top: 10px;
+  flex: 1;
+  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
+  margin-right: 10px;
+  padding: 15px;
+
+}
+
+.widget:last-child {
+  margin-right: 0;
+}
+
+.heading {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: bold;
+}
diff --git a/client/coral-admin/src/containers/Dashboard/Dashboard.js b/client/coral-admin/src/containers/Dashboard/Dashboard.js
index c287d5f2c..e01eec319 100644
--- a/client/coral-admin/src/containers/Dashboard/Dashboard.js
+++ b/client/coral-admin/src/containers/Dashboard/Dashboard.js
@@ -1,11 +1,24 @@
 import React from 'react';
 import {compose} from 'react-apollo';
 import {mostFlags} from 'coral-admin/src/graphql/queries';
+import styles from './Dashboard.css';
 
 class Dashboard extends React.Component {
   render () {
     return (
-      <div>Dashboard</div>
+      <div className={styles.Dashboard}>
+        <div className={`${styles.flagWidget} ${styles.widget}`}>
+          <h2 className={styles.heading}>Top Ten Articles with the most flagged comments</h2>
+          <table>
+            <thead>
+              <tr><th>Article</th><th>Flags</th></tr>
+            </thead>
+          </table>
+        </div>
+        <div className={`${styles.likeWidget} ${styles.widget}`}>
+          <h2 className={styles.heading}>Top ten comments with the most likes</h2>
+        </div>
+      </div>
     );
   }
 }
diff --git a/client/coral-admin/src/graphql/queries/mostFlags.graphql b/client/coral-admin/src/graphql/queries/mostFlags.graphql
index b84e21d08..229d64541 100644
--- a/client/coral-admin/src/graphql/queries/mostFlags.graphql
+++ b/client/coral-admin/src/graphql/queries/mostFlags.graphql
@@ -1,3 +1,5 @@
 query mostFlags {
-  metric
+  metric {
+    id
+  }
 }