diff --git a/client/coral-admin/src/components/User.js b/client/coral-admin/src/components/User.js
new file mode 100644
index 000000000..5fd3fafdc
--- /dev/null
+++ b/client/coral-admin/src/components/User.js
@@ -0,0 +1,111 @@
+import React from 'react';
+import Linkify from 'react-linkify';
+
+import styles from './ModerationList.css';
+
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from '../translations.json';
+
+import {Icon} from 'react-mdl';
+import Highlighter from 'react-highlight-words';
+import {FabButton, Button} from 'coral-ui';
+
+const linkify = new Linkify();
+
+// Render a single comment for the list
+export default props => {
+ const {action, user} = props;
+ let userStatus = user.status;
+ const links = linkify.getMatches(user.bio);
+
+ return (
+
+
+
+ person
+ {user.displayName}
+
+
+ {links ?
+
Contains Link : null}
+
+ {props.modActions.map((action, i) => getActionButton(action, i, props))}
+
+
+
+ {userStatus === 'banned' ?
+ {lang.t('comment.banned_user')} : null}
+
+
+
+
+
+
+
+
+
+
+ {
+ action.metadata.map(metadata => {
+ return
+
+ {
+ metadata.field === 'bio' ?
+ lang.t('user.flagged_bio')
+ : lang.t('user.flagged_username')
+ }:
+
+
+ {
+ metadata.reason
+ }
+
+
;
+ })
+ }
+
+
+ );
+};
+
+// Get the button of the action performed over a comment if any
+const getActionButton = (action, i, props) => {
+ const {user} = props;
+ const status = user.status;
+ const banned = (user.status === 'banned');
+
+ if (action === 'flag' && status) {
+ return null;
+ }
+ if (action === 'ban') {
+ return (
+
+ );
+ }
+ return (
+ props.onClickAction(props.actionsMap[action].status, user.id)}
+ />
+ );
+};
+
+const linkStyles = {
+ backgroundColor: 'rgb(255, 219, 135)',
+ padding: '1px 2px'
+};
+
+const lang = new I18n(translations);
diff --git a/client/coral-admin/src/constants/users.js b/client/coral-admin/src/constants/users.js
index 8c0563237..813b5794d 100644
--- a/client/coral-admin/src/constants/users.js
+++ b/client/coral-admin/src/constants/users.js
@@ -1,3 +1,4 @@
export const UPDATE_STATUS_REQUEST = 'UPDATE_STATUS_REQUEST';
export const UPDATE_STATUS_SUCCESS = 'UPDATE_STATUS_SUCCESS';
export const UPDATE_STATUS_FAILURE = 'UPDATE_STATUS_FAILURE';
+export const USERS_MODERATION_QUEUE_FETCH_SUCCESS = 'USERS_MODERATION_QUEUE_FETCH_SUCCESS';