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 => (
+
+ {props.children}
+
+);
+
+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 (
-
+
{
- props.data[activeTab].map((comment, i) => {
+ areComments
+ ? props.data[activeTab].map((comment, i) => {
const status = comment.action_summaries ? 'FLAGGED' : comment.status;
return {
currentAsset={props.currentAsset}
/>;
})
+ : No more comments to moderate! You're all caught up. Go have some ☕️
}
@@ -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 (
@@ -62,11 +62,31 @@ const Comment = ({actions = [], ...props}) => {
- {actionSumaries && }
+ {actionSummaries && }
);
};
+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 => (
Flags:
- {props.actionSumaries.map((action, i) =>
+ {props.actionSummaries.map((action, i) =>
- {!action.reason ? No reason provided : action.reason} ({action.count})
)}
@@ -13,7 +13,7 @@ const FlagBox = props => (
);
FlagBox.propTypes = {
- actionSumaries: PropTypes.array.isRequired
+ actionSummaries: PropTypes.array.isRequired
};
export default FlagBox;