Add input value to state for each stop

Signed-off-by: Thomas Shawarma Haddad <thomas.haddad@af83.com>
Signed-off-by: Paul-Xavier Ceccaldi <paul-xavier.ceccaldi@af83.com>

6 files changed, 31 insertions, 5 deletions

diff --git a/app/assets/javascripts/es6_browserified/actions/index.js b/app/assets/javascripts/es6_browserified/actions/index.js
index e90631c7f..06b0410b6 100644
--- a/app/assets/javascripts/es6_browserified/actions/index.js
+++ b/app/assets/javascripts/es6_browserified/actions/index.js
@@ -27,5 +27,12 @@ module.exports = {
       type: 'DELETE_STOP',
       index
     }
+  },
+  updateInputValue: (index, text) => {
+    return {
+      type : "UPDATE_INPUT_VALUE",
+      index,
+      text
+    }
   }
 }
diff --git a/app/assets/javascripts/es6_browserified/components/Todo.js b/app/assets/javascripts/es6_browserified/components/Todo.js
index 6a9599812..574f3ac88 100644
--- a/app/assets/javascripts/es6_browserified/components/Todo.js
+++ b/app/assets/javascripts/es6_browserified/components/Todo.js
@@ -12,7 +12,7 @@ const Todo = (props)  => (
         <span className='strong'>Id: {props.id}</span>
       </div>
       <div style={{display: 'inline-block', width: '91%'}}>
-        <input type='text' className='form-control' id={'route_stop_points_' + props.id}/>
+        <input type='text' className='form-control' id={'route_stop_points_' + props.id} value={props.text} onChange={props.onChange}/>
       </div>
     </div>
 
@@ -48,6 +48,7 @@ Todo.propTypes = {
   onDeleteClick: PropTypes.func.isRequired,
   onMoveUpClick: PropTypes.func.isRequired,
   onMoveDownClick: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
   first: PropTypes.bool,
   last: PropTypes.bool
 }
diff --git a/app/assets/javascripts/es6_browserified/components/TodoList.js b/app/assets/javascripts/es6_browserified/components/TodoList.js
index 707e3a796..96991e76b 100644
--- a/app/assets/javascripts/es6_browserified/components/TodoList.js
+++ b/app/assets/javascripts/es6_browserified/components/TodoList.js
@@ -2,7 +2,7 @@ var React = require('react')
 var PropTypes = require('react').PropTypes
 var Todo = require('./Todo')
 
-const TodoList = ({ todos, onDeleteClick, onMoveUpClick, onMoveDownClick }) => (
+const TodoList = ({ todos, onDeleteClick, onMoveUpClick, onMoveDownClick, onChange }) => (
   <div className='list-group'>
     {todos.map((todo, index) =>
       <Todo
@@ -11,6 +11,7 @@ const TodoList = ({ todos, onDeleteClick, onMoveUpClick, onMoveDownClick }) => (
         onDeleteClick={() => onDeleteClick(index)}
         onMoveUpClick={() => onMoveUpClick(index)}
         onMoveDownClick={() => onMoveDownClick(index)}
+        onChange={(event) => onChange(index, event.currentTarget.value)}
         first={ index === 0 }
         last={ index === (todos.length - 1) }
       />
diff --git a/app/assets/javascripts/es6_browserified/containers/AddTodo.js b/app/assets/javascripts/es6_browserified/containers/AddTodo.js
index ddaedf8f6..539b6f78e 100644
--- a/app/assets/javascripts/es6_browserified/containers/AddTodo.js
+++ b/app/assets/javascripts/es6_browserified/containers/AddTodo.js
@@ -3,8 +3,6 @@ var connect = require('react-redux').connect
 var addTodo = require('../actions').addStop
 
 let AddTodo = ({ dispatch }) => {
-  let input
-
   return (
     <div className="clearfix" style={{marginBottom: 10}}>
       <form onSubmit={e => {
diff --git a/app/assets/javascripts/es6_browserified/containers/VisibleTodoList.js b/app/assets/javascripts/es6_browserified/containers/VisibleTodoList.js
index a6452018b..09da36060 100644
--- a/app/assets/javascripts/es6_browserified/containers/VisibleTodoList.js
+++ b/app/assets/javascripts/es6_browserified/containers/VisibleTodoList.js
@@ -3,6 +3,7 @@ var toggleTodo = require('../actions').toggleTodo
 var deleteStop = require('../actions').deleteStop
 var moveStopUp = require('../actions').moveStopUp
 var moveStopDown = require('../actions').moveStopDown
+var handleChange = require('../actions').updateInputValue
 var TodoList = require('../components/TodoList')
 
 const mapStateToProps = (state) => {
@@ -21,6 +22,9 @@ const mapDispatchToProps = (dispatch) => {
     },
     onMoveDownClick: (index) =>{
       dispatch(moveStopDown(index))
+    },
+    onChange: (index, text) =>{
+      dispatch(handleChange(index, text))
     }
   }
 }
diff --git a/app/assets/javascripts/es6_browserified/reducers/todos.js b/app/assets/javascripts/es6_browserified/reducers/todos.js
index f2af9452a..53bceb62d 100644
--- a/app/assets/javascripts/es6_browserified/reducers/todos.js
+++ b/app/assets/javascripts/es6_browserified/reducers/todos.js
@@ -1,11 +1,22 @@
 const todo = (state = {}, action) => {
-  console.log('action', action)
   switch (action.type) {
     case 'ADD_STOP':
       return {
+        text: '',
         id: action.id
       }
+    case 'UPDATE_INPUT_VALUE':
+      if (state.id !== action.index) {
+        return state
+      }
 
+      // console.log('action', action)
+      // console.log('state', state)
+      return Object.assign(
+        {},
+        state,
+        {text: action.text}
+      )
     default:
       return state
   }
@@ -37,6 +48,10 @@ const todos = (state = [], action) => {
         ...state.slice(0, action.index),
         ...state.slice(action.index + 1)
       ]
+    case 'UPDATE_INPUT_VALUE':
+      return state.map(t =>
+        todo(t, action)
+      )
     default:
       return state
   }