Eslint (#14)

* `npm run lint` to check for lint
* `npm run lint:fix` to fix lint
* most lint removed from examples

Author: prescottprue

.gitignore

@@ -4,3 +4,4 @@ coverage
 npm-debug.log
 .DS_Store
 **/.DS_Store
+**/build/**

examples/react-firebase-redux/.eslintrc

@@ -0,0 +1,27 @@
+{
+  "parser"  : "babel-eslint",
+  "extends" : [
+    "standard",
+    "standard-react"
+  ],
+  "plugins": [
+    "babel"
+  ],
+  "env"     : {
+    "browser" : true
+  },
+  "globals" : {
+    "__DEV__"      : false,
+    "__PROD__"     : false,
+    "__DEBUG__"    : false,
+    "__COVERAGE__" : false,
+    "__BASENAME__" : false
+  },
+  "rules": {
+    "semi" : [2, "never"],
+    "max-len": [2, 120, 2],
+    "generator-star-spacing": 0,
+    "babel/generator-star-spacing": 1,
+    "jsx-quotes": ["error", "prefer-single"]
+  }
+}

examples/react-firebase-redux/README.md

@@ -58,12 +58,12 @@ To deploy to [Heroku](http://heroku.com) through [Travis-CI](http://travis-ci.or
 
 [npm-image]: https://img.shields.io/npm/v/react-firebase-redux.svg?style=flat-square
 [npm-url]: https://npmjs.org/package/react-firebase-redux
-[travis-image]: https://img.shields.io/travis/prescottprue/react-firebase-redux/master.svg?style=flat-square
-[travis-url]: https://travis-ci.org/prescottprue/react-firebase-redux
-[daviddm-image]: https://img.shields.io/david/prescottprue/react-firebase-redux.svg?style=flat-square
-[daviddm-url]: https://david-dm.org/prescottprue/react-firebase-redux
+[travis-image]: https://img.shields.io/travis/testuser/react-firebase-redux/master.svg?style=flat-square
+[travis-url]: https://travis-ci.org/testuser/react-firebase-redux
+[daviddm-image]: https://img.shields.io/david/testuser/react-firebase-redux.svg?style=flat-square
+[daviddm-url]: https://david-dm.org/testuser/react-firebase-redux
 
 [license-image]: https://img.shields.io/npm/l/react-firebase-redux.svg?style=flat-square
-[license-url]: https://github.com/prescottprue/react-firebase-redux/blob/master/LICENSE
+[license-url]: https://github.com/testuser/react-firebase-redux/blob/master/LICENSE
 [code-style-image]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square
 [code-style-url]: http://standardjs.com/

examples/react-firebase-redux/app/client.js

@@ -13,7 +13,7 @@ const store = configureStore(initialState, createHistory)
 let rootElement = document.getElementById('root')
 
 ReactDOM.render(
-  <Provider store={ store }>
-    { createRoutes(browserHistory) }
+  <Provider store={store}>
+    {createRoutes(browserHistory)}
   </Provider>, rootElement
 )

examples/react-firebase-redux/app/components/AccountDropdown/AccountDropdown.js

@@ -3,18 +3,14 @@ import { Link } from 'react-router'
 import './AccountDropdown.scss'
 
 export default class AccountDropdown extends Component {
-  constructor () {
-    super()
-  }
-
-  state = { isOpen: false };
-
   static propTypes = {
     account: PropTypes.shape({
       username: PropTypes.string.isRequired
     }).isRequired,
     onLogoutClick: PropTypes.func
-  };
+  }
+
+  state = { isOpen: false }
 
   toggleDropdown = () => {
     this.setState({

examples/react-firebase-redux/app/components/AccountManager/AccountManager.js

@@ -4,21 +4,18 @@ import AccountDropdown from '../AccountDropdown/AccountDropdown'
 import './AccountManager.scss'
 
 export default class AccountManager extends Component {
-  constructor (props) {
-    super(props)
-  }
-
   static propTypes = {
     account: PropTypes.object,
     onLogoutClick: PropTypes.func
-  };
+  }
 
   render () {
-    if (this.props.account && this.props.account.username) {
+    const { account, onLogoutClick } = this.props
+    if (account && account.username) {
       return (
         <AccountDropdown
-          account={this.props.account}
-          onLogoutClick={this.props.onLogoutClick}
+          account={account}
+          onLogoutClick={onLogoutClick}
         />
       )
     }

examples/react-firebase-redux/app/components/LoginForm/LoginForm.js

@@ -2,24 +2,20 @@ import React, {Component, PropTypes} from 'react'
 import { Link } from 'react-router'
 import TextField from 'material-ui/lib/text-field'
 import RaisedButton from 'material-ui/lib/raised-button'
-import CircularProgress from 'material-ui/lib/circular-progress'
 import Checkbox from 'material-ui/lib/checkbox'
 import './LoginForm.scss'
 
 const fieldStyle = { width: '80%' }
 const buttonStyle = { width: '100%' }
 
 export default class LoginForm extends Component {
-  constructor (props) {
-    super(props)
-  }
-
-  state = { errors: { username: null, password: null } }
-
   static propTypes = {
+    account: PropTypes.object,
     onLogin: PropTypes.func
   }
 
+  state = { errors: { username: null, password: null } }
+
   /**
    * @function handleInputChange
    * @description Update the state with the values from the form inputs.
@@ -44,12 +40,12 @@ export default class LoginForm extends Component {
   handleLogin = e => {
     if (e && typeof e.preventDefault === 'function') e.preventDefault()
     const { username } = this.state
-    if (!username || username == '') {
+    if (!username || username === '') {
       return this.setState({
         errors: { username: 'Username required' }
       })
     }
-    if (!this.password || this.password == '') {
+    if (!this.password || this.password === '') {
       return this.setState({
         errors: { password: 'Password required' }
       })
@@ -68,15 +64,15 @@ export default class LoginForm extends Component {
         <TextField
           hintText='[email protected]'
           floatingLabelText='Username/Email'
-          onChange={this.handleInputChange.bind(this, 'username')}
+          onChange={() => { this.handleInputChange('username') }}
           errorText={this.state.errors.username}
           style={fieldStyle}
         />
         <TextField
           hintText='password'
           floatingLabelText='Password'
           type='password'
-          onChange={this.handlePrivateChange.bind(this, 'password')}
+          onChange={() => { this.handlePrivateChange('password') }}
           errorText={this.state.errors.password}
           style={fieldStyle}
         />

examples/react-firebase-redux/app/components/Navbar/Navbar.js

@@ -2,12 +2,8 @@ import React, { Component, PropTypes } from 'react'
 import './Navbar.scss'
 import { Link } from 'react-router'
 
-//Components
 import AppBar from 'material-ui/lib/app-bar'
-import IconButton from 'material-ui/lib/icon-button'
-import NavigationClose from 'material-ui/lib/svg-icons/navigation/close'
 import IconMenu from 'material-ui/lib/menus/icon-menu'
-import MoreVertIcon from 'material-ui/lib/svg-icons/navigation/more-vert'
 import MenuItem from 'material-ui/lib/menus/menu-item'
 import FlatButton from 'material-ui/lib/flat-button'
 import Avatar from 'material-ui/lib/avatar'
@@ -18,17 +14,13 @@ const avatarSize = 50
 const buttonStyle = { color: 'white' }
 
 export default class Navbar extends Component {
-  constructor(props) {
-    super(props)
-  }
-
   static propTypes = {
     account: PropTypes.object,
     onMenuClick: PropTypes.func,
     onLogoutClick: PropTypes.func
   }
 
-  selectItem = (e, item) => {
+  selectItem = (item) => {
     if (item === 'logout' && this.props.onLogoutClick) {
       return this.props.onLogoutClick()
     }
@@ -39,18 +31,18 @@ export default class Navbar extends Component {
 
   render() {
     const { username, avatar_url } = this.props.account ? this.props.account : {}
-    const brandLinkLoc = username ? `/${username}` : '/'
+    const brandLinkLoc = `/${username || ''}`
     const iconButton = (
       <Avatar
-        className="Navbar-Avatar"
-        src={ avatar_url ? avatar_url : stockPhotoUrl }
+        className='Navbar-Avatar'
+        src={ avatar_url || stockPhotoUrl }
         size={ avatarSize }
       />
     )
     const mainMenu = (
-      <div className="Navbar-Main-Menu">
-        <FlatButton label="Sign Up" style={ buttonStyle } onClick={ this.selectItem.bind(this, null, 'signup') } />
-        <FlatButton label="Login" style={ buttonStyle } onClick={ this.selectItem.bind(this, null, 'login') } />
+      <div className='Navbar-Main-Menu'>
+        <FlatButton label='Sign Up' style={ buttonStyle } onClick={ () => this.selectItem('signup') } />
+        <FlatButton label='Login' style={ buttonStyle } onClick={ () => this.selectItem('login') } />
       </div>
     )
     const rightMenu = username ? (
@@ -60,15 +52,19 @@ export default class Navbar extends Component {
         anchorOrigin={ originSettings }
         onChange={ this.selectItem }
       >
-        <MenuItem primaryText="Account" value="account" />
-        <MenuItem primaryText="About" value="about"/>
-        <MenuItem primaryText="Sign out" value="logout"/>
+        <MenuItem primaryText='Account' value='account' />
+        <MenuItem primaryText='About' value='about'/>
+        <MenuItem primaryText='Sign out' value='logout'/>
       </IconMenu>
     ) : mainMenu
     return (
       <AppBar
-        title={<Link className="Navbar-Brand" to={ brandLinkLoc }>react-firebase-redux</Link>}
-        className="Navbar"
+        title={
+          <Link className='Navbar-Brand' to={ brandLinkLoc }>
+            react-firebase-redux
+          </Link>
+        }
+        className='Navbar'
         showMenuIconButton={ false }
         iconElementRight={ rightMenu }
       />

examples/react-firebase-redux/app/components/SignupForm/SignupForm.js

@@ -1,15 +1,17 @@
 import React, {Component, PropTypes} from 'react'
 import TextField from 'material-ui/lib/text-field'
 import RaisedButton from 'material-ui/lib/raised-button'
-import CircularProgress from 'material-ui/lib/circular-progress'
-import Paper from 'material-ui/lib/paper'
 import './SignupForm.scss'
+import { capitalize } from 'lodash'
+
 const fieldStyle = { width: '80%' }
 const buttonStyle = { width: '96%', marginBottom: '.5rem' }
 
 export default class SignupForm extends Component {
-  constructor (props) {
-    super(props)
+  static propTypes = {
+    account: PropTypes.object,
+    signup: PropTypes.func,
+    onSignup: PropTypes.func
   }
 
   state = { errors: {} }
@@ -35,11 +37,7 @@ export default class SignupForm extends Component {
       this.props.onSignup(newAccountData)
     }
   }
-  /**
-   * @function requireInputs
-   * @description Confirm that all required inputs have values
-   * @return {Boolean}
-   */
+
   requireInputs = () => {
     const requiredInputs = [
       {name: 'username', val: this.state.username},

examples/react-firebase-redux/app/containers/Account/Account.js

@@ -1,51 +1,44 @@
 import React, { Component, PropTypes } from 'react'
-import { Link } from 'react-router'
 
 // styles
 import './Account.scss'
 
-// firebase
-import firebaseUtil from '../../utils/firebase'
-
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import * as Actions from '../../actions'
 
 class Acccount extends Component {
-  constructor (props) {
-    super(props)
-  }
-
   static propTypes = {
     account: PropTypes.object,
-  };
+    logout: PropTypes.func
+  }
 
   render () {
     const emailTo = `mailto:${this.props.account.email || ''}`
+    const { account, logout } = this.props
     return (
       <div className='Acccount'>
         <div className='Acccount-Data'>
           <span className='Acccount-Datapoint Acccount-Username'>
-            { this.props.account.username }
+            { account.username }
           </span>
           <span className='Acccount-Datapoint Acccount-Name'>
-            { this.props.account.name || 'No Name' }
+            { account.name || 'No Name' }
           </span>
           <span className='Acccount-Datapoint Acccount-Role'>
-            { this.props.account.role }
+            { account.role }
           </span>
           <a className='Acccount-Datapoint Acccount-Email' href={ emailTo }>
-            { this.props.account.email }
+            { account.email }
           </a>
-          <button className='Button' onClick={ this.props.logout }>
+          <button className='Button' onClick={ logout }>
             Logout
           </button>
         </div>
       </div>
     )
   }
 }
-
 // Place state of redux store into props of component
 const mapStateToProps = (state) => {
   return {