Implement basic add url interactivity

app/actions/actionTypes.js

+export const ADD_URL = "ADD_URL"
+export const DELETE_ROUTE = "DELETE_ROUTE"
+export const CLEAR_ROUTE = "CLEAR_ROUTE"
+export const UPDATE_URL= "UPDATE_URL"

app/actions/index.js

+import * as at from './actionTypes'
+
+// export const ADD_URL = "ADD_URL"
+// export const DELETE_ROUTE = "DELETE_ROUTE"
+// export const CLEAR_ROUTE = "CLEAR_ROUTE"
+// export const UPDATE_URL= "UPDATE_URL"
+
+export const mkAddUrl = (url) => ({
+  type: at.ADD_URL,
+  payload: url
+})
+    
+
+export const mkDeleteRoute = (i) => ({
+  type: at.DELETE_ROUTE,
+  payload: i
+})
+  
+export const mkClearRoute = (i) => ({
+  type: at.CLEAR_ROUTE,
+  payload: i
+})
+
+export const mkUpdateRoute = (i, url) => ({
+  type: at.CLEAR_ROUTE,
+  payload: {
+    index: i,
+    url: url
+  }
+})

app/components/App.jsx

 import React from 'react'
-import OutputPanel from './OutputPanel'
-import InputPanel from './InputPanel'
+import OutputPanel from './../containers/OutputPanel'
+import InputPanel from './../containers/InputPanel'
 
 const App = () => (
   <div>
-    <InputPanel routes={[["a", "b", "c"], [], ["1", "2", "4"]]}/>
-    <OutputPanel url="https://example.com" stops={["x", "y", "z"]} />
+    <InputPanel />
+    <OutputPanel />
   </div>
 )
 

app/components/InputPanel.jsx

@@ -2,12 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types'
 import RouteTile from './RouteTile'
 
-const InputPanel = ({routes}) => (
+const InputPanel = ({routes, onAdd}) => (
   <div>
     {routes.map((stops, i) => (
       <RouteTile key={i} stops={stops} />
     ))}
-    <RouteTile stops={[]} noStopsText="Add a link to a partial route" />
+    <RouteTile onAdd={onAdd} stops={[]} />
   </div>
 )
 

app/components/OutputPanel.jsx

 import React from 'react'
 import PropTypes from 'prop-types'
 import RouteTile from './RouteTile'
+import { buildUrl } from '../helpers'
 
-const OutputPanel = ({url, stops}) => (
+const OutputPanel = ({stops}) => (
   <div>
     <h2>Complete Route</h2>
-    <RouteTile url={url} stops={stops}
-      noStopsText="Add links to partial routes on the left" />
+    <RouteTile url={buildUrl(stops)} stops={stops} />
   </div>
 )
 
 OutputPanel.propTypes = {
-  url: PropTypes.string.isRequired,
   stops: PropTypes.arrayOf(PropTypes.string).isRequired
 }
 

app/components/RouteTile.jsx

 import React from 'react'
 import PropTypes from 'prop-types'
 
-const RouteTile = ({stops, url}) => (
-  stops.length == 0 ?
+const RouteTile = ({stops, onAdd, url}) => {
+  let input
+
+  return stops.length == 0 ?
   <div>
-      <input type="text" />
-      <input type="button" value="+" />
+      <form onSubmit={(e) => {
+        e.preventDefault()
+        if (input.value.trim() == "") {
+          return
+        }
+        onAdd(input.value.trim())
+      }}>
+        <input type="text" ref={node => {input = node}} />
+        <input type="submit" value="+" />
+      </form>
   </div>
   :
   <div>
@@ -18,11 +28,12 @@ const RouteTile = ({stops, url}) => (
       ))}
     </ul>
   </div>
-)
+}
 
 RouteTile.propTypes = {
   stops: PropTypes.arrayOf(PropTypes.string).isRequired,
-  url: PropTypes.string
+  url: PropTypes.string,
+  onAdd: PropTypes.func.isRequired
 }
 
 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'
+
+const mapStateToProps = state => {
+  return { routes: state.routes }
+}
+
+const mapDispatchToProps = dispatch => ({
+  onAdd: (url) => dispatch(mkAddUrl(url))
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(InputPanel)

app/containers/OutputPanel.js

+import { connect } from 'react-redux'
+import * as at from '../actions/actionTypes'
+import OutputPanel from '../components/OutputPanel'
+
+const mapStateToProps = state => {
+  return {
+      stops: [].concat.apply([], state.routes)
+    }
+}
+
+export default connect(mapStateToProps)(OutputPanel)

app/helpers/index.js

+
+
+/*
+https://www.google.com/maps/dir/53.1518753,12.4661154/52.1956608,9.1839549/51.9431347,12.9028906/@51.1758057,10.4541194,6z/data=!4m2!4m1!3e0
+
+*/
+export const extractStops = (url) => {
+  const route = url.split("@")[0]
+  const match = route.match("^https?://(www\.)?google.[a-z]+/maps/dir/")
+  if (match === null) {
+    return []
+  }
+  const prefix = match[0]
+  let stops = route.slice(match[0].length).split("/")
+  if (stops[stops.length - 1] == "") {
+    stops.pop()
+  }
+  
+  return stops
+}
+
+export const buildUrl = (stops) => {
+  return "https://www.google.com/maps/dir/" + stops.join("/") + "/"
+}

app/initialize.jsx

@@ -3,15 +3,17 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { createStore } from 'redux';
 import App from './components/App';
+import reducer from './reducers'
 
 // const store = createStore(counterApp, module.hot && module.hot.data && (module.hot.data.counter || 0));
+const store = createStore(reducer,  window.__REDUX_DEVTOOLS_EXTENSION__() && window.__REDUX_DEVTOOLS_EXTENSION__())
 
 const load = () => {
   ReactDOM.render(
-    //<Provider store={store}>
+    <Provider store={store}>
       <App />
-    //</Provider>
-    , document.querySelector('#react-root')
+    </Provider>,
+    document.querySelector('#react-root')
   );
 };
 

app/reducers/index.js

+import * as at from '../actions/actionTypes'
+import { extractStops } from '../helpers'
+
+
+const initialState = {
+  routes: [],
+}
+
+const reducer = (state = initialState, action) => {
+  switch (action.type) {
+    case at.ADD_URL:
+      return {routes: state.routes.concat([extractStops(action.payload)])}
+
+    default:
+      return state
+  }
+}
+
+export default reducer