Working account history

client/coral-admin/src/components/AccountHistory.js

@@ -2,9 +2,27 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './AccountHistory.css';
 import cn from 'classnames';
+import flatten from 'lodash/flatten';
+import orderBy from 'lodash/orderBy';
+import moment from 'moment';
+
+const buildUserHistory = (userState = {}) => {
+  return orderBy(flatten(Object.keys(userState.status)
+    .filter((k) => k !== '__typename')
+    .map((k) => userState.status[k].history)), 'created_at', 'asc');
+};
+
+const actionResponses = {
+  'UsernameStatusHistory' : 'Username Status',
+  'BannedStatusHistory': 'Banned Status',
+  'SuspensionStatusHistory': 'Suspension Status'
+};
 
 class AccountHistory extends React.Component {
   render() {
+    const {userState} = this.props;
+    const userHistory = buildUserHistory(userState);
+    console.log(userHistory);
     return (
       <div>
         <div className={styles.table}>
@@ -13,11 +31,15 @@ class AccountHistory extends React.Component {
             <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>
+          {
+            userHistory.map((h, i) => (
+              <div className={styles.row} key={i}>
+                <div className={styles.item}>{moment(new Date(h.created_at)).format('MMM DD, YYYY')}</div>
+                <div className={cn(styles.item, styles.action)}>{actionResponses[h.__typename]}: {h.status}</div>
+                <div className={styles.item}>{h.assigned_by ? h.assigned_by.username : 'SYSTEM'}</div>
+              </div>
+            ))
+          }
         </div>
       </div>
     );
@@ -26,6 +48,7 @@ class AccountHistory extends React.Component {
 
 AccountHistory.propTypes = {
   history: PropTypes.array,
+  userState: PropTypes.object,
 };
 
 export default AccountHistory;

client/coral-admin/src/components/UserDetail.js

@@ -229,7 +229,9 @@ export default class UserDetail extends React.Component {
                 }
               </div>
               :
-              <AccountHistory />
+              <AccountHistory
+                userState={user.state}
+              />
           }
 
           <LoadMore

client/coral-admin/src/containers/UserDetail.js

@@ -159,6 +159,37 @@ export const withUserDetailQuery = withQuery(gql`
       reliable {
         flagger
       }
+      state {
+        status {
+          suspension {
+            history {
+              until
+              created_at
+              assigned_by {
+                username
+              }
+            }
+          }
+          banned {
+            history {
+              status
+              assigned_by {
+                username
+              }
+              created_at
+            }
+          }
+          username {
+            history {
+              status
+              assigned_by {
+                username
+              }
+              created_at
+            }
+          }
+        }
+      }
       ${getSlotFragmentSpreads(slots, 'user')}
     }
     totalComments: commentCount(query: {author_id: $author_id, statuses: []})