From e24a0caa20fcd3c25ef12dac6e0459e2b91f3426 Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Tue, 21 Feb 2017 12:08:02 -0700
Subject: [PATCH] add EmptyCard component. fix typos. more PropTypes.

---
 .../coral-admin/src/components/EmptyCard.js   | 14 ++++++++++
 .../ModerationQueue/ModerationQueue.js        | 15 ++++++++---
 .../ModerationQueue/components/Comment.js     | 26 ++++++++++++++++---
 .../ModerationQueue/components/FlagBox.js     |  4 +--
 4 files changed, 51 insertions(+), 8 deletions(-)
 create mode 100644 client/coral-admin/src/components/EmptyCard.js

diff --git a/client/coral-admin/src/components/EmptyCard.js b/client/coral-admin/src/components/EmptyCard.js
new file mode 100644
index 000000000..e0f837e69
--- /dev/null
+++ b/client/coral-admin/src/components/EmptyCard.js
@@ -0,0 +1,14 @@
+import React, {PropTypes} from 'react';
+import {Card} from 'coral-ui';
+
+const EmptyCard = props => (
+  <Card style={{textAlign: 'center', maxWidth: 600, margin: '0 auto'}}>
+    {props.children}
+  </Card>
+);
+
+EmptyCard.propTypes = {
+  children: PropTypes.node.isRequired
+};
+
+export default EmptyCard;
diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
index d30f24c1f..69685a22e 100644
--- a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
+++ b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
@@ -1,14 +1,17 @@
 import React, {PropTypes} from 'react';
 
 import Comment from './components/Comment';
+import EmptyCard from '../../components/EmptyCard';
 import {actionsMap} from './helpers/moderationQueueActionsMap';
 
 const ModerationQueue = ({activeTab = 'premod', ...props}) => {
+  const areComments = props.data[activeTab].length;
   return (
     <div id="moderationList">
-      <ul>
+      <ul style={{paddingLeft: 0}}>
       {
-        props.data[activeTab].map((comment, i) => {
+        areComments
+        ? props.data[activeTab].map((comment, i) => {
           const status = comment.action_summaries ? 'FLAGGED' : comment.status;
           return <Comment
             key={i}
@@ -22,6 +25,7 @@ const ModerationQueue = ({activeTab = 'premod', ...props}) => {
             currentAsset={props.currentAsset}
           />;
         })
+        : <EmptyCard>No more comments to moderate! You're all caught up. Go have some ☕️</EmptyCard>
       }
       </ul>
     </div>
@@ -29,7 +33,12 @@ const ModerationQueue = ({activeTab = 'premod', ...props}) => {
 };
 
 ModerationQueue.propTypes = {
-  data: PropTypes.object.isRequired
+  data: PropTypes.object.isRequired,
+  acceptComment: PropTypes.func.isRequired,
+  rejectComment: PropTypes.func.isRequired,
+  showBanUserDialog: PropTypes.func.isRequired,
+  currentAsset: PropTypes.object,
+  suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired
 };
 
 export default ModerationQueue;
diff --git a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
index f8f50c6df..c8818aab9 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
+++ b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {PropTypes} from 'react';
 import timeago from 'timeago.js';
 import Linkify from 'react-linkify';
 import Highlighter from 'react-highlight-words';
@@ -17,7 +17,7 @@ const lang = new I18n(translations);
 
 const Comment = ({actions = [], ...props}) => {
   const links = linkify.getMatches(props.comment.body);
-  const actionSumaries = props.comment.action_summaries;
+  const actionSummaries = props.comment.action_summaries;
   return (
     <li tabIndex={props.index}
         className={`mdl-card mdl-shadow--2dp ${styles.Comment} ${styles.listItem} ${props.isActive && !props.hideActive ? styles.activeItem : ''}`}>
@@ -62,11 +62,31 @@ const Comment = ({actions = [], ...props}) => {
           </Linkify>
         </p>
       </div>
-      {actionSumaries && <FlagBox actionSumaries={actionSumaries} />}
+      {actionSummaries && <FlagBox actionSummaries={actionSummaries} />}
     </li>
   );
 };
 
+Comment.propTypes = {
+  acceptComment: PropTypes.func.isRequired,
+  rejectComment: PropTypes.func.isRequired,
+  suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
+  currentAsset: PropTypes.object,
+  isActive: PropTypes.bool.isRequired,
+  comment: PropTypes.shape({
+    body: PropTypes.string.isRequired,
+    action_summaries: PropTypes.array,
+    created_at: PropTypes.string.isRequired,
+    user: PropTypes.shape({
+      banned: PropTypes.bool
+    }),
+    asset: PropTypes.shape({
+      title: PropTypes.string,
+      id: PropTypes.string
+    })
+  })
+};
+
 const linkStyles = {
   backgroundColor: 'rgb(255, 219, 135)',
   padding: '1px 2px'
diff --git a/client/coral-admin/src/containers/ModerationQueue/components/FlagBox.js b/client/coral-admin/src/containers/ModerationQueue/components/FlagBox.js
index bf5a34f29..6140abd90 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/FlagBox.js
+++ b/client/coral-admin/src/containers/ModerationQueue/components/FlagBox.js
@@ -5,7 +5,7 @@ const FlagBox = props => (
   <div className={styles.flagBox}>
     <h3>Flags:</h3>
     <ul>
-      {props.actionSumaries.map((action, i) =>
+      {props.actionSummaries.map((action, i) =>
         <li key={i}>{!action.reason ? <i>No reason provided</i> : action.reason} (<strong>{action.count}</strong>)</li>
       )}
     </ul>
@@ -13,7 +13,7 @@ const FlagBox = props => (
 );
 
 FlagBox.propTypes = {
-  actionSumaries: PropTypes.array.isRequired
+  actionSummaries: PropTypes.array.isRequired
 };
 
 export default FlagBox;