viewUserDetail everywhere

client/coral-admin/src/routes/Community/components/Community.css

@@ -52,57 +52,6 @@
   }
 }
 
-.email {
-  display: block;
-}
-
-.dataTable {
-  width: 100%;
-  border-left: none;
-  border-right: none;
-
-  th {
-    font-size: 1.1em;
-  }
-
-  th:nth-child(2), th:nth-child(3) {
-    width: 100px;
-  }
-}
-
-.selectField {
-  position: relative;
-  width: 150px;
-  height: 36px;
-  background: #2c2c2c;
-  padding: 10px 15px;
-  box-sizing: border-box;
-  color: white;
-  border-radius: 2px;
-  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
-
-  > div {
-    padding: 0;
-  }
-
-  i {
-    position: absolute;
-    top: 7px;
-    right: 7px;
-  }
-
-  input {
-    padding: 0;
-    font-size: 13px;
-    letter-spacing: 0.7px;
-    font-weight: 400;
-  }
-
-  &:hover {
-    cursor: pointer;
-   }
-}
-
 .list {
   padding: 8px 0;
   list-style: none;
@@ -340,3 +289,11 @@ p.flaggedByReason {
   margin: 0px;
   line-height: 1.4;
 }
+
+.button {
+  composes: buttonReset from 'coral-framework/styles/reset.css';
+  vertical-align: text-bottom;
+  &:hover {
+    background-color: #E0E0E0;
+  }
+}

client/coral-admin/src/routes/Community/components/Community.js

@@ -54,7 +54,7 @@ export default class Community extends Component {
   }
 
   getTabContent(searchValue, props) {
-    const {community, root: {users}} = props;
+    const {community, root: {users}, viewUserDetail} = props;
     const activeTab = props.route.path === ':id' ? 'flagged' : props.route.path;
 
     if (activeTab === 'people') {
@@ -84,6 +84,7 @@ export default class Community extends Component {
           approveUser={props.approveUser}
           rejectUsername={props.rejectUsername}
           currentUser={this.props.currentUser}
+          viewUserDetail={viewUserDetail}
         />
         <RejectUsernameDialog
           open={community.rejectUsernameDialog}

client/coral-admin/src/routes/Community/components/FlaggedAccounts.js

@@ -5,7 +5,7 @@ import styles from './Community.css';
 import EmptyCard from 'coral-admin/src/components/EmptyCard';
 import User from './User';
 
-const FlaggedAccounts = ({...props}) => {
+const FlaggedAccounts = (props) => {
   const {commenters} = props;
   const hasResults = commenters && !!commenters.length;
 
@@ -25,6 +25,7 @@ const FlaggedAccounts = ({...props}) => {
               showRejectUsernameDialog={props.showRejectUsernameDialog}
               approveUser={props.approveUser}
               currentUser={props.currentUser}
+              viewUserDetail={props.viewUserDetail}
               />;
           })
           : <EmptyCard>{t('community.no_flagged_accounts')}</EmptyCard>

client/coral-admin/src/routes/Community/components/Table.css

@@ -0,0 +1,58 @@
+.dataTable {
+  width: 100%;
+  border-left: none;
+  border-right: none;
+
+  th {
+    font-size: 1.1em;
+  }
+
+  th:nth-child(2), th:nth-child(3) {
+    width: 100px;
+  }
+}
+
+.button {
+  composes: buttonReset from 'coral-framework/styles/reset.css';
+  &:hover {
+    background-color: #D0D0D0;
+  }
+}
+
+.email {
+  display: block;
+}
+
+.selectField {
+  position: relative;
+  width: 150px;
+  height: 36px;
+  background: #2c2c2c;
+  padding: 10px 15px;
+  box-sizing: border-box;
+  color: white;
+  border-radius: 2px;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
+
+  > div {
+    padding: 0;
+  }
+
+  i {
+    position: absolute;
+    top: 7px;
+    right: 7px;
+  }
+
+  input {
+    padding: 0;
+    font-size: 13px;
+    letter-spacing: 0.7px;
+    font-weight: 400;
+  }
+
+  &:hover {
+    cursor: pointer;
+   }
+}
+

client/coral-admin/src/routes/Community/components/Table.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import {SelectField, Option} from 'react-mdl-selectfield';
-import styles from '../components/Community.css';
+import styles from '../components/Table.css';
 import t from 'coral-framework/services/i18n';
 
-export default ({headers, commenters, onHeaderClickHandler, onRoleChange, onCommenterStatusChange}) => (
+export default ({headers, commenters, onHeaderClickHandler, onRoleChange, onCommenterStatusChange, viewUserDetail}) => (
   <table className={`mdl-data-table ${styles.dataTable}`}>
     <thead>
       <tr>
@@ -21,7 +21,7 @@ export default ({headers, commenters, onHeaderClickHandler, onRoleChange, onComm
       {commenters.map((row, i)=> (
         <tr key={i}>
           <td className="mdl-data-table__cell--non-numeric">
-            {row.username}
+            <button onClick={() => {viewUserDetail(row.id);}} className={styles.button}>{row.username}</button>
             <span className={styles.email}>{row.profiles.map(({id}) => id)}</span>
           </td>
           <td className="mdl-data-table__cell--non-numeric">

client/coral-admin/src/routes/Community/components/User.js

@@ -38,9 +38,7 @@ const User = (props) => {
       <div className={styles.container}>
         <div className={styles.itemHeader}>
           <div className={styles.author}>
-            <span>
-              {user.username}
-            </span>
+            <button onClick={() => {props.viewUserDetail(user.id);}} className={styles.button}>{user.username}</button>
             {props.currentUser.id !== user.id &&
               <ActionsMenu icon="not_interested">
                 <ActionsMenuItem
@@ -82,7 +80,12 @@ const User = (props) => {
                       (action, j) => {
                         if (action.reason === action_sum.reason) {
                           return <p className={styles.flaggedByReason} key={j}>
-                            {action.user && action.user.username}: {action.message ? action.message : 'n/a'}
+                            {action.user &&
+                              <button onClick={() => {props.viewUserDetail(action.user.id);}} className={styles.button}>
+                                {action.user.username}
+                              </button>
+                            }
+                            : {action.message ? action.message : 'n/a'}
                           </p>;
                         }
                         return null;

client/coral-admin/src/routes/Community/containers/Community.js

@@ -17,6 +17,7 @@ import {
   showRejectUsernameDialog,
   hideRejectUsernameDialog
 } from '../../../actions/community';
+import {viewUserDetail} from '../../../actions/userDetail';
 
 import Community from '../components/Community';
 
@@ -99,6 +100,7 @@ const mapDispatchToProps = (dispatch) =>
     hideRejectUsernameDialog,
     updateSorting,
     newPage,
+    viewUserDetail,
   }, dispatch);
 
 export default compose(

client/coral-admin/src/routes/Community/containers/Table.js

@@ -4,6 +4,7 @@ import {bindActionCreators} from 'redux';
 import {compose} from 'react-apollo';
 import {setRole, setCommenterStatus} from '../../../actions/community';
 import Table from '../components/Table';
+import {viewUserDetail} from '../../../actions/userDetail';
 
 class TableContainer extends Component {
 
@@ -29,6 +30,7 @@ const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
     setCommenterStatus,
     setRole,
+    viewUserDetail,
   }, dispatch);
 
 export default compose(