From 71730bd6b911658203f5165d50ef33c7cecc36d8 Mon Sep 17 00:00:00 2001
From: William Chong <me@williamchong.cloud>
Date: Tue, 12 Sep 2023 00:18:01 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A8=20Auto=20fix=20lint=20error?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc                                     |  1 +
 package.json                                  |  2 +-
 src/IndexHTML.jsx                             |  2 +-
 .../EditCharacterNamesPanel.jsx               |  4 +-
 .../views/CharacterModal/FGImagesList.jsx     |  4 +-
 src/common/components/ButtonGroup.jsx         |  2 -
 src/common/components/ColorPicker.jsx         |  2 +-
 src/common/components/GridList/index.jsx      |  6 +-
 src/common/components/Modal/index.jsx         |  2 +-
 src/common/components/ModalTwo/Modal.jsx      |  2 +-
 src/common/components/OiceThumbnail/index.jsx |  2 +-
 src/common/components/RadioButton.jsx         |  2 +-
 src/common/components/Tabs.jsx                |  2 +-
 src/common/components/TextField.jsx           |  5 +-
 src/common/components/UsersDropdown/index.jsx |  4 +-
 .../LibrariesCollection/LibraryCard.jsx       |  2 +-
 .../LibrariesCollection/index.jsx             | 18 +++---
 .../LibraryAssetThumbnail.jsx                 |  1 -
 .../LibraryModal/index.jsx                    | 27 +++-----
 .../LibraryPanel/AssetsGridList.jsx           | 10 +--
 .../LibraryPanel/AudioList.jsx                | 20 +++---
 .../LibraryPanel/BackgroundModal/index.jsx    | 16 +++--
 .../CharacterPositionPreview.jsx              |  2 +-
 .../CharacterModal/CoordinateConfigPanel.jsx  |  2 +-
 .../EditCharacterNamesPanel.jsx               | 14 ++---
 .../CharacterModal/FGImageRow.jsx             |  4 +-
 .../CharacterModal/FGImagesList.jsx           | 61 ++++++++++---------
 .../CharacterModal/ModalFooter.jsx            |  4 +-
 .../CharacterModal/ModalHeader.jsx            |  4 +-
 .../LibraryPanel/CharacterModal/index.jsx     | 14 ++---
 .../EditAudioAssetModal/index.jsx             |  9 +--
 .../LibraryPanel/ItemModal/index.jsx          | 14 ++---
 .../UploadAudioAssetModal/index.jsx           | 16 ++---
 .../LibraryPanel/index.jsx                    | 10 ++-
 .../LibraryThumbnail.jsx                      |  1 -
 .../AssetsManagementPanel/NavBar/index.jsx    |  6 +-
 .../AttributesPanel/AttributeRow/index.jsx    |  8 +--
 .../EditorPanel/BlocksPanel/index.jsx         | 16 ++---
 .../EditorPanel/ExportOiceModal/index.jsx     |  4 +-
 .../ImportScriptModal/ImportScriptModal.jsx   |  4 +-
 .../EditorPanel/RunOiceModal/index.jsx        |  7 ++-
 .../OiceListTab/OiceBlock.jsx                 |  2 +-
 .../StoryOiceBrowser/OiceListTab/index.jsx    |  3 +-
 .../StoryOiceBrowser/StoryListTab/Row.jsx     |  2 +-
 .../StoryOiceBrowser/StoryListTab/index.jsx   |  2 +-
 .../EditorPanel/StoryOiceBrowser/index.jsx    |  4 +-
 .../EditorPanel/StoryPicker/index.jsx         |  2 +-
 .../StorySettingModal/OiceBlock.jsx           |  2 +-
 src/ui-demo/components/ButtonGroup.jsx        | 22 +++----
 src/ui-demo/components/Dropdown.jsx           |  4 +-
 src/ui-demo/components/GridList.jsx           |  2 +-
 src/ui-demo/components/Modal.jsx              |  6 +-
 src/ui-demo/components/RaisedButton.jsx       | 12 ++--
 src/ui-demo/components/TextField.jsx          |  2 +-
 src/web/pages/Home/LicenseSection.jsx         |  1 +
 .../pages/OiceSingleView/OiceSingleView.jsx   |  2 +-
 src/web/pages/User/index.jsx                  |  2 +-
 57 files changed, 186 insertions(+), 220 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 1740743e..da1c577a 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -56,6 +56,7 @@
       "initializations"
     ],
     "react/forbid-prop-types": 0,
+    "react/jsx-no-bind": 0,
     "react/jsx-sort-props": [
       1,
       {
diff --git a/package.json b/package.json
index c727506a..d2272a93 100644
--- a/package.json
+++ b/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",
diff --git a/src/IndexHTML.jsx b/src/IndexHTML.jsx
index 0acf1e03..e698f7dc 100644
--- a/src/IndexHTML.jsx
+++ b/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}`} />
diff --git a/src/asset-library/views/CharacterModal/EditCharacterNamesPanel.jsx b/src/asset-library/views/CharacterModal/EditCharacterNamesPanel.jsx
index 595c454b..20cd8326 100644
--- a/src/asset-library/views/CharacterModal/EditCharacterNamesPanel.jsx
+++ b/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>
diff --git a/src/asset-library/views/CharacterModal/FGImagesList.jsx b/src/asset-library/views/CharacterModal/FGImagesList.jsx
index d2a0b9ed..6b6db049 100644
--- a/src/asset-library/views/CharacterModal/FGImagesList.jsx
+++ b/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>
diff --git a/src/common/components/ButtonGroup.jsx b/src/common/components/ButtonGroup.jsx
index 046eb85d..954a3a41 100644
--- a/src/common/components/ButtonGroup.jsx
+++ b/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;
       }
     });
 
diff --git a/src/common/components/ColorPicker.jsx b/src/common/components/ColorPicker.jsx
index 55391331..81055ac9 100644
--- a/src/common/components/ColorPicker.jsx
+++ b/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>
diff --git a/src/common/components/GridList/index.jsx b/src/common/components/GridList/index.jsx
index 4e0afbbf..c1a00df5 100644
--- a/src/common/components/GridList/index.jsx
+++ b/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,
diff --git a/src/common/components/Modal/index.jsx b/src/common/components/Modal/index.jsx
index 47785794..478540fa 100644
--- a/src/common/components/Modal/index.jsx
+++ b/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}
diff --git a/src/common/components/ModalTwo/Modal.jsx b/src/common/components/ModalTwo/Modal.jsx
index 65a7b057..542cdd39 100644
--- a/src/common/components/ModalTwo/Modal.jsx
+++ b/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}
diff --git a/src/common/components/OiceThumbnail/index.jsx b/src/common/components/OiceThumbnail/index.jsx
index 790e9a29..639ee0ec 100644
--- a/src/common/components/OiceThumbnail/index.jsx
+++ b/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` }}
diff --git a/src/common/components/RadioButton.jsx b/src/common/components/RadioButton.jsx
index 0fe65c19..a3494b2c 100644
--- a/src/common/components/RadioButton.jsx
+++ b/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>
diff --git a/src/common/components/Tabs.jsx b/src/common/components/Tabs.jsx
index 398940be..9b76db79 100644
--- a/src/common/components/Tabs.jsx
+++ b/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);
   }
