From 50e3e733c3e06b8aaeb907574c06dff6d1c0bb91 Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Tue, 14 Feb 2017 16:12:38 -0700
Subject: [PATCH] create FlagWidget

---
 .../coral-admin/src/components/FlagWidget.css |  5 ++++
 .../coral-admin/src/components/FlagWidget.js  | 26 +++++++++++++++++++
 .../src/containers/Dashboard/Dashboard.js     | 23 +++++++++++-----
 3 files changed, 47 insertions(+), 7 deletions(-)
 create mode 100644 client/coral-admin/src/components/FlagWidget.css
 create mode 100644 client/coral-admin/src/components/FlagWidget.js

diff --git a/client/coral-admin/src/components/FlagWidget.css b/client/coral-admin/src/components/FlagWidget.css
new file mode 100644
index 000000000..590aa51d1
--- /dev/null
+++ b/client/coral-admin/src/components/FlagWidget.css
@@ -0,0 +1,5 @@
+.heading {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: bold;
+}
diff --git a/client/coral-admin/src/components/FlagWidget.js b/client/coral-admin/src/components/FlagWidget.js
new file mode 100644
index 000000000..be167de8a
--- /dev/null
+++ b/client/coral-admin/src/components/FlagWidget.js
@@ -0,0 +1,26 @@
+import React, {PropTypes} from 'react';
+import styles from './FlagWidget.css';
+
+const FlagWidget = props => {
+  return (
+    <table>
+      <thead>
+        <tr><th>Article</th><th>Flags</th></tr>
+      </thead>
+      <tbody>
+        {/* display asset list as rows here */}
+      </tbody>
+    </table>
+  );
+};
+
+FlagWidget.propTypes = {
+  assets: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    title: PropTypes.string,
+    url: PropTypes.string,
+    count: PropTypes.number
+  })).isRequired
+};
+
+export default FlagWidget;
diff --git a/client/coral-admin/src/containers/Dashboard/Dashboard.js b/client/coral-admin/src/containers/Dashboard/Dashboard.js
index e01eec319..4d7f268f8 100644
--- a/client/coral-admin/src/containers/Dashboard/Dashboard.js
+++ b/client/coral-admin/src/containers/Dashboard/Dashboard.js
@@ -1,21 +1,30 @@
 import React from 'react';
 import {compose} from 'react-apollo';
 import {mostFlags} from 'coral-admin/src/graphql/queries';
+import {Spinner} from 'coral-ui';
 import styles from './Dashboard.css';
+import FlagWidget from '../../components/FlagWidget';
 
 class Dashboard extends React.Component {
   render () {
+
+    const {data} = this.props;
+
+    if (data.loading) {
+      return <Spinner />;
+    }
+
+    if (data.error) {
+      return <code><pre>{data.error}</pre></code>;
+    }
+
     return (
       <div className={styles.Dashboard}>
-        <div className={`${styles.flagWidget} ${styles.widget}`}>
+        <div className={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>
+          <FlagWidget assets={[]} />
         </div>
-        <div className={`${styles.likeWidget} ${styles.widget}`}>
+        <div className={styles.widget}>
           <h2 className={styles.heading}>Top ten comments with the most likes</h2>
         </div>
       </div>