Add husky

Author: jerryni

package.json

@@ -16,7 +16,16 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
+    "precommit": "lint-staged"
+  },
+  "lint-staged": {
+    "gitDir": "./",
+    "linters":{
+      "src/**/*.jsx": ["eslint --fix", "git add"]
+    }
   },
   "homepage": "https://jerryni.github.io/react-redux-practice/build"
 }

src/modules/ToDoList.jsx

@@ -1,85 +1,83 @@
 import React from 'react'
 
 class ToDoList extends React.Component {
-    
-    constructor(props) {
-      super(props)
-      this.state = {
-        text: props.text || ''
-      }
-    }
 
-    static defaultProps = {
-      todos: []
+  constructor(props) {
+    super(props)
+    this.state = {
+      text: props.text || ''
     }
+  }
 
-    handleKeyup = e => {
-      if(e.key === 'Enter'){
-        let value = e.target.value.trim()
-
-        this.props.todos.push({
-          name: value,
-          id: new Date().getTime(),
-          completed: false
-        })
+  static defaultProps = {
+    todos: []
+  }
 
-        this.setState({
-          text: ''
-        })
+  handleKeyup = e => {
+    if (e.key === 'Enter') {
+      let value = e.target.value.trim()
 
-        console.log(this.props.todos)
-      }
-    }
+      this.props.todos.push({
+        name: value,
+        id: new Date().getTime(),
+        completed: false
+      })
 
-    handleChange = e => {
       this.setState({
-        text: e.target.value
+        text: ''
       })
     }
+  }
 
-    handleRemoveTodo = index => {
-      this.props.todos.splice(index, 1)
+  handleChange = e => {
+    this.setState({
+      text: e.target.value
+    })
+  }
 
-      this.setState(this.state)
-    }
+  handleRemoveTodo = index => {
+    this.props.todos.splice(index, 1)
 
-    onToggle = todo => {
-      todo.completed = !todo.completed
-      this.setState(this.state)
-    }
+    this.setState(this.state)
+  }
 
-    onToggleAll = e => {
-      let {checked} = e.target
-      this.props.todos.forEach(todo => {
-        todo.completed = checked
-      })
-      this.setState(this.state)
-    }
+  onToggle = todo => {
+    todo.completed = !todo.completed
+    this.setState(this.state)
+  }
 
-    render() {
-        let {todos} = this.props
-        return (
-          <div>
-            <input type="checkbox" onChange={this.onToggleAll}/>
-            <input type="text"
-            onKeyUp={this.handleKeyup}
-            onChange={this.handleChange}
-            value={this.state.text}/>
-            <ul>
-              {todos.map( (todo, index) => 
-                <li key={todo.id}>
-                  <label>
-                  <input type="checkbox" checked={todo.completed}
-                    onChange={()=> {this.onToggle(todo)}}/>
-                  {todo.name}
-                  </label>
+  onToggleAll = e => {
+    let { checked } = e.target
+    this.props.todos.forEach(todo => {
+      todo.completed = checked
+    })
+    this.setState(this.state)
+  }
 
-                  <span className="close" onClick={() => {this.handleRemoveTodo(index)}}>X</span>
-                </li>
-              )}
-            </ul>
-          </div>
-        )
-    }
+  render() {
+    let { todos } = this.props
+    return (
+      <div>
+        <input type="checkbox" onChange={this.onToggleAll} />
+        <input type="text"
+          onKeyUp={this.handleKeyup}
+          onChange={this.handleChange}
+          value={this.state.text} />
+        <ul>
+          {todos.map((todo, index) =>
+            <li key={todo.id}>
+              <label>
+                <input type="checkbox" checked={todo.completed}
+                  onChange={() => { this.onToggle(todo) }} />
+                {todo.name}
+              </label>
+
+              <span className="close" onClick={() => { this.handleRemoveTodo(index) }}>X</span>
+            </li>
+          )}
+        </ul>
+      </div>
+    )
+  }
 }
 export default ToDoList