replaced eslint:recommended with prettier

plugins/talk-plugin-featured-comments/client/components/Comment.js

@@ -1,24 +1,27 @@
 import React from 'react';
 import cn from 'classnames';
 import styles from './Comment.css';
-import {t} from 'plugin-api/beta/client/services';
-import {Slot, CommentAuthorName, CommentTimestamp, CommentContent} from 'plugin-api/beta/client/components';
-import {Icon} from 'plugin-api/beta/client/components/ui';
-import {pluginName} from '../../package.json';
+import { t } from 'plugin-api/beta/client/services';
+import {
+  Slot,
+  CommentAuthorName,
+  CommentTimestamp,
+  CommentContent,
+} from 'plugin-api/beta/client/components';
+import { Icon } from 'plugin-api/beta/client/components/ui';
+import { pluginName } from '../../package.json';
 import FeaturedButton from '../containers/FeaturedButton';
 
 class Comment extends React.Component {
-
   viewComment = () => {
     this.props.viewComment(this.props.comment.id);
-  }
+  };
 
   render() {
-    const {comment, asset, root, data} = this.props;
-    const queryData = {comment, asset, root};
+    const { comment, asset, root, data } = this.props;
+    const queryData = { comment, asset, root };
     return (
       <div className={cn(styles.root, `${pluginName}-comment`)}>
-
         <Slot
           component={'blockquote'}
           className={cn(styles.quote, `${pluginName}-comment-body`)}
@@ -29,7 +32,6 @@ class Comment extends React.Component {
         />
 
         <div className={cn(`${pluginName}-comment-username-box`)}>
-
           <Slot
             className={cn(styles.username, `${pluginName}-comment-username`)}
             fill="commentAuthorName"
@@ -51,8 +53,13 @@ class Comment extends React.Component {
         </div>
 
         <footer className={cn(styles.footer, `${pluginName}-comment-footer`)}>
-          <div className={cn('talk-embed-stream-comment-actions-container-left', styles.reactionsContainer, `${pluginName}-comment-reactions`)}>
-
+          <div
+            className={cn(
+              'talk-embed-stream-comment-actions-container-left',
+              styles.reactionsContainer,
+              `${pluginName}-comment-reactions`
+            )}
+          >
             <Slot
               fill="commentReactions"
               root={root}
@@ -69,9 +76,21 @@ class Comment extends React.Component {
               asset={asset}
             />
           </div>
-          <div className={cn('talk-embed-stream-comment-actions-container-right', styles.actionsContainer, `${pluginName}-comment-actions`)}>
-            <button className={cn(styles.goTo, `${pluginName}-comment-go-to`)} onClick={this.viewComment}>
-              <Icon name="forum" className={styles.repliesIcon} /> {comment.replyCount} | {t('talk-plugin-featured-comments.go_to_conversation')} <Icon name="keyboard_arrow_right" className={styles.goToIcon} />
+          <div
+            className={cn(
+              'talk-embed-stream-comment-actions-container-right',
+              styles.actionsContainer,
+              `${pluginName}-comment-actions`
+            )}
+          >
+            <button
+              className={cn(styles.goTo, `${pluginName}-comment-go-to`)}
+              onClick={this.viewComment}
+            >
+              <Icon name="forum" className={styles.repliesIcon} />{' '}
+              {comment.replyCount} |{' '}
+              {t('talk-plugin-featured-comments.go_to_conversation')}{' '}
+              <Icon name="keyboard_arrow_right" className={styles.goToIcon} />
             </button>
           </div>
         </footer>

plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js

@@ -1,25 +1,29 @@
 import React from 'react';
 import cn from 'classnames';
 import styles from './FeaturedButton.css';
-import {pluginName} from '../../package.json';
-import {can} from 'plugin-api/beta/client/services';
-import {Icon} from 'plugin-api/beta/client/components/ui';
+import { pluginName } from '../../package.json';
+import { can } from 'plugin-api/beta/client/services';
+import { Icon } from 'plugin-api/beta/client/components/ui';
 
-const FeaturedButton = (props) => {
-  const {alreadyTagged, deleteTag, postTag, user} = props;
+const FeaturedButton = props => {
+  const { alreadyTagged, deleteTag, postTag, user } = props;
 
   return can(user, 'MODERATE_COMMENTS') ? (
     <button
-      className={cn([`${pluginName}-tag-button`, styles.button, {[styles.featured] : alreadyTagged}])}
-      onClick={alreadyTagged ? deleteTag : postTag} >
-
-      {alreadyTagged ?
-        <Icon name="star" className={styles.icon} /> :
+      className={cn([
+        `${pluginName}-tag-button`,
+        styles.button,
+        { [styles.featured]: alreadyTagged },
+      ])}
+      onClick={alreadyTagged ? deleteTag : postTag}
+    >
+      {alreadyTagged ? (
+        <Icon name="star" className={styles.icon} />
+      ) : (
         <Icon name="star_border" className={styles.icon} />
-      }
-
+      )}
     </button>
-  ) : null ;
+  ) : null;
 };
 
 export default FeaturedButton;

plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.js

@@ -1,13 +1,16 @@
 import React from 'react';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
-import {Dialog} from 'coral-ui';
+import { Dialog } from 'coral-ui';
 import styles from './FeaturedDialog.css';
-import {t} from 'plugin-api/beta/client/services';
+import { t } from 'plugin-api/beta/client/services';
 import Button from 'coral-ui/components/Button';
 
-const FeaturedDialog = ({showFeaturedDialog, closeFeaturedDialog, postTag}) => {
-
+const FeaturedDialog = ({
+  showFeaturedDialog,
+  closeFeaturedDialog,
+  postTag,
+}) => {
   const onPerform = async () => {
     await postTag();
     await closeFeaturedDialog();
@@ -18,9 +21,14 @@ const FeaturedDialog = ({showFeaturedDialog, closeFeaturedDialog, postTag}) => {
       className={cn(styles.dialog, 'talk-featured-dialog')}
       id="talkFeaturedDialog"
       open={showFeaturedDialog}
-      onCancel={closeFeaturedDialog} >
-      <span className={styles.close} onClick={closeFeaturedDialog}>×</span>
-      <h2 className={styles.header}>{t('talk-plugin-featured-comments.feature_comment')}</h2>
+      onCancel={closeFeaturedDialog}
+    >
+      <span className={styles.close} onClick={closeFeaturedDialog}>
+        ×
+      </span>
+      <h2 className={styles.header}>
+        {t('talk-plugin-featured-comments.feature_comment')}
+      </h2>
       <div className={styles.content}>
         {t('talk-plugin-featured-comments.are_you_sure')}
       </div>
@@ -29,14 +37,16 @@ const FeaturedDialog = ({showFeaturedDialog, closeFeaturedDialog, postTag}) => {
           className={cn(styles.cancel, 'talk-featured-dialog-button-cancel')}
           cStyle="cancel"
           onClick={closeFeaturedDialog}
-          raised >
+          raised
+        >
           {t('talk-plugin-featured-comments.cancel')}
         </Button>
-        <Button 
+        <Button
           className={cn(styles.perform, 'talk-featured-dialog-button-confirm')}
           cStyle="black"
           onClick={onPerform}
-          raised >
+          raised
+        >
           {t('talk-plugin-featured-comments.yes_feature_comment')}
         </Button>
       </div>

plugins/talk-plugin-featured-comments/client/components/InfoIcon.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import styles from './InfoIcon.css';
 import cn from 'classnames';
-import {Icon} from 'plugin-api/beta/client/components/ui';
+import { Icon } from 'plugin-api/beta/client/components/ui';
 
-export default ({hover}) => (
+export default ({ hover }) => (
   <Icon
     name="info_outline"
-    className={cn(styles.infoIcon, {[styles.on]: hover})}
+    className={cn(styles.infoIcon, { [styles.on]: hover })}
   />
 );

plugins/talk-plugin-featured-comments/client/components/LoadMore.js

@@ -1,18 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Button} from 'coral-ui';
+import { Button } from 'coral-ui';
 import t from 'coral-framework/services/i18n';
 import cn from 'classnames';
 
 class LoadMore extends React.Component {
-  render () {
-    const {loadingState, loadMore} = this.props;
+  render() {
+    const { loadingState, loadMore } = this.props;
     const disabled = loadingState === 'loading';
     return (
-      <div className='talk-load-more'>
+      <div className="talk-load-more">
         <Button
           onClick={loadMore}
-          className={cn('talk-load-more-button', {[`talk-load-more-button-${loadingState}`]: loadingState})}
+          className={cn('talk-load-more-button', {
+            [`talk-load-more-button-${loadingState}`]: loadingState,
+          })}
           disabled={disabled}
         >
           {t('framework.view_more_comments')}

plugins/talk-plugin-featured-comments/client/components/ModActionButton.js

@@ -1,58 +1,62 @@
 import React from 'react';
 import cn from 'classnames';
 import styles from './ModActionButton.css';
-import {pluginName} from '../../package.json';
-import {t} from 'plugin-api/beta/client/services';
-import {Icon} from 'plugin-api/beta/client/components/ui';
+import { pluginName } from '../../package.json';
+import { t } from 'plugin-api/beta/client/services';
+import { Icon } from 'plugin-api/beta/client/components/ui';
 
 export class ModActionButton extends React.Component {
   constructor() {
     super();
 
     this.state = {
-      on: false
+      on: false,
     };
-
   }
 
-  handleMouseEnter = (e) => {
+  handleMouseEnter = e => {
     e.preventDefault();
     this.setState({
-      on: true
+      on: true,
     });
-  }
+  };
 
-  handleMouseLeave = (e) => {
+  handleMouseLeave = e => {
     e.preventDefault();
     this.setState({
-      on: false
+      on: false,
     });
-  }
+  };
 
   handleDeleteTag = () => {
     this.props.deleteTag();
     this.props.closeMenu();
-  }
+  };
 
   handlePostTag = () => {
     this.props.postTag();
     this.props.closeMenu();
-  }
+  };
 
   render() {
-    const {alreadyTagged} = this.props;
-    const {handleDeleteTag, handlePostTag} = this;
+    const { alreadyTagged } = this.props;
+    const { handleDeleteTag, handlePostTag } = this;
 
     return (
-      <button className={cn(`${pluginName}-tag-button`, styles.button, {[styles.featured] : alreadyTagged})}
+      <button
+        className={cn(`${pluginName}-tag-button`, styles.button, {
+          [styles.featured]: alreadyTagged,
+        })}
         onClick={alreadyTagged ? handleDeleteTag : handlePostTag}
         onMouseEnter={this.handleMouseEnter}
-        onMouseLeave={this.handleMouseLeave} >
-
+        onMouseLeave={this.handleMouseLeave}
+      >
         {alreadyTagged ? (
           <span className={styles.approved}>
             <Icon name="star" className={styles.icon} />
-            {!this.state.on ? t('talk-plugin-featured-comments.featured') : t('talk-plugin-featured-comments.un_feature')}
+            {!this.state.on
+              ? t('talk-plugin-featured-comments.featured')
+              : t('talk-plugin-featured-comments.un_feature')}
           </span>
         ) : (
           <span>
@@ -60,11 +64,9 @@ export class ModActionButton extends React.Component {
             {t('talk-plugin-featured-comments.feature')}
           </span>
         )}
-
       </button>
     );
   }
 }
 
 export default ModActionButton;
-

plugins/talk-plugin-featured-comments/client/components/ModTag.js

@@ -2,53 +2,60 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import styles from './ModTag.css';
-import {t} from 'plugin-api/beta/client/services';
-import {Icon} from 'plugin-api/beta/client/components/ui';
+import { t } from 'plugin-api/beta/client/services';
+import { Icon } from 'plugin-api/beta/client/components/ui';
 
 export default class ModTag extends React.Component {
   constructor() {
     super();
 
     this.state = {
-      on: false
+      on: false,
     };
-
   }
 
-  handleMouseEnter = (e) => {
+  handleMouseEnter = e => {
     e.preventDefault();
     this.setState({
-      on: true
+      on: true,
     });
-  }
+  };
 
-  handleMouseLeave = (e) => {
+  handleMouseLeave = e => {
     e.preventDefault();
     this.setState({
-      on: false
+      on: false,
     });
-  }
+  };
 
   openFeaturedDialog = (comment, asset) => {
     this.props.openFeaturedDialog(comment, asset);
-  }
+  };
 
   render() {
-    const {alreadyTagged, deleteTag, comment, asset} = this.props;
+    const { alreadyTagged, deleteTag, comment, asset } = this.props;
 
     return alreadyTagged ? (
-      <span className={cn(styles.tag, styles.featured)}
+      <span
+        className={cn(styles.tag, styles.featured)}
         onClick={deleteTag}
         onMouseEnter={this.handleMouseEnter}
-        onMouseLeave={this.handleMouseLeave} >
+        onMouseLeave={this.handleMouseLeave}
+      >
         <Icon name="star_outline" className={cn(styles.tagIcon)} />
-        {!this.state.on ? t('talk-plugin-featured-comments.featured') : t('talk-plugin-featured-comments.un_feature')}
+        {!this.state.on
+          ? t('talk-plugin-featured-comments.featured')
+          : t('talk-plugin-featured-comments.un_feature')}
       </span>
     ) : (
-      <span className={cn(styles.tag, {[styles.featured]: alreadyTagged})}
-        onClick={() => this.openFeaturedDialog(comment, asset)} >
+      <span
+        className={cn(styles.tag, { [styles.featured]: alreadyTagged })}
+        onClick={() => this.openFeaturedDialog(comment, asset)}
+      >
         <Icon name="star_outline" className={cn(styles.tagIcon)} />
-        {alreadyTagged ? t('talk-plugin-featured-comments.featured') : t('talk-plugin-featured-comments.feature')}
+        {alreadyTagged
+          ? t('talk-plugin-featured-comments.featured')
+          : t('talk-plugin-featured-comments.feature')}
       </span>
     );
   }

plugins/talk-plugin-featured-comments/client/components/Tab.js

@@ -1,15 +1,17 @@
 import React from 'react';
-import {TabCount} from 'plugin-api/beta/client/components/ui';
+import { TabCount } from 'plugin-api/beta/client/components/ui';
 import InfoIcon from './InfoIcon';
-import {t} from 'plugin-api/beta/client/services';
+import { t } from 'plugin-api/beta/client/services';
 import Tooltip from './Tooltip';
 import PropTypes from 'prop-types';
 
-const Tab = ({active, hover, featuredCommentsCount}) => {
+const Tab = ({ active, hover, featuredCommentsCount }) => {
   return (
     <span>
       {t('talk-plugin-featured-comments.featured')}
-      <TabCount active={active} sub>{featuredCommentsCount}</TabCount>
+      <TabCount active={active} sub>
+        {featuredCommentsCount}
+      </TabCount>
       <InfoIcon hover={hover} />
       {hover && <Tooltip />}
     </span>

plugins/talk-plugin-featured-comments/client/components/TabPane.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Comment from '../containers/Comment';
 import LoadMore from './LoadMore';
-import {getErrorMessages} from 'plugin-api/beta/client/utils';
+import { getErrorMessages } from 'plugin-api/beta/client/utils';
 
 class TabPane extends React.Component {
   state = {
@@ -9,36 +9,43 @@ class TabPane extends React.Component {
   };
 
   loadMore = () => {
-    this.setState({loadingState: 'loading'});
-    this.props.loadMore()
+    this.setState({ loadingState: 'loading' });
+    this.props
+      .loadMore()
       .then(() => {
-        this.setState({loadingState: 'success'});
+        this.setState({ loadingState: 'success' });
       })
-      .catch((error) => {
-        this.setState({loadingState: 'error'});
+      .catch(error => {
+        this.setState({ loadingState: 'error' });
         this.props.notify('error', getErrorMessages(error));
       });
-  }
+  };
 
   render() {
-    const {root, data, asset: {featuredComments, ...asset}, viewComment} = this.props;
+    const {
+      root,
+      data,
+      asset: { featuredComments, ...asset },
+      viewComment,
+    } = this.props;
     return (
       <div>
-        {featuredComments.nodes.map((comment) =>
+        {featuredComments.nodes.map(comment => (
           <Comment
             key={comment.id}
             root={root}
             data={data}
             comment={comment}
             asset={asset}
-            viewComment={viewComment} />
-        )}
-        {featuredComments.hasNextPage &&
+            viewComment={viewComment}
+          />
+        ))}
+        {featuredComments.hasNextPage && (
           <LoadMore
             loadMore={this.loadMore}
             loadingState={this.state.loadingState}
           />
-        }
+        )}
       </div>
     );
   }

plugins/talk-plugin-featured-comments/client/components/Tag.js

@@ -2,39 +2,49 @@ import React from 'react';
 import cn from 'classnames';
 import styles from './Tag.css';
 import Tooltip from './Tooltip';
-import {t} from 'plugin-api/beta/client/services';
+import { t } from 'plugin-api/beta/client/services';
 
 export default class Tag extends React.Component {
   constructor() {
     super();
 
     this.state = {
-      tooltip: false
+      tooltip: false,
     };
-
   }
 
-  showTooltip = (e) => {
+  showTooltip = e => {
     e.preventDefault();
     this.setState({
-      tooltip: true
+      tooltip: true,
     });
-  }
+  };
 
-  hideTooltip = (e) => {
+  hideTooltip = e => {
     e.preventDefault();
     this.setState({
-      tooltip: false
+      tooltip: false,
     });
-  }
+  };
 
   render() {
-    const {tooltip} = this.state;
-    return(
-      <span className={cn(styles.tagContainer, styles.noSelect)} onMouseEnter={this.showTooltip}
-        onMouseLeave={this.hideTooltip} onTouchStart={this.showTooltip}
-        onTouchEnd={this.hideTooltip} >
-        <span className={cn(styles.tag, styles.noSelect, {[styles.on]: tooltip}, 'talk-stream-comment-featured-tag-label')}>
+    const { tooltip } = this.state;
+    return (
+      <span
+        className={cn(styles.tagContainer, styles.noSelect)}
+        onMouseEnter={this.showTooltip}
+        onMouseLeave={this.hideTooltip}
+        onTouchStart={this.showTooltip}
+        onTouchEnd={this.hideTooltip}
+      >
+        <span
+          className={cn(
+            styles.tag,
+            styles.noSelect,
+            { [styles.on]: tooltip },
+            'talk-stream-comment-featured-tag-label'
+          )}
+        >
           {t('talk-plugin-featured-comments.featured')}
         </span>
         {tooltip && <Tooltip className={styles.tooltip} />}

plugins/talk-plugin-featured-comments/client/components/Tooltip.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import cn from 'classnames';
 import styles from './Tooltip.css';
-import {t} from 'plugin-api/beta/client/services';
-import {Icon} from 'plugin-api/beta/client/components/ui';
+import { t } from 'plugin-api/beta/client/services';
+import { Icon } from 'plugin-api/beta/client/components/ui';
 
-export default ({className = ''}) => (
+export default ({ className = '' }) => (
   <div className={cn(styles.tooltip, className)}>
     <Icon name="info_outline" className={styles.icon} />
     <h3 className={styles.headline}>