Implement update and clear functionality

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

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

app/components/RouteTile.jsx

 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="&#x1F589;" /> }
+    { url === undefined && <input onClick={onClear} type="button" value="&#x1F589;" /> }
     { 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

app/containers/InputPanel.js

 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)

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
   }