From b19cc2b32adddc279edafecc59c2ff5e06a12057 Mon Sep 17 00:00:00 2001
From: Daniele Bertella <daniele.bertella@link-me.it>
Date: Thu, 5 May 2016 10:49:13 +0200
Subject: [PATCH 1/2] add modulesDirectories option in webpack config to handle
 components imports in an easier way

---
 client/components/Footer/index.js      | 2 +-
 client/components/Header/index.js      | 2 +-
 client/components/MainSection/index.js | 6 +++---
 client/components/TodoItem/index.js    | 2 +-
 webpack.config.js                      | 4 ++++
 5 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/client/components/Footer/index.js b/client/components/Footer/index.js
index de04a8e..2666a1f 100644
--- a/client/components/Footer/index.js
+++ b/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'
 
diff --git a/client/components/Header/index.js b/client/components/Header/index.js
index 31dc3ac..6bc868d 100644
--- a/client/components/Header/index.js
+++ b/client/components/Header/index.js
@@ -1,6 +1,6 @@
 
 import React, { Component } from 'react'
-import TodoTextInput from '../TodoTextInput'
+import TodoTextInput from 'components/TodoTextInput'
 
 class Header extends Component {
   handleSave(text) {
diff --git a/client/components/MainSection/index.js b/client/components/MainSection/index.js
index 0049e32..84e1bc3 100644
--- a/client/components/MainSection/index.js
+++ b/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 = {
diff --git a/client/components/TodoItem/index.js b/client/components/TodoItem/index.js
index ee6511c..8413372 100644
--- a/client/components/TodoItem/index.js
+++ b/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'
 
diff --git a/webpack.config.js b/webpack.config.js
index 1c89f0c..333f4be 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -51,6 +51,10 @@ module.exports = {
     ],
   },
   resolve: {
+    modulesDirectories: [
+      'client',
+      'node_modules',
+    ],
     extensions: ['', '.js', '.jsx']
   },
   postcss: [

From ad5eba577339feab1a1bf7a60211a6d0b9842c53 Mon Sep 17 00:00:00 2001
From: Daniele Bertella <daniele.bertella@link-me.it>
Date: Thu, 5 May 2016 10:52:21 +0200
Subject: [PATCH 2/2] replace ES7 autbinding with ES7 property declaration with
 arrow functions

---
 client/components/Footer/index.js        | 12 ++++++------
 client/components/Header/index.js        |  6 +++---
 client/components/MainSection/index.js   | 14 +++++++-------
 client/components/TodoItem/index.js      | 10 +++++-----
 client/components/TodoTextInput/index.js | 18 +++++++++---------
 5 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/client/components/Footer/index.js b/client/components/Footer/index.js
index 2666a1f..840c1b3 100644
--- a/client/components/Footer/index.js
+++ b/client/components/Footer/index.js
@@ -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 (
diff --git a/client/components/Header/index.js b/client/components/Header/index.js
index 6bc868d..81a3ba6 100644
--- a/client/components/Header/index.js
+++ b/client/components/Header/index.js
@@ -3,11 +3,11 @@ import React, { Component } from 'react'
 import TodoTextInput from 'components/TodoTextInput'
 
 class Header extends Component {
-  handleSave(text) {
+  handleSave = (text) => {
     if (text.length) {
       this.props.addTodo(text)
     }
-  }
+  };
 
   render() {
     return (
@@ -15,7 +15,7 @@ class Header extends Component {
         <h1>Todos</h1>
         <TodoTextInput
           newTodo
-          onSave={::this.handleSave}
+          onSave={this.handleSave}
           placeholder="What needs to be done?" />
       </header>
     )
diff --git a/client/components/MainSection/index.js b/client/components/MainSection/index.js
index 84e1bc3..82d7c21 100644
--- a/client/components/MainSection/index.js
+++ b/client/components/MainSection/index.js
@@ -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
diff --git a/client/components/TodoItem/index.js b/client/components/TodoItem/index.js
index 8413372..c733e00 100644
--- a/client/components/TodoItem/index.js
+++ b/client/components/TodoItem/index.js
@@ -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>
 
diff --git a/client/components/TodoTextInput/index.js b/client/components/TodoTextInput/index.js
index 77c34e0..303d9d7 100644
--- a/client/components/TodoTextInput/index.js
+++ b/client/components/TodoTextInput/index.js
@@ -11,7 +11,7 @@ class TodoTextInput extends Component {
     }
   }
 
-  handleSubmit(e) {
+  handleSubmit = (e) => {
     const text = e.target.value.trim()
     if (e.which === 13) {
       this.props.onSave(text)
@@ -19,18 +19,18 @@ class TodoTextInput extends Component {
         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} />
     )
   }
 }