don't have functions re-created every render

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

@@ -18,7 +18,8 @@ export default class UserDetail extends React.Component {
     rejectComment: PropTypes.func.isRequired,
     changeStatus: PropTypes.func.isRequired,
     toggleSelect: PropTypes.func.isRequired,
-    bulkSetCommentStatus: PropTypes.func.isRequired,
+    bulkAccept: PropTypes.func.isRequired,
+    bulkReject: PropTypes.func.isRequired,
   }
 
   copyPermalink = () => {
@@ -31,14 +32,6 @@ export default class UserDetail extends React.Component {
     }
   }
 
-  changeStatus = (tab) => {
-    if (tab === 'all') {
-      this.props.changeStatus('all');
-    } else if (tab === 'rejected') {
-      this.props.changeStatus('rejected');
-    }
-  }
-
   rejectThenReload = (info) => {
     this.props.rejectComment(info).then(() => {
       this.props.data.refetch();
@@ -51,6 +44,14 @@ export default class UserDetail extends React.Component {
     });
   }
 
+  showAll = () => {
+    this.props.changeStatus('all');
+  }
+
+  showRejected = () => {
+    this.props.changeStatus('rejected');
+  }
+
   render () {
     const {
       root: {
@@ -66,7 +67,8 @@ export default class UserDetail extends React.Component {
       bannedWords,
       suspectWords,
       toggleSelect,
-      bulkSetCommentStatus,
+      bulkAccept,
+      bulkReject,
       showBanUserDialog,
       showSuspendUserDialog,
       hideUserDetail
@@ -116,20 +118,20 @@ export default class UserDetail extends React.Component {
           selectedIds.length === 0
           ? (
             <ul className={styles.commentStatuses}>
-              <li className={tab === 'all' ? styles.active : ''} onClick={this.changeStatus.bind(this, 'all')}>All</li>
-              <li className={tab === 'rejected' ? styles.active : ''} onClick={this.changeStatus.bind(this, 'rejected')}>Rejected</li>
+              <li className={tab === 'all' ? styles.active : ''} onClick={this.showAll}>All</li>
+              <li className={tab === 'rejected' ? styles.active : ''} onClick={this.showRejected}>Rejected</li>
             </ul>
           )
           : (
             <div className={styles.bulkActionGroup}>
               <Button
-                onClick={() => bulkSetCommentStatus('ACCEPTED')}
+                onClick={bulkAccept}
                 className={styles.bulkAction}
                 cStyle='approve'
                 icon='done'>
               </Button>
               <Button
-                onClick={() => bulkSetCommentStatus('REJECTED')}
+                onClick={bulkReject}
                 className={styles.bulkAction}
                 cStyle='reject'
                 icon='close'>

client/coral-admin/src/routes/Moderation/containers/UserDetail.js

@@ -48,13 +48,22 @@ class UserDetailContainer extends React.Component {
     });
   }
 
+  bulkReject = () => {
+    this.bulkSetCommentStatus('REJECTED');
+  }
+
+  bulkAccept = () => {
+    this.bulkSetCommentStatus('ACCEPTED');
+  }
+
   render () {
     if (!('user' in this.props.root)) {
       return null;
     }
 
     return <UserDetail
-      bulkSetCommentStatus={this.bulkSetCommentStatus}
+      bulkReject={this.bulkReject}
+      bulkAccept={this.bulkAccept}
       changeStatus={this.props.changeUserDetailStatuses}
       toggleSelect={this.props.toggleSelectCommentInUserDetail}
       {...this.props} />;