UserDetail Refactor

2026-07-08 08:32:39 +08:00 · 2017-11-24 17:35:53 -03:00
parent 0fe9577abf
commit d58e54befa
1 changed files with 100 additions and 66 deletions
@@ -1,44 +1,21 @@
 import React from 'react';
+import cn from 'classnames';
 import PropTypes from 'prop-types';
-import Comment from '../containers/UserDetailComment';
+import capitalize from 'lodash/capitalize';
+import {getErrorMessages} from 'coral-framework/utils';
 import styles from './UserDetail.css';
-import {Icon, Drawer, Spinner} from 'coral-ui';
+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 {getReliability} from 'coral-framework/utils/user';
 import ButtonCopyToClipboard from './ButtonCopyToClipboard';
 import ClickOutside from 'coral-framework/components/ClickOutside';
-import LoadMore from '../components/LoadMore';
-import cn from 'classnames';
-import capitalize from 'lodash/capitalize';
-import {getReliability} from 'coral-framework/utils/user';
-import ApproveButton from './ApproveButton';
-import RejectButton from './RejectButton';
-import {getErrorMessages} from 'coral-framework/utils';
-import AccountHistory from './AccountHistory';
-import {TabBar, Tab, TabContent, TabPane} from 'coral-ui';
+import {Icon, Drawer, Spinner, TabBar, Tab, TabContent, TabPane} from 'coral-ui';

