From 216b21251d1e4b6aeb942cf6888d98c2c9be082f Mon Sep 17 00:00:00 2001
From: David Jay <davidgljay@gmail.com>
Date: Wed, 4 Jan 2017 15:33:41 -0500
Subject: [PATCH] Styling UserActions Component.

---
 client/coral-admin/src/components/Comment.js  |  4 +-
 .../src/components/ModerationList.css         |  7 +++
 .../src/components/ModerationList.js          | 17 ++++++-
 .../src/components/{User.js => UserAction.js} | 51 ++++++++-----------
 client/coral-admin/src/translations.json      | 10 ++++
 5 files changed, 56 insertions(+), 33 deletions(-)
 rename client/coral-admin/src/components/{User.js => UserAction.js} (70%)

diff --git a/client/coral-admin/src/components/Comment.js b/client/coral-admin/src/components/Comment.js
index 68db89565..dc350e815 100644
--- a/client/coral-admin/src/components/Comment.js
+++ b/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'
diff --git a/client/coral-admin/src/components/ModerationList.css b/client/coral-admin/src/components/ModerationList.css
index fddee7553..3f695095f 100644
--- a/client/coral-admin/src/components/ModerationList.css
+++ b/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 {
diff --git a/client/coral-admin/src/components/ModerationList.js b/client/coral-admin/src/components/ModerationList.js
index 99d48e135..dc576717c 100644
--- a/client/coral-admin/src/components/ModerationList.js
+++ b/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;
   }
diff --git a/client/coral-admin/src/components/User.js b/client/coral-admin/src/components/UserAction.js
similarity index 70%
rename from client/coral-admin/src/components/User.js
rename to client/coral-admin/src/components/UserAction.js
index 5fd3fafdc..8617562c9 100644
--- a/client/coral-admin/src/components/User.js
+++ b/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;
diff --git a/client/coral-admin/src/translations.json b/client/coral-admin/src/translations.json
index 3397a521b..d184839e4 100644
--- a/client/coral-admin/src/translations.json
+++ b/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.",