Moving bulk actions to User tab

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

@@ -94,49 +94,6 @@
   width: calc(100% - 90px);
 }
 
-.bulkActionGroup {
-  height: 52px;
-  background-color: #efefef;
-  padding: 0 0 0 10px;
-  display: flex;
-
-  i {
-    margin-right: 0;
-  }
-
-  .bulkAction {
-    display: inline-block;
-    width: 48px;
-    height: 48px;
-    transform: scale(.7);
-    min-width: 0;
-  }
-  .bulkAction:last-child {
-    margin-left: -10px;
-  }
-}
-
-.selectedCommentsInfo {
-  align-self: center;
-  font-weight: 500;
-  margin-left: 15px;
-}
-
-.toggleAll {
-  padding: 0 10px 0 0;
-  align-self: center;
-}
-
-.bulkActionHeader {
-  display: flex;
-  justify-content: space-between;
-  height: 52px;
-
-  &.selected {
-    background-color: #efefef;
-  }
-}
-
 .tabBar {
   padding: 0 0 0 10px;
   margin: 0;

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

@@ -4,8 +4,6 @@ import PropTypes from 'prop-types';
 import capitalize from 'lodash/capitalize';
 import {getErrorMessages} from 'coral-framework/utils';
 import styles from './UserDetail.css';
-import RejectButton from './RejectButton';
-import ApproveButton from './ApproveButton';
 import AccountHistory from './AccountHistory';
 import {Slot} from 'coral-framework/components';
 import UserDetailCommentList from '../components/UserDetailCommentList';
@@ -108,9 +106,6 @@ class UserDetail extends React.Component {
         user,
         totalComments,
         rejectedComments,
-        comments: {
-          nodes,
-        }
       },
       activeTab,
       selectedCommentIds,
@@ -218,64 +213,29 @@ class UserDetail extends React.Component {
 
           <hr />
 
-          <div className={(selectedCommentIds.length > 0) ? cn(styles.bulkActionHeader, styles.selected) : styles.bulkActionHeader}>
-
-            {
-              selectedCommentIds.length === 0
-                ? (
-                  <TabBar
-                    onTabClick={this.changeTab}
-                    activeTab={activeTab}
-                    className={cn(styles.tabBar, 'talk-admin-user-detail-tab-bar')}
-                    aria-controls='talk-admin-user-detail-content'
-                    tabClassNames={{
-                      button: styles.tabButton,
-                      buttonActive: styles.tabButtonActive,
-                    }} >
-                    <Tab
-                      tabId={'all'}
-                      className={cn(styles.tab, styles.button, 'talk-admin-user-detail-all-tab')} >
-                      All
-                    </Tab>
-                    <Tab
-                      tabId={'rejected'}
-                      className={cn(styles.tab, 'talk-admin-user-detail-rejected-tab')} >
-                      Rejected
-                    </Tab>
-                    <Tab tabId={'history'} className={cn(styles.tab, styles.button, 'talk-admin-user-detail-history-tab')}>
-                      Account History
-                    </Tab>
-                  </TabBar>
-                )
-                : (
-                  <div className={styles.bulkActionGroup}>
-                    <ApproveButton
-                      onClick={this.bulkAcceptThenReload}
-                      minimal
-                    />
-                    <RejectButton
-                      onClick={this.bulkRejectThenReload}
-                      minimal
-                    />
-                    <span className={styles.selectedCommentsInfo}>  {selectedCommentIds.length} comments selected</span>
-                  </div>
-                )
-            }
-
-            {(activeTab === 'all' || activeTab === 'rejected') && (
-              <div className={styles.toggleAll}>
-                <input
-                  type='checkbox'
-                  id='toogleAll'
-                  checked={selectedCommentIds.length > 0 && selectedCommentIds.length === nodes.length}
-                  onChange={(e) => {
-                    toggleSelectAll(nodes.map((comment) => comment.id), e.target.checked);
-                  }} />
-                <label htmlFor='toogleAll'>Select all</label>
-              </div>
-            )}
-
-          </div>
+          <TabBar
+            onTabClick={this.changeTab}
+            activeTab={activeTab}
+            className={cn(styles.tabBar, 'talk-admin-user-detail-tab-bar')}
+            aria-controls='talk-admin-user-detail-content'
+            tabClassNames={{
+              button: styles.tabButton,
+              buttonActive: styles.tabButtonActive,
+            }} >
+            <Tab
+              tabId={'all'}
+              className={cn(styles.tab, styles.button, 'talk-admin-user-detail-all-tab')} >
+              All
+            </Tab>
+            <Tab
+              tabId={'rejected'}
+              className={cn(styles.tab, 'talk-admin-user-detail-rejected-tab')} >
+              Rejected
+            </Tab>
+            <Tab tabId={'history'} className={cn(styles.tab, styles.button, 'talk-admin-user-detail-history-tab')}>
+              Account History
+            </Tab>
+          </TabBar>
 
           <TabContent activeTab={activeTab} className='talk-admin-user-detail-content'>
             <TabPane tabId={'all'} className={'talk-admin-user-detail-all-tab-pane'}>
@@ -289,6 +249,9 @@ class UserDetail extends React.Component {
                 acceptComment={this.acceptThenReload}
                 rejectComment={this.rejectThenReload}
                 selectedCommentIds={selectedCommentIds}
+                toggleSelectAll={toggleSelectAll}
+                bulkAcceptThenReload={this.bulkAcceptThenReload}
+                bulkRejectThenReload={this.bulkRejectThenReload}
               />
             </TabPane>
             <TabPane tabId={'rejected'} className={'talk-admin-user-detail-rejected-tab-pane'}>
@@ -302,6 +265,9 @@ class UserDetail extends React.Component {
                 acceptComment={this.acceptThenReload}
                 rejectComment={this.rejectThenReload}
                 selectedCommentIds={selectedCommentIds}
+                toggleSelectAll={toggleSelectAll}
+                bulkAcceptThenReload={this.bulkAcceptThenReload}
+                bulkRejectThenReload={this.bulkRejectThenReload}
               />
             </TabPane>
             <TabPane tabId={'history'} className={'talk-admin-user-detail-history-tab-pane'}>

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

@@ -117,6 +117,8 @@ class UserDetailComment extends React.Component {
 }
 
 UserDetailComment.propTypes = {
+  selected: PropTypes.bool,
+  data: PropTypes.object,
   user: PropTypes.object.isRequired,
   viewUserDetail: PropTypes.func.isRequired,
   acceptComment: PropTypes.func.isRequired,

client/coral-admin/src/components/UserDetailCommentList.css

@@ -9,3 +9,48 @@
     color: white;
   }
 }
+
+.bulkActionHeader {
+  display: flex;
+  justify-content: space-between;
+  height: 52px;
+  justify-content: flex-end;
+
+  &.selected {
+    background-color: #efefef;
+  }
+}
+
+.bulkActionGroup {
+  height: 52px;
+  background-color: #efefef;
+  padding: 0 0 0 10px;
+  display: flex;
+  flex: 1;
+
+  i {
+    margin-right: 0;
+  }
+
+  .bulkAction {
+    display: inline-block;
+    width: 48px;
+    height: 48px;
+    transform: scale(.7);
+    min-width: 0;
+  }
+  .bulkAction:last-child {
+    margin-left: -10px;
+  }
+}
+
+.selectedCommentsInfo {
+  align-self: center;
+  font-weight: 500;
+  margin-left: 15px;
+}
+
+.toggleAll {
+  padding-right: 14px;
+  align-self: center;
+}

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

@@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
 import styles from './UserDetailCommentList.css';
 import LoadMore from '../components/LoadMore';
 import Comment from '../containers/UserDetailComment';
+import RejectButton from './RejectButton';
+import ApproveButton from './ApproveButton';
 
 const UserDetailCommentList = (props) => {
   const {
@@ -21,10 +23,40 @@ const UserDetailCommentList = (props) => {
     toggleSelect,
     viewUserDetail,
     loadMore,
+    toggleSelectAll,
+    bulkAcceptThenReload,
+    bulkRejectThenReload,
   } = props;
 
   return (
     <div className={cn(styles.commentList, 'talk-admin-user-detail-comment-list')}>
+      
+      <div className={(selectedCommentIds.length > 0) ? cn(styles.bulkActionHeader, styles.selected) : styles.bulkActionHeader}>
+        {selectedCommentIds.length > 0 && (
+          <div className={styles.bulkActionGroup}>
+            <ApproveButton
+              onClick={bulkAcceptThenReload}
+              minimal
+            />
+            <RejectButton
+              onClick={bulkRejectThenReload}
+              minimal
+            />
+            <span className={styles.selectedCommentsInfo}>  {selectedCommentIds.length} comments selected</span>
+          </div>
+        )}
+
+        <div className={styles.toggleAll}>
+          <input
+            type='checkbox'
+            id='toogleAll'
+            checked={selectedCommentIds.length > 0 && selectedCommentIds.length === nodes.length}
+            onChange={(e) => {
+              toggleSelectAll(nodes.map((comment) => comment.id), e.target.checked);
+            }} />
+          <label htmlFor='toogleAll'>Select all</label>
+        </div>
+      </div>
       {
         nodes.map((comment) => {
           const selected = selectedCommentIds.indexOf(comment.id) !== -1;
@@ -60,6 +92,9 @@ UserDetailCommentList.propTypes = {
   viewUserDetail: PropTypes.any.isRequired,
   loadMore: PropTypes.any.isRequired,
   toggleSelect: PropTypes.func.isRequired,
+  toggleSelectAll: PropTypes.func.isRequired,
+  bulkAcceptThenReload: PropTypes.func.isRequired,
+  bulkRejectThenReload: PropTypes.func.isRequired,
 };
 
 export default UserDetailCommentList;