Adds completion of todo items

Author: Zachery Moneypenny

.eslintrc.json

@@ -8,6 +8,9 @@
     "object-curly-spacing": 0,
     "space-before-function-paren": ["error", "always"],
     "arrow-body-style": 0,
-    "react/no-array-index-key": 0
+    "react/no-array-index-key": 0,
+    "no-console": 0,
+    "class-methods-use-this": 0,
+    "no-param-reassign": 0
   }
 }

app/javascript/components/App.jsx

@@ -1,5 +1,6 @@
 import React, {PureComponent} from 'react';
-import {remove}               from 'lodash';
+import {remove, each}         from 'lodash';
+import {v4 as uuid}           from 'uuid';
 
 import TodoForm from './TodoForm';
 import TodoList from './TodoList';
@@ -16,15 +17,31 @@ class App extends PureComponent {
 
     this.handleTodoAdd = this.handleTodoAdd.bind(this);
     this.handleTodoRemove = this.handleTodoRemove.bind(this);
+    this.handleTodoToggle = this.handleTodoToggle.bind(this);
   }
 
-  handleTodoAdd (todo) {
+  handleTodoAdd (todoDescription) {
+    const todo = {
+      id: uuid.v4(),
+      label: todoDescription,
+      completed: false,
+    };
     this.setState({todos: [todo, ...this.state.todos]});
   }
 
-  handleTodoRemove (todo) {
+  handleTodoRemove (todoId) {
+    const todos = [...this.state.todos];
+    remove(todos, t => t.id === todoId);
+    this.setState({todos});
+  }
+
+  handleTodoToggle (todoId) {
     const todos = [...this.state.todos];
-    remove(todos, t => t === todo);
+    each(todos, (todo) => {
+      if (todo.id === todoId) {
+        todo.completed = !todo.completed;
+      }
+    });
     this.setState({todos});
   }
 
@@ -35,7 +52,11 @@ class App extends PureComponent {
       <div className={styles.app}>
         <h2>My Todo List</h2>
         <TodoForm handleTodoAdd={this.handleTodoAdd} />
-        <TodoList todos={todos} handleTodoRemove={this.handleTodoRemove} />
+        <TodoList
+          todos={todos}
+          handleTodoRemove={this.handleTodoRemove}
+          handleTodoToggle={this.handleTodoToggle}
+        />
       </div>
     );
   }

app/javascript/components/Todo.jsx

@@ -1,33 +1,60 @@
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import PropTypes              from 'prop-types';
 
 import styles from './Todo.scss';
 
-class Todo extends PureComponent {
+class Todo extends Component {
   constructor (props) {
     super(props);
 
     this.onRemoveClick = this.onRemoveClick.bind(this);
+    this.onCompletedToggle = this.onCompletedToggle.bind(this);
+  }
+
+  shouldComponentUpdate () {
+    return true;
   }
 
   onRemoveClick (event) {
     event.preventDefault();
-    this.props.handleTodoRemove(this.props.todo);
+    const {todo} = this.props;
+    this.props.handleTodoRemove(todo.id);
+  }
+
+  onCompletedToggle () {
+    const {todo} = this.props;
+    this.props.handleTodoToggle(todo.id);
   }
 
   render () {
+    const {todo} = this.props;
+    let classes = '';
+    if (todo.completed) {
+      classes = styles.completed;
+    }
+
     return (
       <li className={styles.todo}>
+        <input
+          type="checkbox"
+          checked={todo.completed}
+          onChange={this.onCompletedToggle}
+        />
         <a role="button" tabIndex="-1" onClick={this.onRemoveClick}>&times;</a>
-        {this.props.todo}
+        <span className={classes}>{todo.label}</span>
       </li>
     );
   }
 }
 
 Todo.propTypes = {
-  todo: PropTypes.string.isRequired,
+  todo: PropTypes.shape({
+    id: PropTypes.string,
+    label: PropTypes.string,
+    completed: PropTypes.bool,
+  }).isRequired,
   handleTodoRemove: PropTypes.func.isRequired,
+  handleTodoToggle: PropTypes.func.isRequired,
 };
 
 export default Todo;

app/javascript/components/Todo.scss

@@ -2,6 +2,11 @@
   padding: 10px 10px;
   border-bottom: 1px dashed #666;
 
+  input[type=checkbox] {
+    font-size: 120%;
+    margin-right: 10px;
+  }
+
   &:last-child { border-bottom: none; }
   &:hover { background-color: lightyellow; }
 
@@ -10,3 +15,9 @@
     cursor: pointer;
   }
 }
+
+.completed {
+  text-decoration: line-through;
+  font-style: italic;
+  color: #ddd;
+}

app/javascript/components/TodoList.jsx

@@ -1,24 +1,29 @@
-import React, {PureComponent} from 'react';
+import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 
 import Todo from './Todo';
 
 import styles from './TodoList.scss';
 
-class TodoList extends PureComponent {
+class TodoList extends Component {
+  shouldComponentUpdate () {
+    return true;
+  }
+
   render () {
-    let todos = this.props.todos.map((todo, key) => {
+    let todos = this.props.todos.map((todo) => {
       return (
         <Todo
-          key={key}
+          key={todo.id}
           todo={todo}
           handleTodoRemove={this.props.handleTodoRemove}
+          handleTodoToggle={this.props.handleTodoToggle}
         />
       );
     });
 
     if (todos.length === 0) {
-      todos = [<li className={styles.noTodos}>No todos yet</li>];
+      todos = [<li key="noTodos" className={styles.noTodos}>No todos yet</li>];
     }
 
     return (
@@ -30,8 +35,13 @@ class TodoList extends PureComponent {
 }
 
 TodoList.propTypes = {
-  todos: PropTypes.arrayOf(PropTypes.string).isRequired,
+  todos: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    label: PropTypes.string,
+    completed: PropTypes.bool,
+  })).isRequired,
   handleTodoRemove: PropTypes.func.isRequired,
+  handleTodoToggle: PropTypes.func.isRequired,
 };
 
 export default TodoList;

package.json

@@ -29,6 +29,7 @@
     "react-hot-loader": "next",
     "sass-loader": "^6.0.5",
     "style-loader": "^0.18.1",
+    "uuid": "^3.0.1",
     "webpack": "^2.5.1",
     "webpack-manifest-plugin": "^1.1.0",
     "webpack-merge": "^4.1.0"

yarn.lock

@@ -5112,7 +5112,7 @@ uuid@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"
 
-uuid@^3.0.0:
+uuid@^3.0.0, uuid@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"