replaced eslint:recommended with prettier

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

@@ -2,78 +2,87 @@ import React from 'react';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
 import capitalize from 'lodash/capitalize';
-import {getErrorMessages} from 'coral-framework/utils';
+import { getErrorMessages } from 'coral-framework/utils';
 import styles from './UserDetail.css';
 import AccountHistory from './AccountHistory';
-import {Slot} from 'coral-framework/components';
+import { Slot } from 'coral-framework/components';
 import UserDetailCommentList from '../components/UserDetailCommentList';
-import {getReliability, isSuspended, isBanned} from 'coral-framework/utils/user';
+import {
+  getReliability,
+  isSuspended,
+  isBanned,
+} from 'coral-framework/utils/user';
 import ButtonCopyToClipboard from './ButtonCopyToClipboard';
 import ClickOutside from 'coral-framework/components/ClickOutside';
-import {Icon, Drawer, Spinner, TabBar, Tab, TabContent, TabPane} from 'coral-ui';
+import {
+  Icon,
+  Drawer,
+  Spinner,
+  TabBar,
+  Tab,
+  TabContent,
+  TabPane,
+} from 'coral-ui';
 import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
 import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
 import UserInfoTooltip from './UserInfoTooltip';
 
 class UserDetail extends React.Component {
-
-  rejectThenReload = async (info) => {
+  rejectThenReload = async info => {
     try {
       await this.props.rejectComment(info);
       this.props.data.refetch();
     } catch (err) {
-
       console.error(err);
       this.props.notify('error', getErrorMessages(err));
     }
-  }
+  };
 
-  acceptThenReload = async (info) => {
+  acceptThenReload = async info => {
     try {
       await this.props.acceptComment(info);
       this.props.data.refetch();
     } catch (err) {
-
       console.error(err);
       this.props.notify('error', getErrorMessages(err));
     }
-  }
+  };
 
   bulkAcceptThenReload = async () => {
     try {
       await this.props.bulkAccept();
       this.props.data.refetch();
     } catch (err) {
-
       console.error(err);
       this.props.notify('error', getErrorMessages(err));
     }
-  }
+  };
 
   bulkRejectThenReload = async () => {
     try {
       await this.props.bulkReject();
       this.props.data.refetch();
     } catch (err) {
-
       console.error(err);
       this.props.notify('error', getErrorMessages(err));
     }
-  }
+  };
 
-  changeTab = (tab) => {
+  changeTab = tab => {
     this.props.changeTab(tab);
-  }
+  };
 
-  showSuspenUserDialog = () => this.props.showSuspendUserDialog({
-    userId: this.props.root.user.id,
-    username: this.props.root.user.username,
-  });
+  showSuspenUserDialog = () =>
+    this.props.showSuspendUserDialog({
+      userId: this.props.root.user.id,
+      username: this.props.root.user.username,
+    });
 
