create FlagWidget

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

@@ -0,0 +1,5 @@
+.heading {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: bold;
+}

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;

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>