-export default class UserDetail extends React.Component {
-
-  static propTypes = {
-    userId: PropTypes.string.isRequired,
-    hideUserDetail: PropTypes.func.isRequired,
-    root: PropTypes.object.isRequired,
-    acceptComment: PropTypes.func.isRequired,
-    rejectComment: PropTypes.func.isRequired,
-    changeStatus: PropTypes.func.isRequired,
-    toggleSelect: PropTypes.func.isRequired,
-    bulkAccept: PropTypes.func.isRequired,
-    bulkReject: PropTypes.func.isRequired,
-    toggleSelectAll: PropTypes.func.isRequired,
-    loading: PropTypes.bool.isRequired,
-    data: PropTypes.shape({
-      refetch: PropTypes.func.isRequired,
-    }),
-    activeTab: PropTypes.string.isRequired,
-    selectedCommentIds: PropTypes.array.isRequired,
-    viewUserDetail: PropTypes.any.isRequired,
-    loadMore: PropTypes.any.isRequired,
-    notify: PropTypes.func.isRequired
-  }
+class UserDetail extends React.Component {

  rejectThenReload = async (info) => {
    try {
@@ -84,21 +61,22 @@ export default class UserDetail extends React.Component {
    }
  }

-  show = (content) => {
-    this.props.changeStatus(content);
+  changeTab = (tab) => {
+    this.props.changeStatus(tab);
  }

-  renderLoading() {
-    return (
-      <ClickOutside onClickOutside={this.props.hideUserDetail}>
-        <Drawer onClose={this.props.hideUserDetail}>
-          <Spinner />
-        </Drawer>
-      </ClickOutside>
-    );
-  }
+  render() {
+
+    if (this.props.loading) {
+      return (
+        <ClickOutside onClickOutside={this.props.hideUserDetail}>
+          <Drawer onClose={this.props.hideUserDetail}>
+            <Spinner />
+          </Drawer>
+        </ClickOutside>
+      );
+    }

-  renderLoaded() {
    const {
      data,
      root,
@@ -106,7 +84,10 @@ export default class UserDetail extends React.Component {
        user,
        totalComments,
        rejectedComments,
-        comments: {nodes, hasNextPage}
+        comments: {
+          nodes,
+          hasNextPage
+        }
      },
      activeTab,
      selectedCommentIds,
@@ -118,9 +99,8 @@ export default class UserDetail extends React.Component {
    } = this.props;

    let rejectedPercent = (rejectedComments / totalComments) * 100;
-    if (rejectedPercent === Infinity || isNaN(rejectedPercent)) {

-      // if totalComments is 0, you're dividing by zero, which is naughty
+    if (rejectedPercent === Infinity || isNaN(rejectedPercent)) {
      rejectedPercent = 0;
    }

@@ -171,16 +151,29 @@ export default class UserDetail extends React.Component {
            data={this.props.data}
            queryData={{root, user}}
          />
+
          <hr />
+          
          <div className={(selectedCommentIds.length > 0) ? cn(styles.bulkActionHeader, styles.selected) : styles.bulkActionHeader}>
+
            {
              selectedCommentIds.length === 0
                ? (
-                  <ul className={styles.commentStatuses}>
-                    <li className={activeTab === 'all' ? styles.active : ''} onClick={() => this.show('all')}>All</li>
-                    <li className={activeTab === 'rejected' ? styles.active : ''} onClick={() => this.show('rejected')}>Rejected</li>
-                    <li className={activeTab === 'history' ? styles.active : ''} onClick={() => this.show('history')}>Account History</li>
-                  </ul>
+                  <TabBar
+                    onTabClick={this.changeTab}
+                    activeTab={activeTab}
+                    className={cn(styles.commentStatuses, 'talk-admin-user-detail-tab-bar')}
+                    aria-controls='talk-admin-user-detail-content' >
+                    <Tab tabId={'all'} className={'talk-admin-user-detail-all-tab'}>
+                      All
+                    </Tab>
+                    <Tab tabId={'rejected'} className={'talk-admin-user-detail-rejected-tab'}>
+                      Rejected
+                    </Tab>
+                    <Tab tabId={'history'} className={'talk-admin-user-detail-history-tab'}>
+                      Account History
+                    </Tab>
+                  </TabBar>
                )
                : (
                  <div className={styles.bulkActionGroup}>
@@ -207,11 +200,11 @@ export default class UserDetail extends React.Component {
                }} />
              <label htmlFor='toogleAll'>Select all</label>
            </div>
-            
+
          </div>

-          { 
-            activeTab !== 'history' ?
+          <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) => {
@@ -231,26 +224,67 @@ export default class UserDetail extends React.Component {
                  })
                }
              </div>
-              :
+            </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>
+            </TabPane>
+            <TabPane tabId={'history'} className={'talk-admin-user-detail-history-tab-pane'}>
              <AccountHistory
                userState={user.state}
              />
-          }
+            </TabPane>
+          </TabContent>

          <LoadMore
            className={styles.loadMore}
            loadMore={loadMore}
            showLoadMore={hasNextPage}
          />
+          
        </Drawer>
      </ClickOutside>
    );
  }
-
-  render() {
-    if (this.props.loading) {
-      return this.renderLoading();
-    }
-    return this.renderLoaded();
-  }
 }
+
+UserDetail.propTypes = {
+  userId: PropTypes.string.isRequired,
+  hideUserDetail: PropTypes.func.isRequired,
+  root: PropTypes.object.isRequired,
+  acceptComment: PropTypes.func.isRequired,
+  rejectComment: PropTypes.func.isRequired,
+  changeStatus: PropTypes.func.isRequired,
+  toggleSelect: PropTypes.func.isRequired,
+  bulkAccept: PropTypes.func.isRequired,
+  bulkReject: PropTypes.func.isRequired,
+  toggleSelectAll: PropTypes.func.isRequired,
+  loading: PropTypes.bool.isRequired,
+  data: PropTypes.shape({
+    refetch: PropTypes.func.isRequired,
+  }),
+  activeTab: PropTypes.string.isRequired,
+  selectedCommentIds: PropTypes.array.isRequired,
+  viewUserDetail: PropTypes.any.isRequired,
+  loadMore: PropTypes.any.isRequired,
+  notify: PropTypes.func.isRequired
+};
+
+export default UserDetail;