From 4c85f6e613ddc89a45d9fab22dcd8eda5ab1cc5d Mon Sep 17 00:00:00 2001
From: Frank Sauerburger <frank@sauerburger.com>
Date: Mon, 25 Mar 2019 15:24:23 +0100
Subject: [PATCH] Add delete functionality

---
 app/components/InputPanel.jsx |  8 +++++---
 app/components/RouteTile.jsx  | 10 ++++++----
 app/containers/InputPanel.js  |  5 +++--
 app/helpers/index.js          |  3 +++
 app/reducers/index.js         |  3 +++
 5 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/app/components/InputPanel.jsx b/app/components/InputPanel.jsx
index 2f3fda7..42b314a 100644
--- a/app/components/InputPanel.jsx
+++ b/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
diff --git a/app/components/RouteTile.jsx b/app/components/RouteTile.jsx
index 321995f..b70f7e7 100644
--- a/app/components/RouteTile.jsx
+++ b/app/components/RouteTile.jsx
@@ -1,10 +1,10 @@
 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
diff --git a/app/containers/InputPanel.js b/app/containers/InputPanel.js
index a099b82..33c79de 100644
--- a/app/containers/InputPanel.js
+++ b/app/containers/InputPanel.js
@@ -1,14 +1,15 @@
 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)
diff --git a/app/helpers/index.js b/app/helpers/index.js
index 87918fc..2ba3434 100644
--- a/app/helpers/index.js
+++ b/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("/") + "/"
 }
diff --git a/app/reducers/index.js b/app/reducers/index.js
index 3e8b776..020e6b3 100644
--- a/app/reducers/index.js
+++ b/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
   }
-- 
GitLab