Add delete functionality

app/components/InputPanel.jsx

@@ -2,17 +2,19 @@ import React from 'react';
 import PropTypes from 'prop-types'
 import RouteTile from './RouteTile'
 
-const InputPanel = ({routes, onAdd}) => (
+const InputPanel = ({routes, onAdd, onDelete}) => (
   <div>
     {routes.map((stops, i) => (
-      <RouteTile key={i} stops={stops} />
+      <RouteTile onDelete={() => onDelete(i)} key={i} stops={stops} />
     ))}
     <RouteTile onAdd={onAdd} stops={[]} />
   </div>
 )
 
 InputPanel.propTypes = {
-  routes: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)).isRequired
+  routes: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)).isRequired,
+  onAdd: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
 }
 
 export default InputPanel

app/components/RouteTile.jsx

 import React from 'react'
 import PropTypes from 'prop-types'
 
-const RouteTile = ({stops, onAdd, url}) => {
+const RouteTile = ({stops, onAdd, url, onDelete}) => {
   let input
 
-  return stops.length == 0 ?
+  return stops.length == 0 && url === undefined ?
   <div>
       <form onSubmit={(e) => {
         e.preventDefault()
@@ -12,6 +12,7 @@ const RouteTile = ({stops, onAdd, url}) => {
           return
         }
         onAdd(input.value.trim())
+        input.value = ""
       }}>
         <input type="text" ref={node => {input = node}} />
         <input type="submit" value="+" />
@@ -19,7 +20,7 @@ const RouteTile = ({stops, onAdd, url}) => {
   </div>
   :
   <div>
-    { url === undefined && <input type="button" value="-" /> }
+    { url === undefined && <input onClick={onDelete} type="button" value="-" /> }
     { url === undefined && <input type="button" value="&#x1F589;" /> }
     { url !== undefined && <div className="url">{url}</div> }
     <ul>
@@ -33,7 +34,8 @@ const RouteTile = ({stops, onAdd, url}) => {
 RouteTile.propTypes = {
   stops: PropTypes.arrayOf(PropTypes.string).isRequired,
   url: PropTypes.string,
-  onAdd: PropTypes.func.isRequired
+  onAdd: PropTypes.func,
+  onDelete: 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 } from '../actions'
+import { mkAddUrl, mkDeleteRoute } from '../actions'
 
 const mapStateToProps = state => {
   return { routes: state.routes }
 }
 
 const mapDispatchToProps = dispatch => ({
-  onAdd: (url) => dispatch(mkAddUrl(url))
+  onAdd: (url) => dispatch(mkAddUrl(url)),
+  onDelete: (index) => dispatch(mkDeleteRoute(index))
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(InputPanel)

app/helpers/index.js

@@ -20,5 +20,8 @@ export const extractStops = (url) => {
 }
 
 export const buildUrl = (stops) => {
+  if (stops.length == 0) {
+    return ""
+  }
   return "https://www.google.com/maps/dir/" + stops.join("/") + "/"
 }

app/reducers/index.js

@@ -11,6 +11,9 @@ const reducer = (state = initialState, action) => {
     case at.ADD_URL:
       return {routes: state.routes.concat([extractStops(action.payload)])}
 
+    case at.DELETE_ROUTE:
+      return {routes: state.routes.filter((v, i) => i != action.payload)}
+
     default:
       return state
   }