Adding UserDetailCommentList

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

@@ -122,23 +122,11 @@
   margin-left: 15px;
 }
 
-.loadMore > button {
-  background-color: #696969;
-  &:hover {
-    background-color: #404040;
-    color: white;
-  }
-}
-
 .toggleAll {
   padding: 0 10px 0 0;
   align-self: center;
 }
 
-.commentList {
-  clear: both;
-}
-
 .bulkActionHeader {
   display: flex;
   justify-content: space-between;

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

@@ -6,10 +6,9 @@ import {getErrorMessages} from 'coral-framework/utils';
 import styles from './UserDetail.css';
 import RejectButton from './RejectButton';
 import ApproveButton from './ApproveButton';
-import LoadMore from '../components/LoadMore';
 import AccountHistory from './AccountHistory';
 import {Slot} from 'coral-framework/components';
-import Comment from '../containers/UserDetailComment';
+import UserDetailCommentList from '../components/UserDetailCommentList';
 import {getReliability} from 'coral-framework/utils/user';
 import ButtonCopyToClipboard from './ButtonCopyToClipboard';
 import ClickOutside from 'coral-framework/components/ClickOutside';
@@ -86,7 +85,7 @@ class UserDetail extends React.Component {
         rejectedComments,
         comments: {
           nodes,
-          hasNextPage}
+        }
       },
       activeTab,
       selectedCommentIds,
@@ -214,46 +213,30 @@ class UserDetail extends React.Component {
 
           <TabContent activeTab={activeTab} className='talk-admin-user-detail-content'>
             <TabPane tabId={'all'} className={'talk-admin-user-detail-all-tab-pane'}>
-              <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>
+              <UserDetailCommentList
+                user={user}
+                root={root}
+                data={data}
+                loadMore={loadMore}
+                toggleSelect={toggleSelect}
+                viewUserDetail={viewUserDetail}
+                acceptComment={this.acceptThenReload}
+                rejectComment={this.rejectThenReload}
+                selectedCommentIds={selectedCommentIds}
+              />
             </TabPane>
             <TabPane tabId={'rejected'} className={'talk-admin-user-detail-rejected-tab-pane'}>
-              <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>
+              <UserDetailCommentList
+                user={user}
+                root={root}
+                data={data}
+                loadMore={loadMore}
+                toggleSelect={toggleSelect}
+                viewUserDetail={viewUserDetail}
+                acceptComment={this.acceptThenReload}
+                rejectComment={this.rejectThenReload}
+                selectedCommentIds={selectedCommentIds}
+              />
             </TabPane>
             <TabPane tabId={'history'} className={'talk-admin-user-detail-history-tab-pane'}>
               <AccountHistory
@@ -261,13 +244,6 @@ class UserDetail extends React.Component {
               />
             </TabPane>
           </TabContent>
-
-          <LoadMore
-            className={styles.loadMore}
-            loadMore={loadMore}
-            showLoadMore={hasNextPage}
-          />
-          
         </Drawer>
       </ClickOutside>
     );

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

@@ -0,0 +1,11 @@
+.commentList {
+  clear: both;
+}
+
+.loadMore > button {
+  background-color: #696969;
+  &:hover {
+    background-color: #404040;
+    color: white;
+  }
+}

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import cn from 'classnames';
+import PropTypes from 'prop-types';
+import styles from './UserDetailCommentList.css';
+import LoadMore from '../components/LoadMore';
+import Comment from '../containers/UserDetailComment';
+
+const UserDetailCommentList = (props) => {
+  const {
+    data,
+    root,
+    root: {
+      user,
+      comments: {
+        nodes,
+        hasNextPage}
+    },
+    acceptComment,
+    rejectComment,
+    selectedCommentIds,
+    toggleSelect,
+    viewUserDetail,
+    loadMore,
+  } = props;
+
+  return (
+    <div className={cn(styles.commentList, 'talk-admin-user-detail-comment-list')}>
+      {
+        nodes.map((comment) => {
+          const selected = selectedCommentIds.indexOf(comment.id) !== -1;
+          return <Comment
+            key={comment.id}
+            user={user}
+            root={root}
+            data={data}
+            comment={comment}
+            acceptComment={acceptComment}
+            rejectComment={rejectComment}
+            selected={selected}
+            toggleSelect={toggleSelect}
+            viewUserDetail={viewUserDetail}
+          />;
+        })
+      }
+      <LoadMore
+        className={styles.loadMore}
+        loadMore={loadMore}
+        showLoadMore={hasNextPage}
+      />
+    </div>
+  );
+};
+
+UserDetailCommentList.propTypes = {
+  root: PropTypes.object.isRequired,
+  acceptComment: PropTypes.func.isRequired,
+  rejectComment: PropTypes.func.isRequired,
+  data: PropTypes.object.isRequired,
+  selectedCommentIds: PropTypes.array.isRequired,
+  viewUserDetail: PropTypes.any.isRequired,
+  loadMore: PropTypes.any.isRequired,
+  toggleSelect: PropTypes.func.isRequired,
+};
+
+export default UserDetailCommentList;