From 2f19663d6f4a60a61aae1773b233152a8013c4c1 Mon Sep 17 00:00:00 2001
From: Oleksandr Bratashov <abratashov@gmail.com>
Date: Thu, 5 Apr 2018 21:24:08 +0300
Subject: [PATCH] Add destroy feature

---
 examples/todos/src/actions/index.js              | 5 +++++
 examples/todos/src/components/Todo.js            | 3 ++-
 examples/todos/src/components/TodoList.js        | 6 ++++--
 examples/todos/src/containers/VisibleTodoList.js | 4 +++-
 examples/todos/src/reducers/todos.js             | 2 ++
 5 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/examples/todos/src/actions/index.js b/examples/todos/src/actions/index.js
index d10bb7a9e0..21a908008b 100644
--- a/examples/todos/src/actions/index.js
+++ b/examples/todos/src/actions/index.js
@@ -5,6 +5,11 @@ export const addTodo = text => ({
   text
 })
 
+export const destroyTodo = id => ({
+  type: 'DESTROY_TODO',
+  id
+})
+
 export const setVisibilityFilter = filter => ({
   type: 'SET_VISIBILITY_FILTER',
   filter
diff --git a/examples/todos/src/components/Todo.js b/examples/todos/src/components/Todo.js
index 09b5b40984..ca2fcd82dd 100644
--- a/examples/todos/src/components/Todo.js
+++ b/examples/todos/src/components/Todo.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const Todo = ({ onClick, completed, text }) => (
+const Todo = ({ onClick, onDestroy, completed, text }) => (
   <li
     onClick={onClick}
     style={{
@@ -9,6 +9,7 @@ const Todo = ({ onClick, completed, text }) => (
     }}
   >
     {text}
+    <div onClick={onDestroy}>[X]</div>
   </li>
 )
 
diff --git a/examples/todos/src/components/TodoList.js b/examples/todos/src/components/TodoList.js
index 7591db6b61..3a2fd809c4 100644
--- a/examples/todos/src/components/TodoList.js
+++ b/examples/todos/src/components/TodoList.js
@@ -2,13 +2,14 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Todo from './Todo'
 
-const TodoList = ({ todos, toggleTodo }) => (
+const TodoList = ({ todos, toggleTodo, destroyTodo }) => (
   <ul>
     {todos.map(todo =>
       <Todo
         key={todo.id}
         {...todo}
         onClick={() => toggleTodo(todo.id)}
+        onDestroy={() => destroyTodo(todo.id)}
       />
     )}
   </ul>
@@ -20,7 +21,8 @@ TodoList.propTypes = {
     completed: PropTypes.bool.isRequired,
     text: PropTypes.string.isRequired
   }).isRequired).isRequired,
-  toggleTodo: PropTypes.func.isRequired
+  toggleTodo: PropTypes.func.isRequired,
+  destroyTodo: PropTypes.func.isRequired
 }
 
 export default TodoList
diff --git a/examples/todos/src/containers/VisibleTodoList.js b/examples/todos/src/containers/VisibleTodoList.js
index 0b76e6c663..e0a84924f2 100644
--- a/examples/todos/src/containers/VisibleTodoList.js
+++ b/examples/todos/src/containers/VisibleTodoList.js
@@ -1,5 +1,6 @@
 import { connect } from 'react-redux'
 import { toggleTodo } from '../actions'
+import { destroyTodo } from '../actions'
 import TodoList from '../components/TodoList'
 
 const getVisibleTodos = (todos, filter) => {
@@ -20,7 +21,8 @@ const mapStateToProps = state => ({
 })
 
 const mapDispatchToProps = dispatch => ({
-  toggleTodo: id => dispatch(toggleTodo(id))
+  toggleTodo: id => dispatch(toggleTodo(id)),
+  destroyTodo: id => dispatch(destroyTodo(id))
 })
 
 export default connect(
diff --git a/examples/todos/src/reducers/todos.js b/examples/todos/src/reducers/todos.js
index fc6ed32d88..899aafea96 100644
--- a/examples/todos/src/reducers/todos.js
+++ b/examples/todos/src/reducers/todos.js
@@ -9,6 +9,8 @@ const todos = (state = [], action) => {
           completed: false
         }
       ]
+    case 'DESTROY_TODO':
+      return state.filter(todo => (todo.id !== action.id) )
     case 'TOGGLE_TODO':
       return state.map(todo =>
         (todo.id === action.id)