*: update style to conform to eslint-config-airbnb@10.0.0

u-wave · Aug 4, 2016 · c72cc12 · c72cc12
1 parent d1467f5
commit c72cc12
Show file tree

Hide file tree

Showing 40 changed files with 203 additions and 94 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -9,20 +9,12 @@
     "new-cap": [ "error", {
       "capIsNewExceptions": [ "DragDropContext", "DragSource", "DropTarget", "DragLayer", "ThemeDecorator" ]
     } ],
-    // This rule is very heavy-handed and breaks a lot of places where we use
-    // parentheses for readability, particularly in React components where
-    // multiline JSX is surrounded by parens:
-    //
-    // return (
-    //   <Component>
-    //     stuff
-    //   </Component>
-    // )
-    "no-extra-parens": "off",
     // Conflicts with `_id` property names returned from the üWave HTTP API
     "no-underscore-dangle": "off",
     "global-require": "off",
-    // Temporarily disabled, see https://github.com/benmosher/eslint-plugin-import/issues/317
-    "import/no-mutable-exports": "off"
+    "react/jsx-filename-extension": "off",
+    // devDependencies are allowed in tests and build stuff. The eslintrc in
+    // src/ disallows using devDependencies in client app code.
+    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
   }
 }
diff --git a/src/.eslintrc b/src/.eslintrc
@@ -0,0 +1,8 @@
+{
+  "rules": {
+    "import/no-extraneous-dependencies": ["error", { "devDependencies": false }]
+  },
+  "env": {
+    "browser": true
+  }
+}
diff --git a/src/actions/BoothActionCreators.js b/src/actions/BoothActionCreators.js
@@ -32,7 +32,10 @@ export function advance(nextBooth) {
     dispatch({
       type: ADVANCE,
       payload: {
-        userID, historyID, playlistID, user,
+        userID,
+        historyID,
+        playlistID,
+        user,
         media: flattenPlaylistItem(media),
         timestamp: playedAt
       },

diff --git a/src/actions/ChatActionCreators.js b/src/actions/ChatActionCreators.js
@@ -210,7 +210,9 @@ export function muteUser(userID, { moderatorID, expiresAt }) {
     dispatch({
       type: MUTE_USER,
       payload: {
-        userID, moderatorID, expiresAt,
+        userID,
+        moderatorID,
+        expiresAt,
         expirationTimer: expireIn > 0 ?
           setTimeout(() => dispatch(expireMute(userID)), expireIn) : null
       }

diff --git a/src/actions/ErrorActionCreators.js b/src/actions/ErrorActionCreators.js
@@ -1,5 +1,6 @@
 import { ERROR_DISMISS } from '../constants/actionTypes/errors';
 
+// eslint-disable-next-line import/prefer-default-export
 export function dismiss() {
   return { type: ERROR_DISMISS };
 }
diff --git a/src/actions/PanelSelectActionCreators.js b/src/actions/PanelSelectActionCreators.js
@@ -1,5 +1,6 @@
 import { SELECT_PANEL } from '../constants/actionTypes/panel';
 
+// eslint-disable-next-line import/prefer-default-export
 export function selectPanel(name) {
   return {
     type: SELECT_PANEL,

diff --git a/src/components/Chat/Markup/Link.js b/src/components/Chat/Markup/Link.js
@@ -6,7 +6,7 @@ const Link = ({ text, href, ...props }) => (
     href={href}
     title={href}
     target="_blank"
-    rel="noreferrer"
+    rel="noopener noreferrer"
     {...props}
   >
     {truncate(text, 60)}

diff --git a/src/components/Chat/index.js b/src/components/Chat/index.js
@@ -29,12 +29,12 @@ export default class Chat extends Component {
   }
 
   scrollToBottom() {
-    const el = this.refs.chat;
+    const el = this.container;
     el.scrollTop = el.scrollHeight;
   }
 
   isScrolledToBottom() {
-    const el = this.refs.chat;
+    const el = this.container;
     const lastMessage = el.lastElementChild;
     if (lastMessage) {
       const neededSize = el.scrollTop + el.offsetHeight + lastMessage.offsetHeight;
@@ -43,6 +43,10 @@ export default class Chat extends Component {
     return true;
   }
 
+  refContainer = container => {
+    this.container = container;
+  };
+
   renderMotd() {
     if (!this.props.motd) {
       return null;
@@ -69,7 +73,7 @@ export default class Chat extends Component {
 
   render() {
     return (
-      <div className="Chat" ref="chat">
+      <div className="Chat" ref={this.refContainer}>
         {this.renderMotd()}
         {this.props.messages.map(this.renderMessage, this)}
       </div>

diff --git a/src/components/Dialogs/EditMediaDialog/index.js b/src/components/Dialogs/EditMediaDialog/index.js
@@ -1,6 +1,7 @@
 import cx from 'classnames';
 import React, { Component, PropTypes } from 'react';
 import Dialog from 'material-ui/Dialog';
+import uniqueId from 'lodash/uniqueId';
 
 import ArtistIcon from 'material-ui/svg-icons/hardware/headset';
 import TitleIcon from 'material-ui/svg-icons/image/music-note';
@@ -17,7 +18,7 @@ import TextField from '../../Form/TextField';
 // naive HH:mm:ss → seconds
 const parseDuration = str => str.split(':')
   .map(part => parseInt(part.trim(), 10))
-  .reduce((duration, part) => duration * 60 + part, 0);
+  .reduce((duration, part) => (duration * 60) + part, 0);
 
 export default class EditMediaDialog extends Component {
   static propTypes = {
@@ -36,11 +37,14 @@ export default class EditMediaDialog extends Component {
     errors: null
   };
 
+  labelStart = uniqueId('editmedia');
+  labelEnd = uniqueId('editmedia');
+
   handleSubmit = e => {
     e.preventDefault();
 
     const { media, onEditedMedia, onCloseDialog } = this.props;
-    const { artist, title, start, end } = this.refs;
+    const { artist, title, start, end } = this;
 
     const startSeconds = parseDuration(start.value);
     const endSeconds = parseDuration(end.value);
@@ -71,6 +75,22 @@ export default class EditMediaDialog extends Component {
     onCloseDialog();
   };
 
+  refArtist = artist => {
+    this.artist = artist;
+  };
+
+  refTitle = title => {
+    this.title = title;
+  };
+
+  refStart = start => {
+    this.start = start;
+  };
+
+  refEnd = end => {
+    this.end = end;
+  };
+
   render() {
     const {
       open,
@@ -89,7 +109,7 @@ export default class EditMediaDialog extends Component {
     if (open) {
       const artistInput = (
         <TextField
-          ref="artist"
+          ref={this.refArtist}
           className="EditMediaDialogGroup-field"
           placeholder="Artist"
           defaultValue={media.artist}
@@ -99,11 +119,11 @@ export default class EditMediaDialog extends Component {
         />
       );
       const artistTitleLabel = (
-        <label className="EditMediaDialogGroup-label">–</label>
+        <div className="EditMediaDialogGroup-label">–</div>
       );
       const titleInput = (
         <TextField
-          ref="title"
+          ref={this.refTitle}
           className="EditMediaDialogGroup-field"
           placeholder="Title"
           defaultValue={media.title}
@@ -113,11 +133,12 @@ export default class EditMediaDialog extends Component {
       );
 
       const fromLabel = (
-        <label className="EditMediaDialogGroup-label">Play from:</label>
+        <label htmlFor={this.labelStart} className="EditMediaDialogGroup-label">Play from:</label>
       );
       const fromInput = (
         <TextField
-          ref="start"
+          ref={this.refStart}
+          id={this.labelStart}
           className="EditMediaDialogGroup-field"
           placeholder="0:00"
           defaultValue={formatDuration(media.start)}
@@ -126,11 +147,12 @@ export default class EditMediaDialog extends Component {
         />
       );
       const toLabel = (
-        <label className="EditMediaDialogGroup-label">to:</label>
+        <label htmlFor={this.labelEnd} className="EditMediaDialogGroup-label">to:</label>
       );
       const toInput = (
         <TextField
-          ref="end"
+          ref={this.refEnd}
+          id={this.labelEnd}
           className="EditMediaDialogGroup-field"
           placeholder={formatDuration(media.duration)}
           defaultValue={formatDuration(media.end)}

diff --git a/src/components/Dialogs/LoginDialog/LoginForm.js b/src/components/Dialogs/LoginDialog/LoginForm.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import EmailIcon from 'material-ui/svg-icons/communication/email';
 import PasswordIcon from 'material-ui/svg-icons/action/lock';
 import Loader from '../../Loader';
@@ -23,11 +23,19 @@ export default class LoginForm extends React.Component {
     event.preventDefault();
     this.setState({ busy: true });
     this.props.onLogin({
-      email: this.refs.email.value,
-      password: this.refs.password.value
+      email: this.email.value,
+      password: this.password.value
     });
   };
 
+  refEmail = email => {
+    this.email = email;
+  };
+
+  refPassword = password => {
+    this.password = password;
+  };
+
   render() {
     const { error } = this.props;
     const { busy } = this.state;
@@ -37,7 +45,7 @@ export default class LoginForm extends React.Component {
         {error && <FormGroup>{error.message}</FormGroup>}
         <FormGroup>
           <TextField
-            ref="email"
+            ref={this.refEmail}
             className="LoginForm-field"
             type="email"
             placeholder="E-Mail"
@@ -47,7 +55,7 @@ export default class LoginForm extends React.Component {
         </FormGroup>
         <FormGroup>
           <TextField
-            ref="password"
+            ref={this.refPassword}
             className="LoginForm-field"
             type="password"
             placeholder="Password"

diff --git a/src/components/Dialogs/LoginDialog/RegisterForm.js b/src/components/Dialogs/LoginDialog/RegisterForm.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import EmailIcon from 'material-ui/svg-icons/communication/email';
 import PasswordIcon from 'material-ui/svg-icons/action/lock';
 import UserIcon from 'material-ui/svg-icons/social/person';
@@ -33,9 +33,9 @@ export default class RegisterForm extends React.Component {
     event.preventDefault();
     this.setState({ busy: true });
     this.props.onRegister({
-      username: this.refs.username.value,
-      email: this.refs.email.value,
-      password: this.refs.password.value,
+      username: this.username.value,
+      email: this.email.value,
+      password: this.password.value,
       grecaptcha: this.state.captchaResponse
     });
   };
@@ -46,6 +46,18 @@ export default class RegisterForm extends React.Component {
     });
   };
 
+  refUsername = username => {
+    this.username = username;
+  };
+
+  refEmail = email => {
+    this.email = email;
+  };
+
+  refPassword = password => {
+    this.password = password;
+  };
+
   renderCaptcha() {
     if (!this.props.useReCaptcha) {
       return null;
@@ -69,7 +81,7 @@ export default class RegisterForm extends React.Component {
         {error && <FormGroup>{error.message}</FormGroup>}
         <FormGroup>
           <TextField
-            ref="username"
+            ref={this.refUsername}
             className="RegisterForm-field"
             placeholder="Username"
             icon={<UserIcon color="#9f9d9e" />}
@@ -78,7 +90,7 @@ export default class RegisterForm extends React.Component {
         </FormGroup>
         <FormGroup>
           <TextField
-            ref="email"
+            ref={this.refEmail}
             className="RegisterForm-field"
             type="email"
             placeholder="E-Mail"
@@ -87,7 +99,7 @@ export default class RegisterForm extends React.Component {
         </FormGroup>
         <FormGroup>
           <TextField
-            ref="password"
+            ref={this.refPassword}
             className="RegisterForm-field"
             type="password"
             placeholder="Password"

diff --git a/src/components/Dialogs/PromptDialog/index.js b/src/components/Dialogs/PromptDialog/index.js
@@ -38,7 +38,7 @@ export default class PromptDialog extends React.Component {
 
   handleSubmit = event => {
     event.preventDefault();
-    const promise = this.props.onSubmit(this.refs.input.value);
+    const promise = this.props.onSubmit(this.input.value);
     if (promise && promise.then) {
       this.setState({ busy: true });
       const onDone = () => {
@@ -56,6 +56,10 @@ export default class PromptDialog extends React.Component {
     this.setState({ value: event.target.value });
   };
 
+  refInput = input => {
+    this.input = input;
+  };
+
   render() {
     const {
       children,
@@ -88,7 +92,7 @@ export default class PromptDialog extends React.Component {
           {children}
           <FormGroup>
             <TextField
-              ref="input"
+              ref={this.refInput}
               autofocus
               type={inputType}
               placeholder={placeholder}

diff --git a/src/components/FooterBar/Responses/Favorite.js b/src/components/FooterBar/Responses/Favorite.js
@@ -1,5 +1,4 @@
 import React, { Component, PropTypes } from 'react';
-import { findDOMNode } from 'react-dom';
 import FavoritedIcon from 'material-ui/svg-icons/action/favorite';
 import FavoriteIcon from 'material-ui/svg-icons/action/favorite-border';
 
@@ -17,7 +16,7 @@ export default class Favorite extends Component {
   };
 
   position() {
-    const pos = findDOMNode(this.refs.button).getBoundingClientRect();
+    const pos = this.button.getBoundingClientRect();
     return {
       x: pos.left,
       y: pos.top
@@ -28,13 +27,17 @@ export default class Favorite extends Component {
     this.props.onFavorite(this.position());
   };
 
+  refButton = button => {
+    this.button = button;
+  };
+
   render() {
     const { muiTheme } = this.context;
     const { active, count } = this.props;
     const CurrentIcon = active ? FavoritedIcon : FavoriteIcon;
     return (
       <Button
-        ref="button"
+        ref={this.refButton}
         tooltip="Favorite"
         onClick={this.handleFavorite}
         count={count}