From e66e23bbf63ea03bab851486d72ebf34f77debd2 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 11 Dec 2017 09:10:50 -0300
Subject: [PATCH] Updated with User-Status-Refactor API - User Detail Updated

---
 .../coral-admin/src/components/UserDetail.js  |  2 +-
 .../src/components/UserInfoTooltip.css        |  4 +++
 .../src/components/UserInfoTooltip.js         | 30 +++++++++++--------
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/client/coral-admin/src/components/UserDetail.js b/client/coral-admin/src/components/UserDetail.js
index 374959225..d1e7327d3 100644
--- a/client/coral-admin/src/components/UserDetail.js
+++ b/client/coral-admin/src/components/UserDetail.js
@@ -176,7 +176,7 @@ class UserDetail extends React.Component {
             </ActionsMenu>
           }
 
-          {banned || suspended && <UserInfoTooltip user={user} banned={banned} suspended={suspended} />}
+          {(banned || suspended) && <UserInfoTooltip user={user} banned={banned} suspended={suspended} />}
 
           <div>
             <ul className={styles.userDetailList}>
diff --git a/client/coral-admin/src/components/UserInfoTooltip.css b/client/coral-admin/src/components/UserInfoTooltip.css
index 5814d2f82..6b68e5cdf 100644
--- a/client/coral-admin/src/components/UserInfoTooltip.css
+++ b/client/coral-admin/src/components/UserInfoTooltip.css
@@ -60,6 +60,10 @@
   list-style: none;
 }
 
+.strongItem {
+  margin-right: 3px;
+}
+
 .descriptionItem {
   font-size: 0.9em;
 }
\ No newline at end of file
diff --git a/client/coral-admin/src/components/UserInfoTooltip.js b/client/coral-admin/src/components/UserInfoTooltip.js
index 10dda066c..cc5d601c4 100644
--- a/client/coral-admin/src/components/UserInfoTooltip.js
+++ b/client/coral-admin/src/components/UserInfoTooltip.js
@@ -4,6 +4,7 @@ import cn from 'classnames';
 import {Icon} from 'coral-ui';
 import styles from './UserInfoTooltip.css';
 import ClickOutside from 'coral-framework/components/ClickOutside';
+import moment from 'moment';
 
 const initialState = {menuVisible: false};
 
@@ -18,9 +19,14 @@ class UserInfoTooltip extends React.Component {
     this.setState({menuVisible: false});
   }
 
+  getLastHistoryItem = (user, status = 'banned') => {
+    const userHistory = user.state.status[status].history;
+    return userHistory[userHistory.length - 1];
+  }
+
   render() {
     const {menuVisible} = this.state;
-    const {banned, suspended} = this.props;
+    const {user, banned, suspended} = this.props;
 
     return (
       <ClickOutside onClickOutside={this.hideMenu}>
@@ -36,12 +42,12 @@ class UserInfoTooltip extends React.Component {
                   <div className={cn(styles.description, 'talk-admin-user-info-tooltip-description-banned')}>
                     <ul className={cn(styles.descriptionList, 'talk-admin-user-info-tooltip-description-list')}>
                       <li className={cn(styles.descriptionItem, 'talk-admin-user-info-tooltip-description-item')}>
-                        <strong>Banned On</strong>
-                        <span></span>
+                        <strong className={styles.strongItem}>Banned On</strong>
+                        <span>{moment(new Date(this.getLastHistoryItem(user, 'banned').created_at)).format('MMMM Do YYYY, h:mm:ss a')}</span>
                       </li>
                       <li className={cn(styles.descriptionItem, 'talk-admin-user-info-tooltip-description-item')}>
-                        <strong>By</strong>
-                        <span></span>
+                        <strong className={styles.strongItem}>By</strong>
+                        <span>{this.getLastHistoryItem(user, 'banned').assigned_by.username}</span>
                       </li>
                     </ul>
                   </div>
@@ -53,20 +59,20 @@ class UserInfoTooltip extends React.Component {
                   <div className={cn(styles.description, 'talk-admin-user-info-tooltip-description-suspended')}>
                     <ul className={cn(styles.descriptionList, 'talk-admin-user-info-tooltip-description-list')}>
                       <li className={cn(styles.descriptionItem, 'talk-admin-user-info-tooltip-description-item')}>
-                        <strong>Suspension</strong>
+                        <strong className={styles.strongItem}>Suspension</strong>
                         <span></span>
                       </li>
                       <li className={cn(styles.descriptionItem, 'talk-admin-user-info-tooltip-description-item')}>
-                        <strong>By</strong>
-                        <span></span>
+                        <strong className={styles.strongItem}>By</strong>
+                        <span>{this.getLastHistoryItem(user, 'suspended').assigned_by.username}</span>
                       </li>
                       <li className={cn(styles.descriptionItem, 'talk-admin-user-info-tooltip-description-item')}>
-                        <strong>Start</strong>
-                        <span></span>
+                        <strong className={styles.strongItem}>Start</strong>
+                        <span>{moment(new Date(this.getLastHistoryItem(user, 'suspended').created_at)).format('MMMM Do YYYY, h:mm:ss a')}</span>
                       </li>
                       <li className={cn(styles.descriptionItem, 'talk-admin-user-info-tooltip-description-item')}>
-                        <strong>End</strong>
-                        <span></span>
+                        <strong className={styles.strongItem}>End</strong>
+                        <span>{moment(new Date(this.getLastHistoryItem(user, 'suspended').until)).format('MMMM Do YYYY, h:mm:ss a')}</span>
                       </li>
                     </ul>
                   </div>