diff --git a/client/coral-admin/src/components/UserDetail.css b/client/coral-admin/src/components/UserDetail.css
index 1bcf19352..58faee5c4 100644
--- a/client/coral-admin/src/components/UserDetail.css
+++ b/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;
diff --git a/client/coral-admin/src/components/UserDetail.js b/client/coral-admin/src/components/UserDetail.js
index c99f704f0..25f21c8f6 100644
--- a/client/coral-admin/src/components/UserDetail.js
+++ b/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 {
- 0) ? cn(styles.bulkActionHeader, styles.selected) : styles.bulkActionHeader}>
-
- {
- selectedCommentIds.length === 0
- ? (
-
-
- All
-
-
- Rejected
-
-
- Account History
-
-
- )
- : (
-
-
-
-
{selectedCommentIds.length} comments selected
-
- )
- }
-
- {(activeTab === 'all' || activeTab === 'rejected') && (
-
- 0 && selectedCommentIds.length === nodes.length}
- onChange={(e) => {
- toggleSelectAll(nodes.map((comment) => comment.id), e.target.checked);
- }} />
-
-
- )}
-
-
+
+
+ All
+
+
+ Rejected
+
+
+ Account History
+
+
@@ -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}
/>
@@ -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}
/>
diff --git a/client/coral-admin/src/components/UserDetailComment.js b/client/coral-admin/src/components/UserDetailComment.js
index e3e89d00a..1dc7685a7 100644
--- a/client/coral-admin/src/components/UserDetailComment.js
+++ b/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,
diff --git a/client/coral-admin/src/components/UserDetailCommentList.css b/client/coral-admin/src/components/UserDetailCommentList.css
index 91a70fe85..15f4f5088 100644
--- a/client/coral-admin/src/components/UserDetailCommentList.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/client/coral-admin/src/components/UserDetailCommentList.js b/client/coral-admin/src/components/UserDetailCommentList.js
index 9c3a60c0c..16a583d79 100644
--- a/client/coral-admin/src/components/UserDetailCommentList.js
+++ b/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 (
+
+
0) ? cn(styles.bulkActionHeader, styles.selected) : styles.bulkActionHeader}>
+ {selectedCommentIds.length > 0 && (
+
+
+
+
{selectedCommentIds.length} comments selected
+
+ )}
+
+
+ 0 && selectedCommentIds.length === nodes.length}
+ onChange={(e) => {
+ toggleSelectAll(nodes.map((comment) => comment.id), e.target.checked);
+ }} />
+
+
+
{
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;