Merge branch 'mod-improv' of github.com:coralproject/talk into user-status-refactor

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;
+}

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;

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}

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.array,
+};
+
 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}) {