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 {
}
- {banned || suspended && }
+ {(banned || suspended) && }
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 (
@@ -36,12 +42,12 @@ class UserInfoTooltip extends React.Component {
-
- Banned On
-
+ Banned On
+ {moment(new Date(this.getLastHistoryItem(user, 'banned').created_at)).format('MMMM Do YYYY, h:mm:ss a')}
-
- By
-
+ By
+ {this.getLastHistoryItem(user, 'banned').assigned_by.username}
@@ -53,20 +59,20 @@ class UserInfoTooltip extends React.Component {
-
- Suspension
+ Suspension
-
- By
-
+ By
+ {this.getLastHistoryItem(user, 'suspended').assigned_by.username}
-
- Start
-
+ Start
+ {moment(new Date(this.getLastHistoryItem(user, 'suspended').created_at)).format('MMMM Do YYYY, h:mm:ss a')}
-
- End
-
+ End
+ {moment(new Date(this.getLastHistoryItem(user, 'suspended').until)).format('MMMM Do YYYY, h:mm:ss a')}