-  showBanUserDialog = () => this.props.showBanUserDialog({
-    userId: this.props.root.user.id,
-    username: this.props.root.user.username,
-  });
+  showBanUserDialog = () =>
+    this.props.showBanUserDialog({
+      userId: this.props.root.user.id,
+      username: this.props.root.user.username,
+    });
 
   renderLoading() {
     return (
@@ -86,7 +95,7 @@ class UserDetail extends React.Component {
   }
 
   getActionMenuLabel() {
-    const {root: {user}} = this.props;
+    const { root: { user } } = this.props;
 
     if (isBanned(user)) {
       return 'Banned';
@@ -101,12 +110,7 @@ class UserDetail extends React.Component {
     const {
       data,
       root,
-      root: {
-        me,
-        user,
-        totalComments,
-        rejectedComments,
-      },
+      root: { me, user, totalComments, rejectedComments },
       activeTab,
       selectedCommentIds,
       toggleSelect,
@@ -120,7 +124,7 @@ class UserDetail extends React.Component {
     } = this.props;
 
     // if totalComments is 0, you're dividing by zero
-    let rejectedPercent = (rejectedComments / totalComments) * 100;
+    let rejectedPercent = rejectedComments / totalComments * 100;
 
     if (rejectedPercent === Infinity || isNaN(rejectedPercent)) {
       rejectedPercent = 0;
@@ -131,43 +135,67 @@ class UserDetail extends React.Component {
 
     return (
       <ClickOutside onClickOutside={modal ? null : hideUserDetail}>
-        <Drawer className="talk-admin-user-detail-drawer" onClose={hideUserDetail}>
-          <h3 className={cn(styles.username, 'talk-admin-user-detail-username')}>
+        <Drawer
+          className="talk-admin-user-detail-drawer"
+          onClose={hideUserDetail}
+        >
+          <h3
+            className={cn(styles.username, 'talk-admin-user-detail-username')}
+          >
             {user.username}
           </h3>
 
-          {user.id &&
+          {user.id && (
             <ActionsMenu
               icon="person"
-              className={cn(styles.actionsMenu, 'talk-admin-user-detail-actions-menu')}
-              buttonClassNames={cn({
-                [styles.actionsMenuSuspended]: suspended,
-                [styles.actionsMenuBanned]: banned,
-              }, 'talk-admin-user-detail-actions-button')}
-              label={this.getActionMenuLabel()}>
-
-              {suspended ? <ActionsMenuItem
-                onClick={() => unsuspendUser({id: user.id})}>
-                Remove Suspension
-              </ActionsMenuItem> : <ActionsMenuItem
-                disabled={me.id === user.id}
-                onClick={this.showSuspenUserDialog}>
-                Suspend User
-              </ActionsMenuItem>}
-
-              {banned ? <ActionsMenuItem
-                onClick={() => unbanUser({id: user.id})}>
-                Remove Ban
-              </ActionsMenuItem> : <ActionsMenuItem
-                disabled={me.id === user.id}
-                onClick={this.showBanUserDialog}>
-                Ban User
-              </ActionsMenuItem>}
+              className={cn(
+                styles.actionsMenu,
+                'talk-admin-user-detail-actions-menu'
+              )}
+              buttonClassNames={cn(
+                {
+                  [styles.actionsMenuSuspended]: suspended,
+                  [styles.actionsMenuBanned]: banned,
+                },
+                'talk-admin-user-detail-actions-button'
+              )}
+              label={this.getActionMenuLabel()}
+            >
+              {suspended ? (
+                <ActionsMenuItem onClick={() => unsuspendUser({ id: user.id })}>
+                  Remove Suspension
+                </ActionsMenuItem>
+              ) : (
+                <ActionsMenuItem
+                  disabled={me.id === user.id}
+                  onClick={this.showSuspenUserDialog}
+                >
+                  Suspend User
+                </ActionsMenuItem>
+              )}
 
+              {banned ? (
+                <ActionsMenuItem onClick={() => unbanUser({ id: user.id })}>
+                  Remove Ban
+                </ActionsMenuItem>
+              ) : (
+                <ActionsMenuItem
+                  disabled={me.id === user.id}
+                  onClick={this.showBanUserDialog}
+                >
+                  Ban User
+                </ActionsMenuItem>
+              )}
             </ActionsMenu>
-          }
+          )}
 
-          {(banned || suspended) && <UserInfoTooltip user={user} banned={banned} suspended={suspended} />}
+          {(banned || suspended) && (
+            <UserInfoTooltip
+              user={user}
+              banned={banned}
+              suspended={suspended}
+            />
+          )}
 
           <div>
             <ul className={styles.userDetailList}>
@@ -177,13 +205,18 @@ class UserDetail extends React.Component {
                 {new Date(user.created_at).toLocaleString()}
               </li>
 
-              {user.profiles.map(({id}) =>
+              {user.profiles.map(({ id }) => (
                 <li key={id}>
                   <Icon name="email" />
                   <span className={styles.userDetailItem}>Email:</span>
-                  {id} <ButtonCopyToClipboard className={styles.copyButton} icon="content_copy" copyText={id} />
+                  {id}{' '}
+                  <ButtonCopyToClipboard
+                    className={styles.copyButton}
+                    icon="content_copy"
+                    copyText={id}
+                  />
                 </li>
-              )}
+              ))}
             </ul>
 
             <ul className={styles.stats}>
@@ -199,7 +232,12 @@ class UserDetail extends React.Component {
               </li>
               <li className={styles.stat}>
                 <span className={styles.statItem}>Reports</span>
-                <span className={cn(styles.statReportResult, styles[getReliability(user.reliable.flagger)])}>
+                <span
+                  className={cn(
+                    styles.statReportResult,
+                    styles[getReliability(user.reliable.flagger)]
+                  )}
+                >
                   {capitalize(getReliability(user.reliable.flagger))}
                 </span>
               </li>
@@ -209,7 +247,7 @@ class UserDetail extends React.Component {
           <Slot
             fill="userProfile"
             data={this.props.data}
-            queryData={{root, user}}
+            queryData={{ root, user }}
           />
 
           <hr />
@@ -218,28 +256,48 @@ class UserDetail extends React.Component {
             onTabClick={this.changeTab}
             activeTab={activeTab}
             className={cn(styles.tabBar, 'talk-admin-user-detail-tab-bar')}
-            aria-controls='talk-admin-user-detail-content'
+            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')} >
+              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')} >
+              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')}>
+            <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'}>
+          <TabContent
+            activeTab={activeTab}
+            className="talk-admin-user-detail-content"
+          >
+            <TabPane
+              tabId={'all'}
+              className={'talk-admin-user-detail-all-tab-pane'}
+            >
               <UserDetailCommentList
                 user={user}
                 root={root}
@@ -255,7 +313,10 @@ class UserDetail extends React.Component {
                 bulkRejectThenReload={this.bulkRejectThenReload}
               />
             </TabPane>
-            <TabPane tabId={'rejected'} className={'talk-admin-user-detail-rejected-tab-pane'}>
+            <TabPane
+              tabId={'rejected'}
+              className={'talk-admin-user-detail-rejected-tab-pane'}
+            >
               <UserDetailCommentList
                 user={user}
                 root={root}
@@ -271,7 +332,10 @@ class UserDetail extends React.Component {
                 bulkRejectThenReload={this.bulkRejectThenReload}
               />
             </TabPane>
-            <TabPane tabId={'history'} className={'talk-admin-user-detail-history-tab-pane'}>
+            <TabPane
+              tabId={'history'}
+              className={'talk-admin-user-detail-history-tab-pane'}
+            >
               <AccountHistory user={user} />
             </TabPane>
           </TabContent>