Styling UserActions Component.

client/coral-admin/src/components/Comment.js

@@ -14,7 +14,7 @@ import {FabButton, Button} from 'coral-ui';
 const linkify = new Linkify();
 
 // Render a single comment for the list
-export default props => {
+const Comment = props => {
   const {comment, author} = props;
   let authorStatus = author.status;
   const links = linkify.getMatches(comment.body);
@@ -87,6 +87,8 @@ const getActionButton = (action, i, props) => {
   );
 };
 
+export default Comment;
+
 const linkStyles = {
   backgroundColor: 'rgb(255, 219, 135)',
   padding: '1px 2px'

client/coral-admin/src/components/ModerationList.css

@@ -49,6 +49,7 @@
     justify-content: space-between;
 
     .author {
+      min-width: 230px;
       display: flex;
       align-items: center;
     }
@@ -97,6 +98,12 @@
     padding-top: 15px;
     padding-left: 10px;
   }
+
+  .flagCount{
+    font-size: 12px;
+    color: #d32f2f;
+  }
+
 }
 
 .empty {

client/coral-admin/src/components/ModerationList.js

@@ -2,7 +2,8 @@ import React, {PropTypes} from 'react';
 import styles from './ModerationList.css';
 import key from 'keymaster';
 import Hammer from 'hammerjs';
-import Comment from 'components/Comment';
+import Comment from './Comment';
+import UserAction from './UserAction';
 
 // Each action has different meaning and configuration
 const actionsMap = {
@@ -167,7 +168,19 @@ export default class ModerationList extends React.Component {
     } else {
 
       // If the item is an action...
-      modItem = <h2>Action</h2>;
+      const user = users[item.item_id];
+      modItem = <UserAction
+        suspectWords={suspectWords}
+        action={item}
+        user={user}
+        key={index}
+        index={index}
+        onClickAction={this.onClickAction}
+        onClickShowBanDialog={this.onClickShowBanDialog}
+        modActions={modActions}
+        actionsMap={actionsMap}
+        isActive={itemId === active}
+        hideActive={hideActive} />;
     }
     return modItem;
   }

client/coral-admin/src/components/UserAction.js

@@ -13,10 +13,10 @@ import {FabButton, Button} from 'coral-ui';
 const linkify = new Linkify();
 
 // Render a single comment for the list
-export default props => {
+const UserAction = props => {
   const {action, user} = props;
   let userStatus = user.status;
-  const links = linkify.getMatches(user.bio);
+  const links = user.settings.bio ? linkify.getMatches(user.settings.bio) : [];
 
   return (
     <li tabIndex={props.index} className={`${styles.listItem} ${props.isActive && !props.hideActive ? styles.activeItem : ''}`}>
@@ -37,39 +37,30 @@ export default props => {
           <span className={styles.banned}><Icon name='error_outline'/> {lang.t('comment.banned_user')}</span> : null}
         </div>
       </div>
-      <div className={styles.itemBody}>
-        <span className={styles.body}>
-          <Linkify  component='span' properties={{style: linkStyles}}>
-            <Highlighter
-              searchWords={props.suspectWords}
-              textToHighlight={user.bio} />
-          </Linkify>
-        </span>
-      </div>
-      <div className={styles.flagReasons}>
-        {
-          action.metadata.map(metadata => {
-            return <div>
-                <span className={styles.flagField}>
-                  {
-                    metadata.field === 'bio' ?
-                    lang.t('user.flagged_bio')
-                    : lang.t('user.flagged_username')
-                  }:
-                </span>
-                <span className={styles.flagReason}>
-                  {
-                    metadata.reason
-                  }
-                </span>
-            </div>;
-          })
-        }
+      {
+        user.settings.bio &&
+        <div>
+          <div className={styles.itemBody}>
+            <div>{lang.t('user.user_bio')}:</div>
+            <span className={styles.body}>
+              <Linkify  component='span' properties={{style: linkStyles}}>
+                <Highlighter
+                  searchWords={props.suspectWords}
+                  textToHighlight={user.settings.bio} />
+              </Linkify>
+            </span>
+          </div>
+        </div>
+      }
+      <div className={styles.flagCount}>
+        {`${action.count} ${lang.t('user.bio_flags')}`}
       </div>
     </li>
   );
 };
 
+export default UserAction;
+
 // Get the button of the action performed over a comment if any
 const getActionButton = (action, i, props) => {
   const {user} = props;

client/coral-admin/src/translations.json

@@ -37,6 +37,11 @@
       "ban_user": "Ban User",
       "banned_user": "Banned User"
     },
+    "user": {
+      "user_bio": "User Bio",
+      "bio_flags": "flags for this bio",
+      "username_flags": "flags for this username"
+    },
     "embedlink": {
       "copy": "Copy to Clipboard"
     },
@@ -126,6 +131,11 @@
       "ban_user": "Suspender Usuario",
       "banned_user": "Usuario Suspendido"
     },
+    "user": {
+      "user_bio": "",
+      "bio_flags": "",
+      "username_flags": ""
+    },
     "configure": {
       "enable-pre-moderation": "Habilitar pre-moderación",
       "enable-pre-moderation-text": "Los moderadores deben aprobar cada comentario antes de que sea publicado.",