Add webpack modulesDirectories option and replace ES7 autobinding with ES7 property declaration

client/components/Footer/index.js

@@ -1,6 +1,6 @@
 
 import React, { Component } from 'react'
-import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from '../../constants/filters'
+import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from 'constants/filters'
 import classnames from 'classnames'
 import style from './style.css'
 
@@ -11,7 +11,7 @@ const FILTER_TITLES = {
 }
 
 class Footer extends Component {
-  renderTodoCount() {
+  renderTodoCount = () => {
     const { activeCount } = this.props
     const itemWord = activeCount === 1 ? 'item' : 'items'
 
@@ -20,9 +20,9 @@ class Footer extends Component {
         <strong>{activeCount || 'No'}</strong> {itemWord} left
       </span>
     )
-  }
+  };
 
-  renderFilterLink(filter) {
+  renderFilterLink = (filter) => {
     const title = FILTER_TITLES[filter]
     const { filter: selectedFilter, onShow } = this.props
 
@@ -33,9 +33,9 @@ class Footer extends Component {
         {title}
       </a>
     )
-  }
+  };
 
-  renderClearButton() {
+  renderClearButton = () => {
     const { completedCount, onClearCompleted } = this.props
     if (completedCount > 0) {
       return (
@@ -44,7 +44,7 @@ class Footer extends Component {
         </button>
       )
     }
-  }
+  };
 
   render() {
     return (

client/components/Header/index.js

@@ -1,21 +1,21 @@
 
 import React, { Component } from 'react'
-import TodoTextInput from '../TodoTextInput'
+import TodoTextInput from 'components/TodoTextInput'
 
 class Header extends Component {
-  handleSave(text) {
+  handleSave = (text) => {
     if (text.length) {
       this.props.addTodo(text)
     }
-  }
+  };
 
   render() {
     return (
       <header>
         <h1>Todos</h1>
         <TodoTextInput
           newTodo
-          onSave={::this.handleSave}
+          onSave={this.handleSave}
           placeholder="What needs to be done?" />
       </header>
     )

client/components/MainSection/index.js

@@ -1,8 +1,8 @@
 
 import React, { Component } from 'react'
-import TodoItem from '../TodoItem'
-import Footer from '../Footer'
-import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from '../../constants/filters'
+import TodoItem from 'components/TodoItem'
+import Footer from 'components/Footer'
+import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from 'constants/filters'
 import style from './style.css'
 
 const TODO_FILTERS = {
@@ -17,18 +17,18 @@ class MainSection extends Component {
     this.state = { filter: SHOW_ALL }
   }
 
-  handleClearCompleted() {
+  handleClearCompleted = () => {
     const atLeastOneCompleted = this.props.todos.some(todo => todo.completed)
     if (atLeastOneCompleted) {
       this.props.actions.clearCompleted()
     }
   }
 
-  handleShow(filter) {
+  handleShow = (filter) => {
     this.setState({ filter })
-  }
+  };
 
-  renderToggleAll(completedCount) {
+  renderToggleAll = (completedCount) => {
     const { todos, actions } = this.props
     if (todos.length > 0) {
       return <input
@@ -37,9 +37,9 @@ class MainSection extends Component {
         checked={completedCount === todos.length}
         onChange={actions.completeAll} />
     }
-  }
+  };
 
-  renderFooter(completedCount) {
+  renderFooter = (completedCount) => {
     const { todos } = this.props
     const { filter } = this.state
     const activeCount = todos.length - completedCount
@@ -53,7 +53,7 @@ class MainSection extends Component {
           onShow={::this.handleShow} />
       )
     }
-  }
+  };
 
   render() {
     const { todos, actions } = this.props

client/components/TodoItem/index.js

@@ -1,6 +1,6 @@
 
 import React, { Component } from 'react'
-import TodoTextInput from '../TodoTextInput'
+import TodoTextInput from 'components/TodoTextInput'
 import classnames from 'classnames'
 import style from './style.css'
 
@@ -12,18 +12,18 @@ class TodoItem extends Component {
     }
   }
 
-  handleDoubleClick() {
+  handleDoubleClick = () => {
     this.setState({ editing: true })
-  }
+  };
 
-  handleSave(id, text) {
+  handleSave = (id, text) => {
     if (text.length === 0) {
       this.props.deleteTodo(id)
     } else {
       this.props.editTodo({ id, text })
     }
     this.setState({ editing: false })
-  }
+  };
 
   render() {
     const {todo, completeTodo, deleteTodo} = this.props
@@ -43,7 +43,7 @@ class TodoItem extends Component {
              checked={todo.completed}
              onChange={() => completeTodo(todo.id)} />
 
-          <label onDoubleClick={::this.handleDoubleClick}>
+          <label onDoubleClick={this.handleDoubleClick}>
             {todo.text}
           </label>
 

client/components/TodoTextInput/index.js

@@ -11,26 +11,26 @@ class TodoTextInput extends Component {
     }
   }
 
-  handleSubmit(e) {
+  handleSubmit = (e) => {
     const text = e.target.value.trim()
     if (e.which === 13) {
       this.props.onSave(text)
       if (this.props.newTodo) {
         this.setState({ text: '' })
       }
     }
-  }
+  };
 
-  handleChange(e) {
+  handleChange = (e) => {
     this.setState({ text: e.target.value })
-  }
+  };
 
-  handleBlur(e) {
+  handleBlur = (e) => {
     const text = e.target.value.trim()
     if (!this.props.newTodo) {
       this.props.onSave(text)
     }
-  }
+  };
 
   render() {
     const classes = classnames({
@@ -44,9 +44,9 @@ class TodoTextInput extends Component {
         autoFocus="true"
         placeholder={this.props.placeholder}
         value={this.state.text}
-        onBlur={::this.handleBlur}
-        onChange={::this.handleChange}
-        onKeyDown={::this.handleSubmit} />
+        onBlur={this.handleBlur}
+        onChange={this.handleChange}
+        onKeyDown={this.handleSubmit} />
     )
   }
 }

webpack.config.js

@@ -51,6 +51,10 @@ module.exports = {
     ],
   },
   resolve: {
+    modulesDirectories: [
+      'client',
+      'node_modules',
+    ],
     extensions: ['', '.js', '.jsx']
   },
   postcss: [