diff --git a/src/common/components/TextField.jsx b/src/common/components/TextField.jsx
index e5110ee8..3bf32e16 100644
--- a/src/common/components/TextField.jsx
+++ b/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
diff --git a/src/common/components/UsersDropdown/index.jsx b/src/common/components/UsersDropdown/index.jsx
index 0f499626..52bcc2f0 100644
--- a/src/common/components/UsersDropdown/index.jsx
+++ b/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,
     }));
diff --git a/src/editor/components/AssetsManagementPanel/LibrariesCollection/LibraryCard.jsx b/src/editor/components/AssetsManagementPanel/LibrariesCollection/LibraryCard.jsx
index e0cce6e0..0b3817ac 100644
--- a/src/editor/components/AssetsManagementPanel/LibrariesCollection/LibraryCard.jsx
+++ b/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}
           />
diff --git a/src/editor/components/AssetsManagementPanel/LibrariesCollection/index.jsx b/src/editor/components/AssetsManagementPanel/LibrariesCollection/index.jsx
index 6d011780..70a136bb 100644
--- a/src/editor/components/AssetsManagementPanel/LibrariesCollection/index.jsx
+++ b/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)
       );
     }
   }
diff --git a/src/editor/components/AssetsManagementPanel/LibraryAssetThumbnail.jsx b/src/editor/components/AssetsManagementPanel/LibraryAssetThumbnail.jsx
index 743d369a..eb446677 100644
--- a/src/editor/components/AssetsManagementPanel/LibraryAssetThumbnail.jsx
+++ b/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 = {
diff --git a/src/editor/components/AssetsManagementPanel/LibraryModal/index.jsx b/src/editor/components/AssetsManagementPanel/LibraryModal/index.jsx
index 7a9f45be..523b9c7b 100644
--- a/src/editor/components/AssetsManagementPanel/LibraryModal/index.jsx
+++ b/src/editor/components/AssetsManagementPanel/LibraryModal/index.jsx
@@ -16,14 +16,6 @@ import TextField from 'ui-elements/TextField';
 
 import InteractiveTutorial from 'editor/components/InteractiveTutorial';
 
-const defaultLibraryState = {
-  name: '',
-  description: '',
-  license: 0,
-  coverStorage: '',
-  isPublic: false,
-};
-
 import {
   addLibrary,
   deleteLibrary,
@@ -31,12 +23,18 @@ import {
   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;
diff --git a/src/editor/components/AssetsManagementPanel/LibraryPanel/AssetsGridList.jsx b/src/editor/components/AssetsManagementPanel/LibraryPanel/AssetsGridList.jsx
index 1a4d6932..3c3178b7 100644
--- a/src/editor/components/AssetsManagementPanel/LibraryPanel/AssetsGridList.jsx
+++ b/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,
diff --git a/src/editor/components/AssetsManagementPanel/LibraryPanel/AudioList.jsx b/src/editor/components/AssetsManagementPanel/LibraryPanel/AudioList.jsx
index 2ad98655..cfedcf59 100644
--- a/src/editor/components/AssetsManagementPanel/LibraryPanel/AudioList.jsx
+++ b/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;
diff --git a/src/editor/components/AssetsManagementPanel/LibraryPanel/BackgroundModal/index.jsx b/src/editor/components/AssetsManagementPanel/LibraryPanel/BackgroundModal/index.jsx
index f7cda52e..188883d6 100644
--- a/src/editor/components/AssetsManagementPanel/LibraryPanel/BackgroundModal/index.jsx
+++ b/src/editor/components/AssetsManagementPanel/LibraryPanel/BackgroundModal/index.jsx
@@ -16,9 +16,7 @@ import RaisedButton from 'ui-elements/RaisedButton';
 import TextField from 'ui-elements/TextField';
 import UsersDropdown from 'ui-elements/UsersDropdown';
 
-import {
-  toggleBackgroundModal,
-} from './redux';
+import { toggleBackgroundModal } from './redux';
 
 import {
   addAsset,
@@ -36,7 +34,7 @@ const defaultBackgroundState = {
   users: [],
 };
 
-const getStateFromProps = (props) => ({
+const getStateFromProps = props => ({
   imgRatio: {
     x: 1,
     y: 1,
@@ -49,7 +47,7 @@ const getStateFromProps = (props) => ({
 });
 
 @translate(['assetsManagement', 'assets'])
-@connect(store => {
+@connect((store) => {
   const { open, background } = store.libraryPanel.backgroundModal;
   const { selectedLibrary } = store.libraryPanel;
   const { user } = store;
@@ -107,8 +105,8 @@ export default class BackgroundModal extends React.Component {
     const imageFile = this.imageCropper.getImageFile();
     this.props.dispatch(
       isAdding ?
-      addAsset(background, imageFile, ASSET_TYPE.BACKGROUND) :
-      updateAsset(background, imageFile, ASSET_TYPE.BACKGROUND)
+        addAsset(background, imageFile, ASSET_TYPE.BACKGROUND) :
+        updateAsset(background, imageFile, ASSET_TYPE.BACKGROUND)
     );
   }
 
@@ -155,8 +153,8 @@ export default class BackgroundModal extends React.Component {
     const { background, hasUploadedImage } = this.state;
     return (
       <ImageCropper
-        readonly={readonly}
         ref={ref => this.imageCropper = ref}
+        readonly={readonly}
         src={background.url}
         onReady={this.handleReady}
       />
@@ -221,7 +219,7 @@ export default class BackgroundModal extends React.Component {
                   readonly={limitedMode}
                   value={background.nameEn}
                   fullWidth
-                  onChange={(e) => this.handleNameChange(e, 'nameEn')}
+                  onChange={e => this.handleNameChange(e, 'nameEn')}
                 />
                 {/* <TextField
                   placeholder={t('bgModal.placeholder.name.tw')}
diff --git a/src/editor/components/AssetsManagementPanel/LibraryPanel/CharacterModal/CharacterPositionPreview.jsx b/src/editor/components/AssetsManagementPanel/LibraryPanel/CharacterModal/CharacterPositionPreview.jsx
index f74156aa..5936ec45 100644
--- a/src/editor/components/AssetsManagementPanel/LibraryPanel/CharacterModal/CharacterPositionPreview.jsx
+++ b/src/editor/components/AssetsManagementPanel/LibraryPanel/CharacterModal/CharacterPositionPreview.jsx
@@ -13,7 +13,7 @@ import {
   POSITIONS,
   POSITIONS_LIST,
   COORDINATE_LIST,
- } from 'editor/constants/character';
+} from 'editor/constants/character';
 
 import {
   updateSelectedPosition,
diff --git a/src/editor/components/AssetsManagementPanel/LibraryPanel/CharacterModal/CoordinateConfigPanel.jsx b/src/editor/components/AssetsManagementPanel/LibraryPanel/CharacterModal/CoordinateConfigPanel.jsx
index 8bc04513..eb585340 100644
--- a/src/editor/components/AssetsManagementPanel/LibraryPanel/CharacterModal/CoordinateConfigPanel.jsx
+++ b/src/editor/components/AssetsManagementPanel/LibraryPanel/CharacterModal/CoordinateConfigPanel.jsx
@@ -89,7 +89,7 @@ export default class CoordinateConfigPanel extends React.Component {
             selected: (selectedPosition === position),
           });
           return (
-            <div className={className} key={position}>
+            <div key={position} className={className}>
               <div className="character-modal-panel-config-coordinate-title">
                 {t(`characterModal.label.coordinate.${position}`)}
               </div>
diff --git a/src/editor/components/AssetsManagementPanel/LibraryPanel/CharacterModal/EditCharacterNamesPanel.jsx b/src/editor/components/AssetsManagementPanel/LibraryPanel/CharacterModal/EditCharacterNamesPanel.jsx
index d9665a23..f9c81059 100644
--- a/src/editor/components/AssetsManagementPanel/LibraryPanel/CharacterModal/EditCharacterNamesPanel.jsx
+++ b/src/editor/components/AssetsManagementPanel/LibraryPanel/CharacterModal/EditCharacterNamesPanel.jsx
@@ -6,9 +6,7 @@ import { translate } from 'react-i18next';
 import TextField from 'ui-elements/TextField';
 import CheckBox from 'ui-elements/Checkbox';
 
-import {
-  updateCharacterKeyValue,
-} from './actions';
+import { updateCharacterKeyValue } from './actions';
 
 const languageCodes = [
   'En',
@@ -16,10 +14,10 @@ const languageCodes = [
   'Jp',
 ];
 
-const getLanguageKey = (code) => `name${code}`;
+const getLanguageKey = code => `name${code}`;
 
 @translate(['assetsManagement', 'editor'])
-@connect((store) => ({
+@connect(store => ({
   character: store.libraryPanel.characterModal.character,
 }))
 export default class EditCharacterNamesPanel extends React.Component {
@@ -33,7 +31,7 @@ export default class EditCharacterNamesPanel extends React.Component {
     this.props.dispatch(updateCharacterKeyValue({ key, value }));
   }
 
-  handleChangeGenericValue = (value) => this.handleChange('isGeneric', value)
+  handleChangeGenericValue = value => this.handleChange('isGeneric', value)
 
   render() {
     const { character, t } = this.props;
@@ -46,8 +44,8 @@ export default class EditCharacterNamesPanel extends React.Component {
           const key = getLanguageKey(code);
           return (
             <div
-              className="character-modal-panel-name-language"
               key={key}
+              className="character-modal-panel-name-language"
             >
               {/* <div className="character-modal-panel-language-title">
                 {t(`characterModal.label.${key}`)}
@@ -58,7 +56,7 @@ export default class EditCharacterNamesPanel extends React.Component {
                   value={character[key]}
                   border
                   fullWidth
-                  onChange={(value) => this.handleChange(key, value)}
+                  onChange={value => this.handleChange(key, value)}
                 />
               </div>
             </div>
diff --git a/src/editor/components/AssetsManagementPanel/LibraryPanel/CharacterModal/FGImageRow.jsx b/src/editor/components/AssetsManagementPanel/LibraryPanel/CharacterModal/FGImageRow.jsx
index e0f0a43c..79497bb9 100644
--- a/src/editor/components/AssetsManagementPanel/LibraryPanel/CharacterModal/FGImageRow.jsx
+++ b/src/editor/components/AssetsManagementPanel/LibraryPanel/CharacterModal/FGImageRow.jsx
@@ -82,8 +82,8 @@ export default class FGImageRow extends React.Component {
 
     return (
       <div
-        className={className}
         ref={e => this.row = e}
+        className={className}
         onClick={this.handleOnSelect}
       >
         <ImageUpload
@@ -126,8 +126,8 @@ export default class FGImageRow extends React.Component {
           !limitedMode &&
             <div className="fg-row-cross-button">
               <FlatButton
-                icon={<CloseIcon />}
                 ref={e => this.closeButton = e}
+                icon={<CloseIcon />}
                 onClick={this.handleDeleteButtonClick}
               />
             </div>
diff --git a/src/editor/components/AssetsManagementPanel/LibraryPanel/CharacterModal/FGImagesList.jsx b/src/editor/components/AssetsManagementPanel/LibraryPanel/CharacterModal/FGImagesList.jsx
index 561462e3..fd71ce0a 100644
--- a/src/editor/components/AssetsManagementPanel/LibraryPanel/CharacterModal/FGImagesList.jsx
+++ b/src/editor/components/AssetsManagementPanel/LibraryPanel/CharacterModal/FGImagesList.jsx
@@ -34,7 +34,8 @@ const getFgimageObjectWithURL = url => ({
 
 @translate(['assetsManagement', 'editor'])
 @connect((store) => {
-  const { fgimages,
+  const {
+    fgimages,
     character,
     fgImages,
     selectedFgIndex,
@@ -88,35 +89,35 @@ export default class FGImagesList extends React.Component {
     } = character;
 
     const promises = [...target.files]
-    .map((file, index) => new Promise((resolve) => {
-      const fileReader = new FileReader();
-      fileReader.onload = (event) => {
-        const src = event.target.result;
-        const image = new Image();
-        image.src = src;
-        image.onload = () => {
-          if (index === 0 && fgImages.length === 0) {
+      .map((file, index) => new Promise((resolve) => {
+        const fileReader = new FileReader();
+        fileReader.onload = (event) => {
+          const src = event.target.result;
+          const image = new Image();
+          image.src = src;
+          image.onload = () => {
+            if (index === 0 && fgImages.length === 0) {
             // Use the first FG image size as character size
-            dispatch(updateCharacterSize({
-              width: image.width,
-              height: image.height,
-            }));
-          }
-          resolve({
-            meta: {
-              name: getFilename(file.name),
-              users: [user],
-            },
-            src: image.src,
-            file,
-            sync: false,
-          });
+              dispatch(updateCharacterSize({
+                width: image.width,
+                height: image.height,
+              }));
+            }
+            resolve({
+              meta: {
+                name: getFilename(file.name),
+                users: [user],
+              },
+              src: image.src,
+              file,
+              sync: false,
+            });
+          };
         };
-      };
-      fileReader.readAsDataURL(file);
-    }));
+        fileReader.readAsDataURL(file);
+      }));
 
-    Promise.all(promises).then((results) => dispatch(addFGImages(results)));
+    Promise.all(promises).then(results => dispatch(addFGImages(results)));
     // if (image.width !== width || image.height !== height) {
     //   dispatch(toggleAlertDialog({
     //     open: true,
@@ -179,9 +180,9 @@ export default class FGImagesList extends React.Component {
     } = this.props;
     return fgImages.map((fgImage, index) => (
       <FGImageRow
+        key={index}
         fgImage={fgImage}
         index={index}
-        key={index}
         limitedMode={limitedMode}
         selected={selectedFgIndex === index}
         onCreditsChange={this.handleCreditsChange}
@@ -200,8 +201,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
@@ -216,7 +217,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>
diff --git a/src/editor/components/AssetsManagementPanel/LibraryPanel/CharacterModal/ModalFooter.jsx b/src/editor/components/AssetsManagementPanel/LibraryPanel/CharacterModal/ModalFooter.jsx
index 0a10bd10..fddd857d 100644
--- a/src/editor/components/AssetsManagementPanel/LibraryPanel/CharacterModal/ModalFooter.jsx
+++ b/src/editor/components/AssetsManagementPanel/LibraryPanel/CharacterModal/ModalFooter.jsx
@@ -29,7 +29,7 @@ import AlertDialog from 'ui-elements/AlertDialog';
 import './styles.scss';
 
 
-const isInteger = (value) => Number.isInteger(value) || value === '';
+const isInteger = value => Number.isInteger(value) || value === '';
 
 @translate(['assetsManagement', 'editor'])
 @connect((store) => {
@@ -148,7 +148,7 @@ export default class CharacterModal extends React.Component {
         onClick={this.handleDeleteButtonClick}
       />
     );
-    const isSomeFgImageHasNoCredit = fgImages.some((fgImage) => (!fgImage.meta.users || fgImage.meta.users.length === 0));
+    const isSomeFgImageHasNoCredit = fgImages.some(fgImage => (!fgImage.meta.users || fgImage.meta.users.length === 0));
     const confirmButton = (!limitedMode &&
       <RaisedButton
         disabled={loading || isSomeFgImageHasNoCredit}
diff --git a/src/editor/components/AssetsManagementPanel/LibraryPanel/CharacterModal/ModalHeader.jsx b/src/editor/components/AssetsManagementPanel/LibraryPanel/CharacterModal/ModalHeader.jsx
index 4bbdc92b..ed57ffe2 100644
--- a/src/editor/components/AssetsManagementPanel/LibraryPanel/CharacterModal/ModalHeader.jsx
+++ b/src/editor/components/AssetsManagementPanel/LibraryPanel/CharacterModal/ModalHeader.jsx
@@ -29,7 +29,7 @@ import AlertDialog from 'ui-elements/AlertDialog';
 import './styles.scss';
 
 
-const isInteger = (value) => Number.isInteger(value) || value === '';
+const isInteger = value => Number.isInteger(value) || value === '';
 
 @translate(['assetsManagement', 'editor'])
 @connect((store) => {
@@ -72,8 +72,8 @@ export default class CharacterModal extends React.Component {
 
     return (
       <Modal.Header
-        onClickCloseButton={this.handleCloseButtonClick}
         loading={loading}
+        onClickCloseButton={this.handleCloseButtonClick}
       >
         {limitedMode ? t('characterModal.title.view') : t(`characterModal.title.${editing ? 'edit' : 'add'}`)}
       </Modal.Header>
diff --git a/src/editor/components/AssetsManagementPanel/LibraryPanel/CharacterModal/index.jsx b/src/editor/components/AssetsManagementPanel/LibraryPanel/CharacterModal/index.jsx
index 93a88463..5ade8860 100644
--- a/src/editor/components/AssetsManagementPanel/LibraryPanel/CharacterModal/index.jsx
+++ b/src/editor/components/AssetsManagementPanel/LibraryPanel/CharacterModal/index.jsx
@@ -30,7 +30,7 @@ import AlertDialog from 'ui-elements/AlertDialog';
 import './styles.scss';
 
 
-const isInteger = (value) => Number.isInteger(value) || value === '';
+const isInteger = value => Number.isInteger(value) || value === '';
 
 @translate(['assetsManagement', 'editor'])
 @connect((store) => {
@@ -68,10 +68,6 @@ export default class CharacterModal extends React.Component {
     limitedMode: PropTypes.bool,
   }
 
-  static defaultProps = {
-    loading: false,
-  }
-
   shouldComponentUpdate(nextProps) {
     if (
       (nextProps.open === this.props.open) &&
@@ -87,7 +83,9 @@ export default class CharacterModal extends React.Component {
   }
 
   renderExpansionPanel() {
-    const { character, expanded, limitedMode, t } = this.props;
+    const {
+      character, expanded, limitedMode, t,
+    } = this.props;
     return (
       !limitedMode &&
       <ExpansionPanel
@@ -106,7 +104,9 @@ export default class CharacterModal extends React.Component {
   }
 
   render() {
-    const { character, limitedMode, open, t } = this.props;
+    const {
+      character, limitedMode, open, t,
+    } = this.props;
     return (
       <Modal
         id="character-modal"
diff --git a/src/editor/components/AssetsManagementPanel/LibraryPanel/EditAudioAssetModal/index.jsx b/src/editor/components/AssetsManagementPanel/LibraryPanel/EditAudioAssetModal/index.jsx
index 0dcbf1de..0f782846 100644
--- a/src/editor/components/AssetsManagementPanel/LibraryPanel/EditAudioAssetModal/index.jsx
+++ b/src/editor/components/AssetsManagementPanel/LibraryPanel/EditAudioAssetModal/index.jsx
@@ -20,9 +20,7 @@ import CloseIcon from 'common/icons/close';
 
 import * as ASSET_TYPE from 'common/constants/assetTypes';
 
-import {
-  toggleEditAudioAssetModal,
-} from './redux';
+import { toggleEditAudioAssetModal } from './redux';
 
 import { getAudioMp4Url } from 'editor/utils/app';
 
@@ -44,7 +42,7 @@ const getStateFromProps = ({ asset }) => {
 
 
 @translate(['assetsManagement', 'general', 'EditAudioAssetModal'])
-@connect((store) => ({ ...store.libraryPanel.editAudioAssetModal }))
+@connect(store => ({ ...store.libraryPanel.editAudioAssetModal }))
 export default class EditAudioAssetModal extends React.Component {
   static propTypes = {
     dispatch: PropTypes.func.isRequired,
@@ -57,7 +55,6 @@ export default class EditAudioAssetModal extends React.Component {
   }
 
   static defaultProps = {
-    open: false,
     readonly: true,
   }
 
@@ -232,8 +229,8 @@ export default class EditAudioAssetModal extends React.Component {
             <Form.Section>
               <Form.Section.Main>
                 <input
+                  ref={ref => this.audioUpload = ref}
                   accept="audio/x-wav"
-                  ref={(ref) => this.audioUpload = ref}
                   style={{ display: 'none' }}
                   type="file"
                   onChange={this.handleAudioUploadChange}
diff --git a/src/editor/components/AssetsManagementPanel/LibraryPanel/ItemModal/index.jsx b/src/editor/components/AssetsManagementPanel/LibraryPanel/ItemModal/index.jsx
index 86d04c83..ac9b3638 100644
--- a/src/editor/components/AssetsManagementPanel/LibraryPanel/ItemModal/index.jsx
+++ b/src/editor/components/AssetsManagementPanel/LibraryPanel/ItemModal/index.jsx
@@ -20,9 +20,7 @@ import UploadIcon from 'common/icons/upload';
 import AddIcon from 'common/icons/add';
 import AlertDialog from 'ui-elements/AlertDialog';
 
-import {
-  toggleItemModal,
-} from './redux';
+import { toggleItemModal } from './redux';
 
 import {
   addAsset,
@@ -40,7 +38,7 @@ const defaultBackgroundState = {
   users: [],
 };
 
-const getStateFromProps = (props) => ({
+const getStateFromProps = props => ({
   imgRatio: {
     x: 1,
     y: 1,
@@ -53,7 +51,7 @@ const getStateFromProps = (props) => ({
 });
 
 @translate(['assetsManagement', 'assets'])
-@connect(store => {
+@connect((store) => {
   const { open, item } = store.libraryPanel.itemModal;
   const { selectedLibrary } = store.libraryPanel;
   const { user } = store;
@@ -147,8 +145,8 @@ export default class ItemModal extends React.Component {
     console.log('handleConfirmButtonClick', isAdding);
     this.props.dispatch(
       isAdding ?
-      addAsset(asset, imageFile, ASSET_TYPE.ITEM) :
-      updateAsset(asset, imageFile, ASSET_TYPE.ITEM)
+        addAsset(asset, imageFile, ASSET_TYPE.ITEM) :
+        updateAsset(asset, imageFile, ASSET_TYPE.ITEM)
     );
   }
 
@@ -304,7 +302,7 @@ export default class ItemModal extends React.Component {
                   readonly={limitedMode}
                   value={asset.nameEn}
                   fullWidth
-                  onChange={(e) => this.handleNameChange(e, 'nameEn')}
+                  onChange={e => this.handleNameChange(e, 'nameEn')}
                 />
                 {/* <TextField
                   placeholder={t('itemModal.placeholder.name.tw')}
diff --git a/src/editor/components/AssetsManagementPanel/LibraryPanel/UploadAudioAssetModal/index.jsx b/src/editor/components/AssetsManagementPanel/LibraryPanel/UploadAudioAssetModal/index.jsx
index 10886b1d..50159541 100644
--- a/src/editor/components/AssetsManagementPanel/LibraryPanel/UploadAudioAssetModal/index.jsx
+++ b/src/editor/components/AssetsManagementPanel/LibraryPanel/UploadAudioAssetModal/index.jsx
@@ -25,9 +25,7 @@ import {
   removeAudioFile,
 } from './actions';
 
-import {
-  addAssets,
-} from '../actions';
+import { addAssets } from '../actions';
 
 import { getFilename } from '../utils';
 
@@ -59,10 +57,6 @@ export default class UploadAudioAssetModal extends React.Component {
     user: PropTypes.object,
   }
 
-  static defaultProps = {
-    open: false,
-  }
-
   constructor(props) {
     super(props);
     const { audioFiles } = props;
@@ -169,7 +163,7 @@ export default class UploadAudioAssetModal extends React.Component {
     return audioFiles.map((sound, index) => {
       const progress = uploadProgress[index];
       return (
-        <div className="upload-audio-item" key={index} >
+        <div key={index} className="upload-audio-item" >
           <div className="audio-item-header">
             <p>{`${index + 1}. ${sound.file.name}`}</p>
             {!uploading &&
@@ -186,12 +180,12 @@ export default class UploadAudioAssetModal extends React.Component {
             placeholder={t('uploadMusicModal.placeholder.name')}
             value={sound.meta.nameEn}
             fullWidth
-            onChange={(value) => this.handleNameChange(value, index)}
+            onChange={value => this.handleNameChange(value, index)}
           />
           <UsersDropdown
             users={sound.meta.users}
             fullWidth
-            onChange={(users) => this.handleCreditsChange(users, index)}
+            onChange={users => this.handleCreditsChange(users, index)}
           />
           {uploading &&
             <div className="upload-progress">
@@ -222,7 +216,7 @@ export default class UploadAudioAssetModal extends React.Component {
         meta.users &&
         meta.users.length > 0
       )
-    );
+      );
 
     const confirmButton = (
       <RaisedButton
diff --git a/src/editor/components/AssetsManagementPanel/LibraryPanel/index.jsx b/src/editor/components/AssetsManagementPanel/LibraryPanel/index.jsx
index 15aa97a4..e365ff8c 100644
--- a/src/editor/components/AssetsManagementPanel/LibraryPanel/index.jsx
+++ b/src/editor/components/AssetsManagementPanel/LibraryPanel/index.jsx
@@ -35,15 +35,13 @@ import {
   fetchSelectedLibraryById,
   deselectLibrary,
 } from './actions.js';
-import {
-  ownEditPermission,
-} from './utils';
+import { ownEditPermission } from './utils';
 
 import './styles.scss';
 
 @DragDropContext(HTML5Backend)
 @translate(['assetsManagement', 'assets'])
-@connect(store => {
+@connect((store) => {
   const library = store.libraryPanel.selectedLibrary;
   const haveEditPermission = ownEditPermission(library);
   return {
@@ -77,7 +75,7 @@ export default class LibraryPanel extends React.Component {
     this.props.dispatch(deselectLibrary());
   }
 
-  handleTabOnChange = index => {
+  handleTabOnChange = (index) => {
     this.goToAssetType(ASSET_TYPE.LIST[index]);
   }
 
@@ -114,7 +112,7 @@ export default class LibraryPanel extends React.Component {
           break;
       }
       return (
-        <Tab index={index} key={index} title={t(`category.${type}`)}>
+        <Tab key={index} index={index} title={t(`category.${type}`)}>
           {tabContent}
         </Tab>
       );
diff --git a/src/editor/components/AssetsManagementPanel/LibraryThumbnail.jsx b/src/editor/components/AssetsManagementPanel/LibraryThumbnail.jsx
index 31972669..e9106dd2 100644
--- a/src/editor/components/AssetsManagementPanel/LibraryThumbnail.jsx
+++ b/src/editor/components/AssetsManagementPanel/LibraryThumbnail.jsx
@@ -3,7 +3,6 @@ import React, { Component } from 'react';
 import AddIcon from 'common/icons/add';
 
 export default class LibraryThumbnail extends React.Component {
-
   constructor(props) {
     super(props);
     this.state = {
diff --git a/src/editor/components/AssetsManagementPanel/NavBar/index.jsx b/src/editor/components/AssetsManagementPanel/NavBar/index.jsx
index a66a75bf..780eb816 100644
--- a/src/editor/components/AssetsManagementPanel/NavBar/index.jsx
+++ b/src/editor/components/AssetsManagementPanel/NavBar/index.jsx
@@ -12,7 +12,7 @@ import './styles.scss';
 
 
 @translate()
-@connect((store) => ({
+@connect(store => ({
   library: store.libraryPanel.selectedLibrary,
   oice: store.oices.selected,
   story: store.stories.selected,
@@ -29,7 +29,9 @@ export default class AssetNavBar extends React.Component {
   };
 
   render() {
-    const { library, oice, story, t, user } = this.props;
+    const {
+      library, oice, story, t, user,
+    } = this.props;
 
     return (
       <NavBar id="assets-management-nav-bar" showLogo={false} user={user}>
diff --git a/src/editor/components/EditorPanel/AttributesPanel/AttributeRow/index.jsx b/src/editor/components/EditorPanel/AttributesPanel/AttributeRow/index.jsx
index f9f36166..48877b56 100644
--- a/src/editor/components/EditorPanel/AttributesPanel/AttributeRow/index.jsx
+++ b/src/editor/components/EditorPanel/AttributesPanel/AttributeRow/index.jsx
@@ -283,14 +283,14 @@ export default class AttributeRow extends React.Component {
           }
           return (
             <TextField
+              ref={ref => this.textField = ref}
               fullWidth={fullWidth}
               maxLength={300}
               placeholder={paragraphAttributePlaceHolder}
-              ref={ref => this.textField = ref}
               value={attributeValue}
               multiLine
               showCharactersCount
-              onChange={(value) => this.handleUpdateAttribute(value, assetType)}
+              onChange={value => this.handleUpdateAttribute(value, assetType)}
             />
           );
         }
@@ -322,11 +322,11 @@ export default class AttributeRow extends React.Component {
             default:
               return (
                 <TextField
+                  ref={ref => this.textField = ref}
                   fullWidth={fullWidth}
                   placeholder={t('stringTypeAttributePlaceholder')}
-                  ref={ref => this.textField = ref}
                   value={attributeValue}
-                  onChange={(value) => this.handleUpdateAttribute(value, assetType)}
+                  onChange={value => this.handleUpdateAttribute(value, assetType)}
                 />
               );
           }
diff --git a/src/editor/components/EditorPanel/BlocksPanel/index.jsx b/src/editor/components/EditorPanel/BlocksPanel/index.jsx
index 6a898b3c..dc84db0a 100644
--- a/src/editor/components/EditorPanel/BlocksPanel/index.jsx
+++ b/src/editor/components/EditorPanel/BlocksPanel/index.jsx
@@ -307,21 +307,21 @@ export default class BlocksPanel extends React.Component {
           ref={ref => this[`blockComponent_${block.id}`] = ref}
           index={index}
           block={block}
-          onDragging={this.handleOnDragging}
           moveBlock={this.handleBlockMove}
           didMoveBlock={this.handleBlockDidMove}
-          onDropBlock={this.handleBlockDrop}
-          onDropMacro={this.handleMacroDrop}
-          onDuplicate={this.handleBlockDuplicate}
-          onOverBlock={this.handleOverBlock}
           toBeAddBlock={this.toBeAddBlock}
-          onClick={() => this.handleBlockClick(block.id, macroId)}
           isSelected={this.state.onSelectedBlockId === block.id}
           macroColor={macro.groupColor}
           macroIcon={macro.icon}
           style={style}
           blockList={this.getRefList}
           movingBlockId={this.state.movingBlockId}
+          onDragging={this.handleOnDragging}
+          onDropBlock={this.handleBlockDrop}
+          onDropMacro={this.handleMacroDrop}
+          onDuplicate={this.handleBlockDuplicate}
+          onOverBlock={this.handleOverBlock}
+          onClick={() => this.handleBlockClick(block.id, macroId)}
         />
       </CellMeasurer>
     );
@@ -397,14 +397,14 @@ export default class BlocksPanel extends React.Component {
         <div className="editor-status-bar">
           {this.renderLastSaveTime()}
           <div className="block-language-switcher">
-            {<Switcher
+            <Switcher
               actionTitle={t('blocksList.statusRow.otherLanguage')}
               label={t('blocksList.statusRow.editing')}
               selectedIndex={languageIndex}
               values={supportedLanguages.map(t)}
               onClickAction={this.handleOpenStorySettingModalLanguageTab}
               onChange={this.handleLanguageSwitcherChange}
-            />}
+            />
           </div>
         </div>
         <div className="block-list">
diff --git a/src/editor/components/EditorPanel/ExportOiceModal/index.jsx b/src/editor/components/EditorPanel/ExportOiceModal/index.jsx
index 290b3401..e175a03c 100644
--- a/src/editor/components/EditorPanel/ExportOiceModal/index.jsx
+++ b/src/editor/components/EditorPanel/ExportOiceModal/index.jsx
@@ -102,9 +102,9 @@ export default class ExportOiceModal extends React.Component {
     const downloadOiceButton = (
       <RaisedButton
         label={t('exportOice.downloadButton')}
-        onClick={this.handleOnClickDownloadButton}
-        primary
         disabled={stage !== SUCCESS}
+        primary
+        onClick={this.handleOnClickDownloadButton}
       />
     );
 
diff --git a/src/editor/components/EditorPanel/ImportScriptModal/ImportScriptModal.jsx b/src/editor/components/EditorPanel/ImportScriptModal/ImportScriptModal.jsx
index 882ff338..90849013 100644
--- a/src/editor/components/EditorPanel/ImportScriptModal/ImportScriptModal.jsx
+++ b/src/editor/components/EditorPanel/ImportScriptModal/ImportScriptModal.jsx
@@ -102,9 +102,9 @@ export default class ImportScriptModal extends React.Component {
     const uploadButton = (
       <RaisedButton
         label={t('button.uploadScript')}
-        onClick={this.handleClickUploadButton}
         disabled={loading || file === null}
         primary
+        onClick={this.handleClickUploadButton}
       />
     );
 
@@ -123,9 +123,9 @@ export default class ImportScriptModal extends React.Component {
               <TextField value={file && file.name} fluid readonly />
               <RaisedButton
                 label={t('button.chooseFile')}
-                onClick={this.handleClickChooseFileButton}
                 disabled={loading}
                 mini
+                onClick={this.handleClickChooseFileButton}
               />
             </div>
           }
diff --git a/src/editor/components/EditorPanel/RunOiceModal/index.jsx b/src/editor/components/EditorPanel/RunOiceModal/index.jsx
index 6f25923b..de1e5ab2 100644
--- a/src/editor/components/EditorPanel/RunOiceModal/index.jsx
+++ b/src/editor/components/EditorPanel/RunOiceModal/index.jsx
@@ -89,7 +89,8 @@ export default class RunOiceModal extends React.Component {
         <li key={index} className="error-attribute-item">
           <div><span >{t('oiceError.attributeName')}</span> {key}</div>
           <div><span>{t('oiceError.messageLabel')}</span> {errorMessage}</div>
-        </li>);
+        </li>
+      );
     });
     return render;
   }
@@ -171,9 +172,9 @@ export default class RunOiceModal extends React.Component {
     const playOiceButton = (
       <RaisedButton
         label={t('runOice.playButton')}
-        onClick={this.handleOnClickPlayButton}
-        primary
         disabled={stage !== SUCCESS}
+        primary
+        onClick={this.handleOnClickPlayButton}
       />
     );
 
diff --git a/src/editor/components/EditorPanel/StoryOiceBrowser/OiceListTab/OiceBlock.jsx b/src/editor/components/EditorPanel/StoryOiceBrowser/OiceListTab/OiceBlock.jsx
index fb5c6294..32076cdc 100644
--- a/src/editor/components/EditorPanel/StoryOiceBrowser/OiceListTab/OiceBlock.jsx
+++ b/src/editor/components/EditorPanel/StoryOiceBrowser/OiceListTab/OiceBlock.jsx
@@ -53,7 +53,7 @@ const blockTarget = {
     }
     // Dragging upwards
     if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
-      return;
+      // no op
     }
   },
 };
diff --git a/src/editor/components/EditorPanel/StoryOiceBrowser/OiceListTab/index.jsx b/src/editor/components/EditorPanel/StoryOiceBrowser/OiceListTab/index.jsx
index 1f2011f4..758bbd3e 100644
--- a/src/editor/components/EditorPanel/StoryOiceBrowser/OiceListTab/index.jsx
+++ b/src/editor/components/EditorPanel/StoryOiceBrowser/OiceListTab/index.jsx
@@ -36,7 +36,6 @@ export default class OiceListTab extends React.Component {
       oices: props.oices,
       isAdding: false,
       isRequestAddOice: false,
-      shouldAutoSelect: false,
     };
   }
 
@@ -152,8 +151,8 @@ export default class OiceListTab extends React.Component {
           }
           {oices.map((oice, index) => (
             <OiceBlock
-              index={index}
               key={oice.id}
+              index={index}
               oice={oice}
               t={t}
               onDrag={this.handleOiceMove}
diff --git a/src/editor/components/EditorPanel/StoryOiceBrowser/StoryListTab/Row.jsx b/src/editor/components/EditorPanel/StoryOiceBrowser/StoryListTab/Row.jsx
index 6371146c..a4b4bfec 100644
--- a/src/editor/components/EditorPanel/StoryOiceBrowser/StoryListTab/Row.jsx
+++ b/src/editor/components/EditorPanel/StoryOiceBrowser/StoryListTab/Row.jsx
@@ -18,9 +18,9 @@ export default class StoryListRow extends React.Component {
     const { story, index } = this.props;
     return (
       <div
+        key={story.id}
         className="list-row clickable"
         id={`story-${story.id}`}
-        key={story.id}
         onClick={() => this.handleClick(index)}
       >
         <div className="story-name">
diff --git a/src/editor/components/EditorPanel/StoryOiceBrowser/StoryListTab/index.jsx b/src/editor/components/EditorPanel/StoryOiceBrowser/StoryListTab/index.jsx
index c51d366e..7cc79f62 100644
--- a/src/editor/components/EditorPanel/StoryOiceBrowser/StoryListTab/index.jsx
+++ b/src/editor/components/EditorPanel/StoryOiceBrowser/StoryListTab/index.jsx
@@ -99,8 +99,8 @@ export default class StoryListTab extends React.Component {
           }
           {stories.map((story, index) => (
             <StoryListRow
-              index={index}
               key={story.id}
+              index={index}
               story={story}
               onClick={this.handleStoryClick}
             />
diff --git a/src/editor/components/EditorPanel/StoryOiceBrowser/index.jsx b/src/editor/components/EditorPanel/StoryOiceBrowser/index.jsx
index 0eb10776..69b71a0a 100644
--- a/src/editor/components/EditorPanel/StoryOiceBrowser/index.jsx
+++ b/src/editor/components/EditorPanel/StoryOiceBrowser/index.jsx
@@ -27,7 +27,7 @@ import './styles.scss';
 
 
 @translate(['editor'])
-@connect(store => {
+@connect((store) => {
   const {
     storyOiceBrowser,
   } = store.editorPanel;
@@ -234,10 +234,10 @@ export default class StoryOiceBrowser extends React.Component {
               onSelect={this.handleStorySelect}
             />
             <OiceListTab
+              ref={ref => this.oiceListTab = ref}
               focused={open && tabSelectedIndex === 1 && isTransitionEnd}
               isAdding={isAddingOice}
               oices={oices}
-              ref={ref => this.oiceListTab = ref}
               onAdd={this.handleOiceAddRequest}
               onReorder={this.handleOiceReorder}
               onRequestCopy={this.handleCopyOiceRequest}
diff --git a/src/editor/components/EditorPanel/StoryPicker/index.jsx b/src/editor/components/EditorPanel/StoryPicker/index.jsx
index 24d22ff3..793bd4ec 100644
--- a/src/editor/components/EditorPanel/StoryPicker/index.jsx
+++ b/src/editor/components/EditorPanel/StoryPicker/index.jsx
@@ -105,7 +105,7 @@ export default class StoryPicker extends React.Component {
                   <Dropdown
                     placeholder={t('storyPicker.placeholder')}
                     selectedIndexes={[selectedIndex]}
-                    values={storyNames.map((item) => (
+                    values={storyNames.map(item => (
                       { icon: null, text: item }
                     ))}
                     fullWidth
diff --git a/src/editor/components/EditorPanel/StorySettingModal/OiceBlock.jsx b/src/editor/components/EditorPanel/StorySettingModal/OiceBlock.jsx
index ecad8c50..3b4f5794 100644
--- a/src/editor/components/EditorPanel/StorySettingModal/OiceBlock.jsx
+++ b/src/editor/components/EditorPanel/StorySettingModal/OiceBlock.jsx
@@ -288,8 +288,8 @@ export default class OiceBlock extends React.Component {
           <ToggleButton
             leftLabel={t('label.notPublic')}
             rightLabel={t('label.public')}
-            narrow
             toggled={oice.sharingOption === 0}
+            narrow
             onToggle={this.handleToggleOiceSharingOption}
           />
           <FlatButton
diff --git a/src/ui-demo/components/ButtonGroup.jsx b/src/ui-demo/components/ButtonGroup.jsx
index 78bfa594..b2651777 100644
--- a/src/ui-demo/components/ButtonGroup.jsx
+++ b/src/ui-demo/components/ButtonGroup.jsx
@@ -42,41 +42,41 @@ export default class ButtonGroupDemo extends React.Component {
         <p>GroupButton wraps muliple FlatButtons or RaisedButtons together</p>
         <div>
           <ButtonGroup selectable>
-            <FlatButton mini label="左" />
-            <FlatButton mini label="中" />
-            <FlatButton mini label="右" />
+            <FlatButton label="左" mini />
+            <FlatButton label="中" mini />
+            <FlatButton label="右" mini />
           </ButtonGroup>
           <br />
           selectable using {'<FlatButton/>'}
         </div>
         <div>
           <ButtonGroup selectable fullWidth>
-            <RaisedButton mini label="左" />
-            <RaisedButton mini label="中" />
-            <RaisedButton mini label="右" />
+            <RaisedButton label="左" mini />
+            <RaisedButton label="中" mini />
+            <RaisedButton label="右" mini />
           </ButtonGroup>
           selectable in full width using {'<RaisedButton/>'}
         </div>
         <div>
           <ButtonGroup selectable fullWidth disabled>
-            <RaisedButton mini label="左" />
-            <RaisedButton mini label="中" />
-            <RaisedButton mini label="右" />
+            <RaisedButton label="左" mini />
+            <RaisedButton label="中" mini />
+            <RaisedButton label="右" mini />
           </ButtonGroup>
           disabled
         </div>
         <div>
           <ButtonGroup>
             <RaisedButton
-              mini
               label={
                 <span className="font-color1">
                   黑貓故事 <span className="font-color3">(連載中)</span>
                 </span>
               }
               icon={<MenuIcon />}
+              mini
             />
-            <RaisedButton mini icon={<SettingIcon />} />
+            <RaisedButton icon={<SettingIcon />} mini />
           </ButtonGroup>
           <br />
           complex example
diff --git a/src/ui-demo/components/Dropdown.jsx b/src/ui-demo/components/Dropdown.jsx
index 4d8651f2..42a90a67 100644
--- a/src/ui-demo/components/Dropdown.jsx
+++ b/src/ui-demo/components/Dropdown.jsx
@@ -38,7 +38,7 @@ export default class DropdownDemo extends React.Component {
         <div>
           <Dropdown
             placeholder="請選擇"
-            values={['繁體中文', '简体中文', 'English', '日本語', '언문'].map((item) => (
+            values={['繁體中文', '简体中文', 'English', '日本語', '언문'].map(item => (
               { icon: null, text: item }
             ))}
             fullWidth
@@ -64,7 +64,7 @@ export default class DropdownDemo extends React.Component {
             searchNotFoundText="找不到語言"
             searchPlaceholder="語言"
             selectedIndexes={[0, 3]}
-            values={['繁體中文', '简体中文', 'English', '日本語', '언문'].map((item) => (
+            values={['繁體中文', '简体中文', 'English', '日本語', '언문'].map(item => (
               { icon: null, text: item }
             ))}
             multiple
diff --git a/src/ui-demo/components/GridList.jsx b/src/ui-demo/components/GridList.jsx
index ec5a8964..60654f80 100644
--- a/src/ui-demo/components/GridList.jsx
+++ b/src/ui-demo/components/GridList.jsx
@@ -41,7 +41,7 @@ const pepeData = [{
 
 export default class GridListDemo extends React.Component {
   render() {
-    const triangleLabel = (selected) => (
+    const triangleLabel = selected => (
       <TriangleLabel
         icon={<CheckCircleIcon />}
         selected={selected}
diff --git a/src/ui-demo/components/Modal.jsx b/src/ui-demo/components/Modal.jsx
index c0284bb8..39f7870c 100644
--- a/src/ui-demo/components/Modal.jsx
+++ b/src/ui-demo/components/Modal.jsx
@@ -66,8 +66,8 @@ export default class ModalDemo extends React.Component {
           </Modal.Body>
           <Modal.Footer
             leftButtonTitle="Left Button Title"
-            onClickLeftButton={this.handleClose}
             rightButtonTitle="Right Button Title"
+            onClickLeftButton={this.handleClose}
             onClickRightButton={this.handleOnClose}
           />
         </Modal>
@@ -76,9 +76,9 @@ export default class ModalDemo extends React.Component {
   }
 
   renderAdvancedModal() {
-    const button1 = <RaisedButton destructive label="Reset" onClick={this.handleOnClick3} />;
+    const button1 = <RaisedButton label="Reset" destructive onClick={this.handleOnClick3} />;
     const button2 = <RaisedButton label="Cancel" onClick={this.handleOnClick3} />;
-    const button3 = <RaisedButton primary label="Confrim" onClick={this.handleOnClick3} />;
+    const button3 = <RaisedButton label="Confrim" primary onClick={this.handleOnClick3} />;
 
     return (
       <span>
diff --git a/src/ui-demo/components/RaisedButton.jsx b/src/ui-demo/components/RaisedButton.jsx
index 9790791f..e8af1920 100644
--- a/src/ui-demo/components/RaisedButton.jsx
+++ b/src/ui-demo/components/RaisedButton.jsx
@@ -15,51 +15,51 @@ export default class RaisedButtonDemo extends React.Component {
           label only
         </span>
         <span>
-          <RaisedButton primary label="運行oice" />
+          <RaisedButton label="運行oice" primary />
           <br />
           primary with label only
         </span>
         <span>
-          <RaisedButton primary icon={<PlayIcon />} />
+          <RaisedButton icon={<PlayIcon />} primary />
           <br />
           primary with icon only
         </span>
         <span>
           <RaisedButton
-            primary
             label="運行oice"
             icon={<PlayIcon />}
+            primary
           />
           <br />
           primary with label and icon
         </span>
         <span>
           <RaisedButton
-            reverse
             label={
               <span className="font-color1">
                 公園 <span className="font-color3">（黑貓故事）</span>
               </span>
             }
             icon={<PlayIcon />}
+            reverse
           />
           <br />
           label and icon select button
         </span>
         <span>
           <RaisedButton
-            destructive
             label="運行oice"
             icon={<PlayIcon />}
+            destructive
           />
           <br />
           destructive with label and icon
         </span>
         <span>
           <RaisedButton
-            disabled
             label="運行oice"
             icon={<PlayIcon />}
+            disabled
           />
           <br />
           disabled with label and icon
diff --git a/src/ui-demo/components/TextField.jsx b/src/ui-demo/components/TextField.jsx
index 613aab41..e6c5ce44 100644
--- a/src/ui-demo/components/TextField.jsx
+++ b/src/ui-demo/components/TextField.jsx
@@ -19,9 +19,9 @@ export default class TextFieldDemo extends React.Component {
         <div>
           <TextField
             placeholder="請輸入"
+            maxLength={120}
             multiLine
             showCharactersCount
-            maxLength={120}
           />
           <br />
           multi-line with characters count display
diff --git a/src/web/pages/Home/LicenseSection.jsx b/src/web/pages/Home/LicenseSection.jsx
index be41e1bc..0367698b 100644
--- a/src/web/pages/Home/LicenseSection.jsx
+++ b/src/web/pages/Home/LicenseSection.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-pascal-case */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { translate } from 'react-i18next';
diff --git a/src/web/pages/OiceSingleView/OiceSingleView.jsx b/src/web/pages/OiceSingleView/OiceSingleView.jsx
index 58d6ecad..a3bfa288 100644
--- a/src/web/pages/OiceSingleView/OiceSingleView.jsx
+++ b/src/web/pages/OiceSingleView/OiceSingleView.jsx
@@ -618,11 +618,11 @@ export default class OiceSingleView extends React.Component {
               <div className={likeButtonClassName}>
                 <iframe
                   loading="lazy"
-                  allowTransparency
                   frameBorder="0"
                   scrolling="no"
                   src={`${LIKECOIN_BUTTON_URL}/in/embed/${authorLikeCoinId}/mini?referrer=${window.location.href}`}
                   title="like-button"
+                  allowTransparency
                 />
               </div>
               <div className="hidden-sm-and-down">
diff --git a/src/web/pages/User/index.jsx b/src/web/pages/User/index.jsx
index 63b63409..2f857327 100644
--- a/src/web/pages/User/index.jsx
+++ b/src/web/pages/User/index.jsx
@@ -551,12 +551,12 @@ export default class UserPage extends React.Component {
     return (
       <iframe
         loading="lazy"
-        allowTransparency
         className={iframeClassName}
         frameBorder="0"
         scrolling="no"
         src={`${LIKECOIN_URL}/in/embed/${user.likeCoinId}/?referrer=${window.location.href}`}
         title="like-widget"
+        allowTransparency
       />
     );
   }