diff --git a/app/actions/index.js b/app/actions/index.js index 51c5460424205213c15e42069d6f0ae2fe6bfd19..bcd0a085a0e3ea63001846201d54fb1441c2f93a 100644 --- a/app/actions/index.js +++ b/app/actions/index.js @@ -22,7 +22,7 @@ export const mkClearRoute = (i) => ({ }) export const mkUpdateRoute = (i, url) => ({ - type: at.CLEAR_ROUTE, + type: at.UPDATE_URL, payload: { index: i, url: url diff --git a/app/components/InputPanel.jsx b/app/components/InputPanel.jsx index 42b314aa7705c5e32712f1b79a3e5270dbdacdc0..b59a6b62b903538d005046e0917dd5274684a183 100644 --- a/app/components/InputPanel.jsx +++ b/app/components/InputPanel.jsx @@ -2,10 +2,14 @@ import React from 'react'; import PropTypes from 'prop-types' import RouteTile from './RouteTile' -const InputPanel = ({routes, onAdd, onDelete}) => ( +const InputPanel = ({routes, onAdd, onDelete, onClear, onUpdate}) => ( <div> {routes.map((stops, i) => ( - <RouteTile onDelete={() => onDelete(i)} key={i} stops={stops} /> + <RouteTile + onDelete={() => onDelete(i)} + onClear={() => onClear(i)} + onAdd={(url) => onUpdate(i, url)} + key={i} stops={stops} /> ))} <RouteTile onAdd={onAdd} stops={[]} /> </div> @@ -15,6 +19,7 @@ InputPanel.propTypes = { routes: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)).isRequired, onAdd: PropTypes.func.isRequired, onDelete: PropTypes.func.isRequired, + onClear: PropTypes.func.isRequired, } export default InputPanel diff --git a/app/components/RouteTile.jsx b/app/components/RouteTile.jsx index b70f7e7dd24ad260d8e92a48d9fb15a6dafeea87..4881fcaef595a2457fe1220ad9309e75c0a7181e 100644 --- a/app/components/RouteTile.jsx +++ b/app/components/RouteTile.jsx @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' -const RouteTile = ({stops, onAdd, url, onDelete}) => { +const RouteTile = ({stops, onAdd, url, onDelete, onClear}) => { let input return stops.length == 0 && url === undefined ? @@ -21,7 +21,7 @@ const RouteTile = ({stops, onAdd, url, onDelete}) => { : <div> { url === undefined && <input onClick={onDelete} type="button" value="-" /> } - { url === undefined && <input type="button" value="🖉" /> } + { url === undefined && <input onClick={onClear} type="button" value="🖉" /> } { url !== undefined && <div className="url">{url}</div> } <ul> {stops.map((stop, i) => ( @@ -36,6 +36,7 @@ RouteTile.propTypes = { url: PropTypes.string, onAdd: PropTypes.func, onDelete: PropTypes.func, + onClear: PropTypes.func, } export default RouteTile diff --git a/app/containers/InputPanel.js b/app/containers/InputPanel.js index 33c79de7664afc326a22e4d2d6b89fc5cdf9f778..2e285c56b1e84291b1728b6a9458dc43f7efd72f 100644 --- a/app/containers/InputPanel.js +++ b/app/containers/InputPanel.js @@ -1,7 +1,7 @@ import { connect } from 'react-redux' import * as at from '../actions/actionTypes' import InputPanel from '../components/InputPanel' -import { mkAddUrl, mkDeleteRoute } from '../actions' +import { mkClearRoute, mkAddUrl, mkDeleteRoute, mkUpdateRoute } from '../actions' const mapStateToProps = state => { return { routes: state.routes } @@ -9,7 +9,9 @@ const mapStateToProps = state => { const mapDispatchToProps = dispatch => ({ onAdd: (url) => dispatch(mkAddUrl(url)), - onDelete: (index) => dispatch(mkDeleteRoute(index)) + onDelete: (index) => dispatch(mkDeleteRoute(index)), + onClear: (index) => dispatch(mkClearRoute(index)), + onUpdate: (url, index) => dispatch(mkUpdateRoute(url, index)) }) export default connect(mapStateToProps, mapDispatchToProps)(InputPanel) diff --git a/app/reducers/index.js b/app/reducers/index.js index 020e6b343edf8b22986885002ba574bcf706232d..a5a227d2a8120c4bf0d982c051710f25c8952178 100644 --- a/app/reducers/index.js +++ b/app/reducers/index.js @@ -14,6 +14,12 @@ const reducer = (state = initialState, action) => { case at.DELETE_ROUTE: return {routes: state.routes.filter((v, i) => i != action.payload)} + case at.CLEAR_ROUTE: + return {routes: state.routes.map((v, i) => i == action.payload ? [] : v)} + + case at.UPDATE_URL: + return {routes: state.routes.map((v, i) => i == action.payload.index ? extractStops(action.payload.url) : v)} + default: return state }