diff --git a/client/coral-admin/src/components/AccountHistory.css b/client/coral-admin/src/components/AccountHistory.css
new file mode 100644
index 000000000..09b324f08
--- /dev/null
+++ b/client/coral-admin/src/components/AccountHistory.css
@@ -0,0 +1,30 @@
+.table {
+ flex-direction: column;
+}
+
+.table, .headerRow, .row {
+ display: flex;
+}
+
+.headerRowItem, .item {
+ flex: 1;
+ padding: 20px;
+
+ &:nth-child(2) {
+ flex: 2;
+ }
+}
+
+.headerRowItem {
+ color: #595959;
+ font-weight: bold;
+}
+
+.headerRow, .row {
+ border-bottom: 1px solid #e0e0e0;
+}
+
+.action {
+ color: black;
+ font-weight: bold;
+}
diff --git a/client/coral-admin/src/components/AccountHistory.js b/client/coral-admin/src/components/AccountHistory.js
new file mode 100644
index 000000000..c74effeed
--- /dev/null
+++ b/client/coral-admin/src/components/AccountHistory.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './AccountHistory.css';
+import cn from 'classnames';
+
+class AccountHistory extends React.Component {
+ render() {
+ return (
+
+
+
+
Date
+
Action
+
Moderation
+
+
+
Date
+
Action
+
Moderation
+
+
+
+ );
+ }
+}
+
+AccountHistory.propTypes = {
+ history: PropTypes.array,
+};
+
+export default AccountHistory;
diff --git a/client/coral-admin/src/components/UserDetail.js b/client/coral-admin/src/components/UserDetail.js
index 140774eae..8160d9566 100644
--- a/client/coral-admin/src/components/UserDetail.js
+++ b/client/coral-admin/src/components/UserDetail.js
@@ -13,6 +13,7 @@ import {getReliability} from 'coral-framework/utils/user';
import ApproveButton from './ApproveButton';
import RejectButton from './RejectButton';
import {getErrorMessages} from 'coral-framework/utils';
+import AccountHistory from './AccountHistory';
export default class UserDetail extends React.Component {
@@ -82,12 +83,8 @@ export default class UserDetail extends React.Component {
}
}
- showAll = () => {
- this.props.changeStatus('all');
- }
-
- showRejected = () => {
- this.props.changeStatus('rejected');
+ show = (content) => {
+ this.props.changeStatus(content);
}
renderLoading() {
@@ -179,8 +176,9 @@ export default class UserDetail extends React.Component {
selectedCommentIds.length === 0
? (
- - All
- - Rejected
+ - this.show('all')}>All
+ - this.show('rejected')}>Rejected
+ - this.show('history')}>Account History
)
: (
@@ -208,25 +206,32 @@ export default class UserDetail extends React.Component {
-
- {
- nodes.map((comment) => {
- const selected = selectedCommentIds.indexOf(comment.id) !== -1;
- return ;
- })
- }
-
+
+ {
+ activeTab !== 'history' ?
+
+ {
+ nodes.map((comment) => {
+ const selected = selectedCommentIds.indexOf(comment.id) !== -1;
+ return ;
+ })
+ }
+
+ :
+
+ }
+