add EmptyCard component. fix typos. more PropTypes.

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;