add EmptyCard component. fix typos. more PropTypes.

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'

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;