convert everything to es6 classes

vinnymac · Jan 14, 2017 · ed72401 · ed72401
1 parent c2e784d
commit ed72401
Show file tree

Hide file tree

Showing 30 changed files with 510 additions and 817 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -16,7 +16,7 @@
     "no-use-before-define": 0,
     "import/no-unresolved": [2, { "ignore": ["electron"] }],
     "import/no-extraneous-dependencies": 0,
-    "react/prefer-es6-class": [2, "never"],
+    "react/prefer-es6-class": [2, "always"],
     "react/jsx-no-bind": 0,
     "react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx"] }],
     "react/prefer-stateless-function": 0,

diff --git a/app/index.js b/app/index.js
@@ -18,12 +18,12 @@ import {
 
 import './app.global.css'
 
-const App = React.createClass({
-  propTypes: {
+class App extends React.Component {
+  static propTypes = {
     authenticate: PropTypes.object.isRequired,
     autoLogin: PropTypes.bool.isRequired,
     login: PropTypes.func.isRequired,
-  },
+  }
 
   componentDidMount() {
     const {
@@ -36,14 +36,14 @@ const App = React.createClass({
     if (autoLogin && credentials.method && credentials.password && credentials.username) {
       this.props.login(credentials)
     }
-  },
+  }
 
   render() {
     if (this.props.authenticate.loggedIn) return (<Table />)
 
     return (<Login />)
   }
-})
+}
 
 const ConnectedApp = connect((state => ({
   authenticate: state.authenticate,

diff --git a/app/main.development.js b/app/main.development.js
@@ -24,7 +24,7 @@ if (process.env.NODE_ENV === 'production') {
 
 if (process.env.NODE_ENV === 'development') {
   require('electron-debug')() // eslint-disable-line global-require
-  const path = require('path'); // eslint-disable-line
+  const path = require('path') // eslint-disable-line
   const p = path.join(__dirname, '..', 'app', 'node_modules') // eslint-disable-line
   require('module').globalPaths.push(p) // eslint-disable-line
 }

diff --git a/app/screens/ConfirmationDialog/components/SelectedPokemon.js b/app/screens/ConfirmationDialog/components/SelectedPokemon.js
@@ -2,12 +2,12 @@ import React, {
   PropTypes
 } from 'react'
 
-const SelectedPokemon = React.createClass({
-  displayName: 'SelectedPokemon',
+class SelectedPokemon extends React.Component {
+  static displayName = 'SelectedPokemon'
 
-  propTypes: {
+  static propTypes = {
     pokemon: PropTypes.array
-  },
+  }
 
   render() {
     const {
@@ -37,31 +37,26 @@ const SelectedPokemon = React.createClass({
         </p>
       </div>
     )
-  },
-
-  buildRows(pokemon) {
-    return (
-      pokemon.map((p, i) => {
-        const favoriteGlyph = 'glyphicon glyphicon-star favorite-yellow'
-        const emptyFavoriteGlyph = 'glyphicon glyphicon-star-empty'
-        const favorite = p.favorite ? favoriteGlyph : emptyFavoriteGlyph
-
-        return (
-          <tr key={i}>
-            <td>
-              <span className={`favorite ${favorite}`} />
-            </td>
-            <td>{p.name}</td>
-            <td>{p.nickname}</td>
-            <td>{p.cp}</td>
-            <td>{p.iv}%</td>
-          </tr>
-        )
-      })
-    )
   }
 
-
-})
+  buildRows = (pokemon) =>
+    pokemon.map((p, i) => {
+      const favoriteGlyph = 'glyphicon glyphicon-star favorite-yellow'
+      const emptyFavoriteGlyph = 'glyphicon glyphicon-star-empty'
+      const favorite = p.favorite ? favoriteGlyph : emptyFavoriteGlyph
+
+      return (
+        <tr key={i}>
+          <td>
+            <span className={`favorite ${favorite}`} />
+          </td>
+          <td>{p.name}</td>
+          <td>{p.nickname}</td>
+          <td>{p.cp}</td>
+          <td>{p.iv}%</td>
+        </tr>
+      )
+    })
+}
 
 export default SelectedPokemon
diff --git a/app/screens/ConfirmationDialog/index.js b/app/screens/ConfirmationDialog/index.js
@@ -4,10 +4,10 @@ import React, {
 import ReactDOM from 'react-dom'
 import SelectedPokemon from './components/SelectedPokemon'
 
-const ConfirmationDialog = React.createClass({
-  displayName: 'ConfirmationDialog',
+class ConfirmationDialog extends React.Component {
+  static displayName = 'ConfirmationDialog'
 
-  propTypes: {
+  static propTypes = {
     onClickSecondary: PropTypes.func.isRequired,
     onClickPrimary: PropTypes.func.isRequired,
     dialog: PropTypes.object.isRequired,
@@ -16,11 +16,11 @@ const ConfirmationDialog = React.createClass({
     title: PropTypes.string.isRequired,
     message: PropTypes.string.isRequired,
     pokemon: PropTypes.array
-  },
+  }
 
   componentDidMount() {
     this.props.dialog.modal('show')
-  },
+  }
 
   render() {
     const {
@@ -55,7 +55,7 @@ const ConfirmationDialog = React.createClass({
               data-dismiss="modal"
               aria-label="Close"
             >
-              <span aria-hidden="true">&times;</span>
+              <span aria-hidden="true">&times</span>
             </button>
             <h4 className="modal-title" id="confirmationDialogLabel">
               {title}
@@ -87,18 +87,18 @@ const ConfirmationDialog = React.createClass({
         </div>
       </div>
     )
-  },
+  }
 
-  handleSecondary() {
+  handleSecondary = () => {
     this.props.dialog.modal('hide')
     this.props.onClickSecondary()
-  },
+  }
 
-  handlePrimary() {
+  handlePrimary = () => {
     this.props.dialog.modal('hide')
     this.props.onClickPrimary()
   }
-})
+}
 
 export default ($modal, props) => {
   props.dialog = $modal

diff --git a/app/screens/Detail/components/CinematicMove.js b/app/screens/Detail/components/CinematicMove.js
@@ -7,13 +7,13 @@ import {
 
 import Tooltip from '../../Tooltip'
 
-const CinematicMove = React.createClass({
-  displayName: 'CinematicMove',
+class CinematicMove extends React.Component {
+  static displayName = 'CinematicMove'
 
-  propTypes: {
+  static propTypes = {
     move: PropTypes.object.isRequired,
     myMove: PropTypes.object.isRequired,
-  },
+  }
 
   render() {
     const {
@@ -62,7 +62,7 @@ const CinematicMove = React.createClass({
         </div>
       </div>
     )
-  },
-})
+  }
+}
 
 export default CinematicMove
diff --git a/app/screens/Detail/components/Evolutions.js b/app/screens/Detail/components/Evolutions.js
@@ -4,12 +4,12 @@ import React, {
 
 import utils from '../../../utils'
 
-const QuickMove = React.createClass({
-  displayName: 'Evolutions',
+class QuickMove extends React.Component {
+  static displayName = 'Evolutions'
 
-  propTypes: {
+  static propTypes = {
     evolutionIds: PropTypes.node.isRequired
-  },
+  }
 
   render() {
     const {
@@ -47,8 +47,7 @@ const QuickMove = React.createClass({
         {evolveInfoItems}
       </div>
     )
-  },
-
-})
+  }
+}
 
 export default QuickMove
diff --git a/app/screens/Detail/components/ModalBody.js b/app/screens/Detail/components/ModalBody.js
@@ -6,8 +6,8 @@ import CinematicMove from './CinematicMove'
 import Nickname from './Nickname'
 import Evolutions from './Evolutions'
 
-const ModalBody = React.createClass({
-  propTypes: {
+class ModalBody extends React.Component {
+  static propTypes = {
     transform: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
     hp: PropTypes.string.isRequired,
@@ -26,7 +26,7 @@ const ModalBody = React.createClass({
     evolutionIds: PropTypes.node,
     possibleQuickMoves: PropTypes.array,
     possibleCinematicMoves: PropTypes.array,
-  },
+  }
 
   render() {
     const {
@@ -145,12 +145,11 @@ const ModalBody = React.createClass({
         <Evolutions evolutionIds={evolutionIds} />
       </div>
     </div>)
-  },
+  }
 
-  handleCry() {
+  handleCry = () => {
     this.cry.play()
-  },
-
-})
+  }
+}
 
 export default ModalBody
diff --git a/app/screens/Detail/components/Nickname.js b/app/screens/Detail/components/Nickname.js
@@ -15,18 +15,16 @@ function getNumberInCircle(num) {
   return `${num}`
 }
 
-const Nickname = React.createClass({
-  propTypes: {
+class Nickname extends React.Component {
+  static propTypes = {
     pokemon: PropTypes.object.isRequired,
     renamePokemon: PropTypes.func.isRequired
-  },
+  }
 
-  getInitialState() {
-    return {
-      newNickname: this.props.pokemon.nickname,
-      editing: false
-    }
-  },
+  state = {
+    newNickname: this.props.pokemon.nickname,
+    editing: false
+  }
 
   componentDidUpdate() {
     if (this.state.editing) {
@@ -36,7 +34,7 @@ const Nickname = React.createClass({
     } else if (this.lastActiveElement) {
       this.lastActiveElement.focus()
     }
-  },
+  }
 
   render() {
     const {
@@ -69,15 +67,15 @@ const Nickname = React.createClass({
         />
       </div>
     )
-  },
+  }
 
-  handleEdit() {
+  handleEdit = () => {
     this.setState({
       editing: true
     })
-  },
+  }
 
-  handleKeyPress(e) {
+  handleKeyPress = (e) => {
     const {
       pokemon,
     } = this.props
@@ -112,9 +110,9 @@ const Nickname = React.createClass({
         this.handleRenameComplete(updatedPokemon)
       })
     }
-  },
+  }
 
-  handleRenameComplete(updatedPokemon) {
+  handleRenameComplete = (updatedPokemon) => {
     const {
       pokemon
     } = this.props
@@ -126,8 +124,7 @@ const Nickname = React.createClass({
       editing: false
     })
   }
-
-})
+}
 
 export default connect(null, dispatch => bindActionCreators({
   renamePokemon

diff --git a/app/screens/Detail/components/QuickMove.js b/app/screens/Detail/components/QuickMove.js
@@ -4,13 +4,13 @@ import React, {
 
 import Tooltip from '../../Tooltip'
 
-const QuickMove = React.createClass({
-  displayName: 'QuickMove',
+class QuickMove extends React.Component {
+  static displayName = 'QuickMove'
 
-  propTypes: {
+  static propTypes = {
     move: PropTypes.object.isRequired,
     myMove: PropTypes.object.isRequired,
-  },
+  }
 
   render() {
     const {
@@ -51,8 +51,7 @@ const QuickMove = React.createClass({
         </div>
       </div>
     )
-  },
-
-})
+  }
+}
 
 export default QuickMove