🚨 Auto fix lint error

.eslintrc

@@ -56,6 +56,7 @@
       "initializations"
     ],
     "react/forbid-prop-types": 0,
+    "react/jsx-no-bind": 0,
     "react/jsx-sort-props": [
       1,
       {

package.json

@@ -11,7 +11,7 @@
     "forever": "NODE_ENV=production forever start ./index.js",
     "stop": "forever stop ./index.js",
     "deploy": "npm run build && npm run server",
-    "lint": "eslint src index.js src/server.jsx src/IndexHTML.jsx"
+    "lint": "eslint src index.js src/server.jsx src/IndexHTML.jsx --ext .jsx,.js"
   },
   "authors": [
     "Andrew Chung",

src/IndexHTML.jsx

@@ -128,7 +128,7 @@ export default class IndexHTML extends React.Component {
               window.dataLayer = window.dataLayer || [];
               function gtag(){dataLayer.push(arguments);}
               gtag('js', new Date());
-              gtag('config', '${GA_TRACKING_ID}');`
+              gtag('config', '${GA_TRACKING_ID}');`,
             }}
           />
           <script src={`/static/vendor/branch-deepview.js?v=${VERSION}`} />

src/asset-library/views/CharacterModal/EditCharacterNamesPanel.jsx

@@ -55,11 +55,11 @@ export default class EditCharacterNamesPanel extends React.Component {
             {t('characterModal.label.descriptionTitle')}
           </div>
           <TextField
-            fullWidth
-            multiLine
             maxLength={1024}
             placeholder={t('characterModal.label.pleaseEnterCharacterDescription')}
             value={character.description}
+            fullWidth
+            multiLine
             onChange={value => this.handleChange('description', value)}
           />
         </div>

src/asset-library/views/CharacterModal/FGImagesList.jsx

@@ -189,8 +189,8 @@ export default class FGImagesList extends React.Component {
 
         <div className="character-modal-add-image-selection">
           <input
+            ref={(e) => { this.imageUpload = e; }}
             accept="image/png"
-            ref={e => { this.imageUpload = e; }}
             style={{ display: 'none' }}
             type="file"
             multiple
@@ -205,7 +205,7 @@ export default class FGImagesList extends React.Component {
             />
           }
         </div>
-        <div className="character-modal-add-row" ref={(e) => { this.imageSelectionRows = e; }}>
+        <div ref={(e) => { this.imageSelectionRows = e; }} className="character-modal-add-row">
           {this.renderFgImageRows()}
         </div>
       </div>

src/common/components/ButtonGroup.jsx

@@ -64,8 +64,6 @@ export default class ButtonGroup extends React.Component {
       const { displayName } = child.type;
       if (displayName === 'RaisedButton' || displayName === 'FlatButton') {
         buttons.push(this.createButton(child, index));
-      } else {
-        return;
       }
     });
 

src/common/components/ColorPicker.jsx

@@ -56,7 +56,7 @@ export default class ColorsPicker extends React.Component {
         {this.state.displayColorPicker ?
           <div className="color-picker-popover">
             <div className="color-picker-cover" onClick={this.handleClose} />
-            <ChromePicker color={color} onChange={this.handleChange} disableAlpha />
+            <ChromePicker color={color} disableAlpha onChange={this.handleChange} />
           </div>
         : null }
       </div>

src/common/components/GridList/index.jsx

@@ -57,7 +57,7 @@ export default class GridList extends React.Component {
       key: index,
       index,
       style,
-      ref: e => { this.elements.push(e); },
+      ref: (e) => { this.elements.push(e); },
     });
   }
 
@@ -76,13 +76,13 @@ export default class GridList extends React.Component {
 
     return (
       <div
+        ref={(e) => { this.component = e; }}
         className="grid-list"
-        ref={e => { this.component = e; }}
         {... { id }}
       >
         <div
-          className="grid-cells-container"
           ref={ref => this.gridCellsContainer = ref}
+          className="grid-cells-container"
           style={{
             margin: `-${interSpace / 2}px`,
             marginLeft: containerMargin,

src/common/components/Modal/index.jsx

@@ -107,8 +107,8 @@ export default class Modal extends React.Component {
           onClick={this.handleClose}
         />
         <div
-          className="modal-container"
           ref={ref => this.modalContainer = ref}
+          className="modal-container"
           style={{ width }}
         >
           {this.props.children}

src/common/components/ModalTwo/Modal.jsx

@@ -69,8 +69,8 @@ export default class Modal extends React.Component {
           onClick={this.handleClose}
         />
         <div
-          className="modal-two-container"
           ref={ref => this.modalContainer = ref}
+          className="modal-two-container"
           style={{ width }}
         >
           {this.props.children}

src/common/components/OiceThumbnail/index.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import './styles.scss';
 
-const OiceThumbnail = (props) => (
+const OiceThumbnail = props => (
   <div
     className="oice-thumbnail"
     style={{ backgroundSize: `${props.size}px` }}

src/common/components/RadioButton.jsx

@@ -50,8 +50,8 @@ export default class RadioButton extends React.Component {
               name={groupName}
               type="radio"
               checked={this.state.selectedValue === value}
-              onChange={() => this.handleChange(index, value)}
               value={value}
+              onChange={() => this.handleChange(index, value)}
             />
             <label htmlFor={`radio-input-${index}`}>{value}</label> {/* eslint-disable-line */}
           </div>

src/common/components/Tabs.jsx

@@ -31,7 +31,7 @@ export default class Tabs extends React.Component {
     if (value) this.setState({ selectedIndex: value });
   }
 
-  handleOnTabItemClick = selectedIndex => {
+  handleOnTabItemClick = (selectedIndex) => {
     this.setState({ selectedIndex });
     if (this.props.onChange) this.props.onChange(selectedIndex);
   }

src/common/components/TextField.jsx

@@ -115,11 +115,12 @@ export default class TextField extends React.Component {
     if (multiLine) {
       return (
         <textarea
-          cols="50"
           ref={ref => this.input = ref}
+          cols="50"
           rows="4"
           {...props}
-        />);
+        />
+      );
     }
     return (
       <input

src/common/components/UsersDropdown/index.jsx

@@ -78,7 +78,7 @@ export default class UsersDropdown extends React.Component {
   handleChange = (selectedIndexes) => {
     const selectedUsers = [];
     const users = this.getUsers();
-    selectedIndexes.forEach(index => {
+    selectedIndexes.forEach((index) => {
       selectedUsers.push(users[index]);
     });
     this.setState({
@@ -109,7 +109,7 @@ export default class UsersDropdown extends React.Component {
       selectedUsers,
     } = this.state;
 
-    const values = this.getUsers().map((user) => ({
+    const values = this.getUsers().map(user => ({
       icon: user.avatar,
       text: user.displayName,
     }));

src/editor/components/AssetsManagementPanel/LibrariesCollection/LibraryCard.jsx

@@ -96,7 +96,7 @@ export default class LibraryCard extends React.Component {
         {onSelect &&
           <TriangleLabel
             icon={<CheckCircleIcon />}
-            reference={(ref) => this.selectLabel = ref}
+            reference={ref => this.selectLabel = ref}
             selected={this.state.selected}
             onClick={this.handleSelect}
           />

src/editor/components/AssetsManagementPanel/LibrariesCollection/index.jsx

@@ -20,18 +20,14 @@ import {
   removeLibraryFromStory,
 } from 'editor/actions/library';
 
-import {
-  toggleLibraryModal,
-} from '../LibraryModal/redux.js';
+import { toggleLibraryModal } from '../LibraryModal/redux.js';
 
-import {
-  selectLibrary,
-} from '../LibraryPanel/actions.js';
+import { selectLibrary } from '../LibraryPanel/actions.js';
 
 import './styles.scss';
 
 @translate('library')
-@connect((store) => ({
+@connect(store => ({
   ...store.librariesCollection,
   userId: store.user.id,
 }))
@@ -54,14 +50,14 @@ export default class LibrariesCollection extends React.Component {
   }
 
   componentDidMount() {
-    const storyId = this.props.params.storyId;
+    const { storyId } = this.props.params;
     console.log('componentDidMount %s', storyId);
     this.props.dispatch(
       storyId ? fetchLibrariesByStory(storyId) : fetchLibraries()
     );
   }
 
-  onClickUseAsset = obj => {
+  onClickUseAsset = (obj) => {
     const { selectedAssets } = this.state;
     if (!selectedAssets.contains(obj)) {
       selectedAssets.push(obj);
@@ -86,8 +82,8 @@ export default class LibrariesCollection extends React.Component {
     if (storyId) {
       this.props.dispatch(
         !selected ?
-        addLibraryToStory(storyId, libraryId) :
-        removeLibraryFromStory(storyId, libraryId)
+          addLibraryToStory(storyId, libraryId) :
+          removeLibraryFromStory(storyId, libraryId)
       );
     }
   }

src/editor/components/AssetsManagementPanel/LibraryAssetThumbnail.jsx

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import AddIcon from 'common/icons/add';
 
 export default class LibraryAssetThumbnail extends React.Component {
-
   // constructor(props) {
   //   super(props);
   //   this.state = {

src/editor/components/AssetsManagementPanel/LibraryModal/index.jsx

@@ -16,27 +16,25 @@ import TextField from 'ui-elements/TextField';
 
 import InteractiveTutorial from 'editor/components/InteractiveTutorial';
 
-const defaultLibraryState = {
-  name: '',
-  description: '',
-  license: 0,
-  coverStorage: '',
-  isPublic: false,
-};
-
 import {
   addLibrary,
   deleteLibrary,
   updateLibrary,
   toggleLibraryModal,
 } from './redux';
 
-import {
-  updateUserTutorialState,
-} from 'editor/components/InteractiveTutorial/actions';
+import { updateUserTutorialState } from 'editor/components/InteractiveTutorial/actions';
 
 import './styles.scss';
 
+const defaultLibraryState = {
+  name: '',
+  description: '',
+  license: 0,
+  coverStorage: '',
+  isPublic: false,
+};
+
 @translate(['assetsManagement', 'general'])
 @connect((store) => {
   const { open, library } = store.libraryModal;
@@ -48,7 +46,6 @@ import './styles.scss';
   };
 })
 export default class LibraryModal extends React.Component {
-
   static propTypes = {
     dispatch: PropTypes.func.isRequired,
     open: PropTypes.bool.isRequired,
@@ -57,10 +54,6 @@ export default class LibraryModal extends React.Component {
     tutorialState: PropTypes.array,
   }
 
-  static defaultProps = {
-    open: false,
-  }
-
   constructor(props) {
     super(props);
     const { library } = props;
@@ -146,7 +139,7 @@ export default class LibraryModal extends React.Component {
 
     const fileReader = new FileReader();
     fileReader.readAsDataURL(coverImage);
-    fileReader.onload = event => {
+    fileReader.onload = (event) => {
       const imageFileSrc = event.target.result;
       // for call api
       library.coverImage = coverImage;

src/editor/components/AssetsManagementPanel/LibraryPanel/AssetsGridList.jsx

@@ -39,16 +39,13 @@ const getAssetThumbnailURL = (asset, type) => {
   let sync = true;
   switch (ownProps.type) {
     case ASSET_TYPE.CHARACTER:
-      assets = libraryPanel.charactersList.characters;
-      sync = libraryPanel.charactersList.sync;
+      ({ characters: assets, sync } = libraryPanel.charactersList);
       break;
     case ASSET_TYPE.ITEM:
-      assets = libraryPanel.itemsList.items;
-      sync = libraryPanel.itemsList.sync;
+      ({ items: assets, sync } = libraryPanel.itemsList);
       break;
     case ASSET_TYPE.BACKGROUND:
-      assets = libraryPanel.backgroundsList.backgrounds;
-      sync = libraryPanel.backgroundsList.sync;
+      ({ backgrounds: assets, sync } = libraryPanel.backgroundsList);
       break;
     default:
       break;
@@ -61,7 +58,6 @@ const getAssetThumbnailURL = (asset, type) => {
   };
 })
 export default class AssetsGridList extends React.Component {
-
   static propTypes = {
     assets: PropTypes.array.isRequired,
     dispatch: PropTypes.func.isRequired,

src/editor/components/AssetsManagementPanel/LibraryPanel/AudioList.jsx

@@ -12,12 +12,8 @@ import AddIcon from 'common/icons/add';
 import UploadAudioAssetModal from './UploadAudioAssetModal';
 import EditAudioAssetModal from './EditAudioAssetModal';
 
-import {
-  toggleUploadAudioAssetModal,
-} from './UploadAudioAssetModal/actions';
-import {
-  toggleEditAudioAssetModal,
-} from './EditAudioAssetModal/redux';
+import { toggleUploadAudioAssetModal } from './UploadAudioAssetModal/actions';
+import { toggleEditAudioAssetModal } from './EditAudioAssetModal/redux';
 
 import * as ASSET_TYPE from 'common/constants/assetTypes';
 import { getAudioMp4Url } from 'editor/utils/app';
@@ -35,14 +31,14 @@ import {
   let sync = true;
   switch (ownProps.type) {
     case ASSET_TYPE.MUSIC:
-      loading = libraryPanel.BGMsList.loading;
-      sounds = libraryPanel.BGMsList.BGMs;
-      sync = libraryPanel.BGMsList.sync;
+      ({ loading, sync, BGMs: sounds } = libraryPanel.BGMsList);
       break;
     case ASSET_TYPE.SOUND:
-      loading = libraryPanel.SEsList.loading;
-      sounds = libraryPanel.SEsList.SEs;
-      sync = libraryPanel.SEsList.sync;
+      ({
+        loading,
+        SEs: sounds,
+        sync,
+      } = libraryPanel.SEsList);
       break;
     default:
       break;