fix(tasks): input handles own form state

reduxjs/redux#1287 (comment)

client/actions/index.js

@@ -1,19 +1,14 @@
-export const closeTask = (id) => ({
+export const closeTask = (id, text) => ({
   type: 'CLOSE',
-  id
+  id,
+  text
 });
 
 export const deleteTask = (id) => ({
   type: 'DELETE',
   id
 });
 
-export const editTask = (id, text) => ({
-  type: 'EDIT',
-  id,
-  text
-});
-
 export const get = () => ({
   type: 'GET'
 });

client/components/TaskList/Task.js

@@ -27,7 +27,7 @@ const TrashButton = styled(Button)`
   padding: 0;
 `;
 
-const handleInputChange = (handler) => {
+const handleBlur = (handler) => {
   return (event) => {
     handler(event.target.value);
   };
@@ -38,15 +38,14 @@ const handleKeyDown = (handler) => {
     // pressed enter, escape, or tab
     if (event.key === 'Enter' || event.keyCode === 27 || event.keyCode === 9) {
       event.preventDefault();
-      handler();
+      handler(event.target.value);
     }
   };
 }
 
 const Task = ({
   closeTask,
   deleteTask,
-  editTask,
   openTask,
   isOpened,
   text
@@ -55,8 +54,7 @@ const Task = ({
     {isOpened
       ? <input
           autoFocus
-          onBlur={closeTask}
-          onChange={handleInputChange(editTask)}
+          onBlur={handleBlur(closeTask)}
           onKeyDown={handleKeyDown(closeTask)}
           placeholder='Edit task description'
           type='text'
@@ -76,16 +74,16 @@ const Task = ({
 );
 
 Task.propTypes = {
+  closeTask: PropTypes.func,
   deleteTask: PropTypes.func,
-  editTask: PropTypes.func,
   openTask: PropTypes.func,
   isOpened: PropTypes.bool,
   text: PropTypes.string
 }
 
 Task.defaultProps = {
+  closeTask: null,
   deleteTask: null,
-  editTask: null,
   openTask: null,
   isOpened: false,
   text: PropTypes.string

client/components/TaskList/index.js

@@ -25,7 +25,6 @@ const EmptyTaskList = Wrapper.extend`
 const TaskList = ({
   closeTask,
   deleteTask,
-  editTask,
   openTask,
   tasks
 }) => (
@@ -34,9 +33,8 @@ const TaskList = ({
       ? tasks.map((task) => (
         <Task
           key={task.id}
-          closeTask={() => { closeTask(task.id); }}
+          closeTask={(text) => { closeTask(task.id, text); }}
           deleteTask={() => { deleteTask(task.id); }}
-          editTask={(text) => { editTask(task.id, text); }}
           openTask={() => { openTask(task.id); }}
           isOpened={task.isOpened}
           text={task.text}

client/containers/TaskListContainer.js

@@ -4,7 +4,6 @@ import { connect } from 'react-redux';
 import {
   closeTask,
   deleteTask,
-  editTask,
   openTask
 } from '../actions';
 import TaskList from '../components/TaskList';
@@ -16,7 +15,6 @@ const mapStateToProps = (state) => ({
 const mapDispatchToProps = {
   closeTask,
   deleteTask,
-  editTask,
   openTask
 }
 

client/reducers/tasks.js

@@ -1,39 +1,29 @@
 const DEFAULT_TODO = 'New task';
 
-const getNextId = () => Math.random(); // TODO: how to generate more stably?
-
-// inserts element without modification
-const insert = (array, index, item) => {
-  return [
-    ...array.slice(0, index),
-    item,
-    ...array.slice(index+1)
-  ];
-}
+// TODO: how to generate more stably?
+const getNextId = () => {
+  return Math.random();
+};
 
 const tasks = (state = [], action) => {
   switch (action.type) {
     case 'CLOSE': {
       const i = state.findIndex((task) => task.id === action.id);
-      const closeTask = {
+      const closedTask = {
         ...state[i],
-        isOpened: false
+        isOpened: false,
+        text: action.text || DEFAULT_TODO
       };
-      return insert(state, i, closeTask);
+      return [
+        ...state.slice(0, i),
+        closedTask,
+        ...state.slice(i+1)
+      ];
     }
 
     case 'DELETE':
       return state.filter((task) => task.id !== action.id);
 
-    case 'EDIT': {
-      const i = state.findIndex((task) => task.id === action.id);
-      const editedTask = {
-        ...state[i],
-        text: action.text
-      };
-      return insert(state, i, editedTask);
-    }
-
     case 'GET': {
       // TODO: use thunk to make API request
       console.log('get');
@@ -42,9 +32,13 @@ const tasks = (state = [], action) => {
     case 'NEW': {
       const newTask = {
         id: getNextId(),
+        isOpened: true,
         text: DEFAULT_TODO
       };
-      return insert(state, 0, newTask);
+      return [
+        newTask,
+        ...state.slice(0)
+      ];
     }
 
     case 'OPEN': {
@@ -53,7 +47,11 @@ const tasks = (state = [], action) => {
         ...state[i],
         isOpened: true
       };
-      return insert(state, i, openedTask);
+      return [
+        ...state.slice(0, i),
+        openedTask,
+        ...state.slice(i+1)
+      ];
     }
 
     case 'SAVE': {