From ae9a9c9549e36115ffee02b1e34993ef402c5af0 Mon Sep 17 00:00:00 2001
From: Frank Sauerburger <frank@sauerburger.com>
Date: Mon, 25 Mar 2019 16:20:27 +0100
Subject: [PATCH] Implement update and clear functionality

---
 app/actions/index.js          | 2 +-
 app/components/InputPanel.jsx | 9 +++++++--
 app/components/RouteTile.jsx  | 5 +++--
 app/containers/InputPanel.js  | 6 ++++--
 app/reducers/index.js         | 6 ++++++
 5 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/app/actions/index.js b/app/actions/index.js
index 51c5460..bcd0a08 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 42b314a..b59a6b6 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 b70f7e7..4881fca 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="&#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
diff --git a/app/containers/InputPanel.js b/app/containers/InputPanel.js
index 33c79de..2e285c5 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 020e6b3..a5a227d 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
   }
-- 
GitLab