diff options
7 files changed, 44 insertions, 19 deletions
diff --git a/app/assets/javascripts/es6_browserified/actions/index.js b/app/assets/javascripts/es6_browserified/actions/index.js index 06b0410b6..c0f64005e 100644 --- a/app/assets/javascripts/es6_browserified/actions/index.js +++ b/app/assets/javascripts/es6_browserified/actions/index.js @@ -1,10 +1,8 @@ -let nextTodoId = 0 module.exports = { addStop : () => { return { - type: 'ADD_STOP', - id: nextTodoId++ + type: 'ADD_STOP' } }, diff --git a/app/assets/javascripts/es6_browserified/components/Todo.js b/app/assets/javascripts/es6_browserified/components/Todo.js index 574f3ac88..aeee78295 100644 --- a/app/assets/javascripts/es6_browserified/components/Todo.js +++ b/app/assets/javascripts/es6_browserified/components/Todo.js @@ -9,10 +9,10 @@ const Todo = (props) => ( <div className='list-group-item' style={Container}> <div style={firstBlock}> <div style={{display: 'inline-block', width: '9%'}}> - <span className='strong'>Id: {props.id}</span> + <span className='strong'>Id: {props.index}</span> </div> <div style={{display: 'inline-block', width: '91%'}}> - <input type='text' className='form-control' id={'route_stop_points_' + props.id} value={props.text} onChange={props.onChange}/> + <input type='text' className='form-control' id={'route_stop_points_' + props.index} value={props.text} onChange={props.onChange}/> </div> </div> diff --git a/app/assets/javascripts/es6_browserified/components/TodoList.js b/app/assets/javascripts/es6_browserified/components/TodoList.js index 96991e76b..768c691bb 100644 --- a/app/assets/javascripts/es6_browserified/components/TodoList.js +++ b/app/assets/javascripts/es6_browserified/components/TodoList.js @@ -21,7 +21,7 @@ const TodoList = ({ todos, onDeleteClick, onMoveUpClick, onMoveDownClick, onChan TodoList.propTypes = { todos: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.number.isRequired, + index: PropTypes.number.isRequired, }).isRequired).isRequired, onDeleteClick: PropTypes.func.isRequired, onMoveUpClick: PropTypes.func.isRequired, diff --git a/app/assets/javascripts/es6_browserified/getJSON.js b/app/assets/javascripts/es6_browserified/getJSON.js deleted file mode 100644 index c65336b2d..000000000 --- a/app/assets/javascripts/es6_browserified/getJSON.js +++ /dev/null @@ -1,4 +0,0 @@ -data = decodeURIComponent(window.itinerary_stop) -JSONobject = JSON.parse(data) - -console.log("JSON", JSONobject) diff --git a/app/assets/javascripts/es6_browserified/reducers/todos.js b/app/assets/javascripts/es6_browserified/reducers/todos.js index 53bceb62d..d5a02f40a 100644 --- a/app/assets/javascripts/es6_browserified/reducers/todos.js +++ b/app/assets/javascripts/es6_browserified/reducers/todos.js @@ -1,17 +1,15 @@ -const todo = (state = {}, action) => { +const todo = (state = {}, action, length) => { switch (action.type) { case 'ADD_STOP': return { text: '', - id: action.id + index: length } case 'UPDATE_INPUT_VALUE': - if (state.id !== action.index) { + if (state.index !== action.index) { return state } - // console.log('action', action) - // console.log('state', state) return Object.assign( {}, state, @@ -27,9 +25,11 @@ const todos = (state = [], action) => { case 'ADD_STOP': return [ ...state, - todo(undefined, action) + todo(undefined, action, state.length) ] case 'MOVE_STOP_UP': + state[action.index].index = state[action.index - 1].index + state[action.index - 1].index = state[action.index].index + 1 return [ ...state.slice(0, action.index - 1), state[action.index], @@ -37,6 +37,8 @@ const todos = (state = [], action) => { ...state.slice(action.index + 1) ] case 'MOVE_STOP_DOWN': + state[action.index + 1].index = state[action.index].index + state[action.index].index = state[action.index + 1].index + 1 return [ ...state.slice(0, action.index), state[action.index + 1], @@ -46,7 +48,10 @@ const todos = (state = [], action) => { case 'DELETE_STOP': return [ ...state.slice(0, action.index), - ...state.slice(action.index + 1) + ...state.slice(action.index + 1).map((todo)=>{ + todo.index-- + return todo + }) ] case 'UPDATE_INPUT_VALUE': return state.map(t => diff --git a/app/assets/javascripts/es6_browserified/stop_points.js b/app/assets/javascripts/es6_browserified/stop_points.js index a324ef5bd..41c99c90f 100644 --- a/app/assets/javascripts/es6_browserified/stop_points.js +++ b/app/assets/javascripts/es6_browserified/stop_points.js @@ -2,10 +2,37 @@ var React = require('react') var render = require('react-dom').render var Provider = require('react-redux').Provider var createStore = require('redux').createStore +// var applyMiddleware = require('redux').applyMiddleware var todoApp = require('./reducers') var App = require('./components/App') +// var createLogger = require('redux-logger').default +// var thunkMiddleware = require('redux-thunk').default +// var promise = require('redux-promise') -let store = createStore(todoApp) +const getInitialState = () => { + let state = [] + let datas = JSON.parse(decodeURIComponent(window.itinerary_stop)) + for (let [index, value] of datas.entries()){ + state.push({ + index: index, + text: value.name, + city_name: value.city_name, + zip_code: value.zip_code + }) + } + console.log(state) + return state +} + +var initialState = {todos: getInitialState()} +// const loggerMiddleware = createLogger() +let store = createStore( + todoApp, + initialState + // applyMiddleware(thunkMiddleware, promise, loggerMiddleware) +) + +console.log(store.getState()) render( <Provider store={store}> diff --git a/app/views/routes/_form.html.slim b/app/views/routes/_form.html.slim index 9a42a3e26..2b1fe0687 100644 --- a/app/views/routes/_form.html.slim +++ b/app/views/routes/_form.html.slim @@ -50,7 +50,6 @@ // Get JSON data for route stop points = javascript_tag do | window.itinerary_stop = "#{URI.escape(@route.stop_areas.all.to_json)}" -= javascript_include_tag 'es6_browserified/getJSON.js' / StopPoints Reactux component = javascript_include_tag 'es6_browserified/stop_points.js' |