From 32547a214bb6f5f9b77758729241930f17218423 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 14 Nov 2017 11:56:23 -0300
Subject: [PATCH 1/3] Missing proptypes

---
 .../coral-admin/src/containers/SuspendUserDialog.js  |  2 +-
 client/coral-admin/src/containers/UserDetail.js      | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/client/coral-admin/src/containers/SuspendUserDialog.js b/client/coral-admin/src/containers/SuspendUserDialog.js
index 3d5283df9..5c554e70c 100644
--- a/client/coral-admin/src/containers/SuspendUserDialog.js
+++ b/client/coral-admin/src/containers/SuspendUserDialog.js
@@ -48,7 +48,7 @@ class SuspendUserDialogContainer extends Component {
 SuspendUserDialogContainer.propTypes = {
   open: PropTypes.bool,
   hideSuspendUserDialog: PropTypes.func,
-  username: PropTypes.object,
+  username: PropTypes.string,
 };
 
 const withOrganizationName = withQuery(gql`
diff --git a/client/coral-admin/src/containers/UserDetail.js b/client/coral-admin/src/containers/UserDetail.js
index 3a458ff83..bbdaa042a 100644
--- a/client/coral-admin/src/containers/UserDetail.js
+++ b/client/coral-admin/src/containers/UserDetail.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import {compose, gql} from 'react-apollo';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
@@ -125,6 +126,17 @@ class UserDetailContainer extends React.Component {
   }
 }
 
+UserDetailContainer.propTypes = {
+  changeUserDetailStatuses: PropTypes.func,
+  toggleSelectCommentInUserDetail: PropTypes.func,
+  toggleSelectAllCommentInUserDetail: PropTypes.func,
+  data: PropTypes.object,
+  root: PropTypes.object,
+  setCommentStatus: PropTypes.func,
+  clearUserDetailSelections: PropTypes.func,
+  selectedCommentIds: PropTypes.func,
+};
+
 const LOAD_MORE_QUERY = gql`
   query CoralAdmin_Moderation_LoadMore($limit: Int = 10, $cursor: Cursor, $author_id: ID!, $statuses: [COMMENT_STATUS!]) {
     comments(query: {limit: $limit, cursor: $cursor, author_id: $author_id, statuses: $statuses}) {

From aabd152314210fe0147934661d56f97d04bff74f Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 14 Nov 2017 13:01:13 -0300
Subject: [PATCH 2/3] Account History

---
 .../src/components/AccountHistory.css         | 22 +++++++++++++
 .../src/components/AccountHistory.js          | 31 +++++++++++++++++++
 2 files changed, 53 insertions(+)
 create mode 100644 client/coral-admin/src/components/AccountHistory.css
 create mode 100644 client/coral-admin/src/components/AccountHistory.js

diff --git a/client/coral-admin/src/components/AccountHistory.css b/client/coral-admin/src/components/AccountHistory.css
new file mode 100644
index 000000000..7e2ef0109
--- /dev/null
+++ b/client/coral-admin/src/components/AccountHistory.css
@@ -0,0 +1,22 @@
+.table, .headerRow, .row {
+  display: flex;
+}
+
+.headerRowItem, .item {
+  flex: 1;
+}
+
+.headerRowItem {
+  text-align: center;
+  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 (
+      <div>
+        <div className={styles.table}>
+          <div className={styles.headerRow}>
+            <div className={styles.headerRowItem}>Date</div>
+            <div className={styles.headerRowItem}>Action</div>
+            <div className={styles.headerRowItem}>Moderation</div>
+          </div>
+          <div className={styles.row}>
+            <div className={styles.item}>Date</div>
+            <div className={cn(styles.item, styles.action)}>Action</div>
+            <div className={styles.item}>Moderation</div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+AccountHistory.propTypes = {
+  history: PropTypes.array,
+};
+
+export default AccountHistory;

From ff6e41f2e1636c5eb957146a8c91df6979ca8f86 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 14 Nov 2017 13:13:02 -0300
Subject: [PATCH 3/3] styling

---
 .../src/components/AccountHistory.css         | 10 +++-
 .../coral-admin/src/components/UserDetail.js  | 59 ++++++++++---------
 .../coral-admin/src/containers/UserDetail.js  |  2 +-
 3 files changed, 42 insertions(+), 29 deletions(-)

diff --git a/client/coral-admin/src/components/AccountHistory.css b/client/coral-admin/src/components/AccountHistory.css
index 7e2ef0109..09b324f08 100644
--- a/client/coral-admin/src/components/AccountHistory.css
+++ b/client/coral-admin/src/components/AccountHistory.css
@@ -1,13 +1,21 @@
+.table {
+  flex-direction: column;
+}
+
 .table, .headerRow, .row {
   display: flex;
 }
 
 .headerRowItem, .item {
   flex: 1;
+  padding: 20px;
+
+  &:nth-child(2) {
+    flex: 2;
+  }
 }
 
 .headerRowItem {
-  text-align: center;
   color: #595959;
   font-weight: bold;
 }
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
                 ? (
                   <ul className={styles.commentStatuses}>
-                    <li className={activeTab === 'all' ? styles.active : ''} onClick={this.showAll}>All</li>
-                    <li className={activeTab === 'rejected' ? styles.active : ''} onClick={this.showRejected}>Rejected</li>
+                    <li className={activeTab === 'all' ? styles.active : ''} onClick={() => this.show('all')}>All</li>
+                    <li className={activeTab === 'rejected' ? styles.active : ''} onClick={() => this.show('rejected')}>Rejected</li>
+                    <li className={activeTab === 'history' ? styles.active : ''} onClick={() => this.show('history')}>Account History</li>
                   </ul>
                 )
                 : (
@@ -208,25 +206,32 @@ export default class UserDetail extends React.Component {
               <label htmlFor='toogleAll'>Select all</label>
             </div>
           </div>
-          <div className={styles.commentList}>
-            {
-              nodes.map((comment) => {
-                const selected = selectedCommentIds.indexOf(comment.id) !== -1;
-                return <Comment
-                  key={comment.id}
-                  user={user}
-                  root={root}
-                  data={data}
-                  comment={comment}
-                  acceptComment={this.acceptThenReload}
-                  rejectComment={this.rejectThenReload}
-                  selected={selected}
-                  toggleSelect={toggleSelect}
-                  viewUserDetail={viewUserDetail}
-                />;
-              })
-            }
-          </div>
+
+          { 
+            activeTab !== 'history' ?
+              <div className={styles.commentList}>
+                {
+                  nodes.map((comment) => {
+                    const selected = selectedCommentIds.indexOf(comment.id) !== -1;
+                    return <Comment
+                      key={comment.id}
+                      user={user}
+                      root={root}
+                      data={data}
+                      comment={comment}
+                      acceptComment={this.acceptThenReload}
+                      rejectComment={this.rejectThenReload}
+                      selected={selected}
+                      toggleSelect={toggleSelect}
+                      viewUserDetail={viewUserDetail}
+                    />;
+                  })
+                }
+              </div>
+              :
+              <AccountHistory />
+          }
+
           <LoadMore
             className={styles.loadMore}
             loadMore={loadMore}
diff --git a/client/coral-admin/src/containers/UserDetail.js b/client/coral-admin/src/containers/UserDetail.js
index bbdaa042a..3324e5866 100644
--- a/client/coral-admin/src/containers/UserDetail.js
+++ b/client/coral-admin/src/containers/UserDetail.js
@@ -134,7 +134,7 @@ UserDetailContainer.propTypes = {
   root: PropTypes.object,
   setCommentStatus: PropTypes.func,
   clearUserDetailSelections: PropTypes.func,
-  selectedCommentIds: PropTypes.func,
+  selectedCommentIds: PropTypes.array,
 };
 
 const LOAD_MORE_QUERY = gql`