fix(react-router): handle any route w webapp + support otp.js legacy route

Author: landonreed

lib/actions/ui.js

@@ -40,13 +40,14 @@ export function matchContentToUrl (location) {
     // This is a bit of a hack to make up for the fact that react-router does
     // not always provide the match params as expected.
     // https://github.com/ReactTraining/react-router/issues/5870#issuecomment-394194338
-    const root = location.pathname.split('/')[1]
+    let root = location.pathname.split('/')[1]
     const match = matchPath(location.pathname, {
       path: `/${root}/:id`,
       exact: true,
       strict: false
     })
     const id = match && match.params && match.params.id
+    console.log(location, id)
     switch (root) {
       case 'route':
         if (id) {
@@ -65,9 +66,16 @@ export function matchContentToUrl (location) {
           dispatch(setMainPanelContent(MainPanelContent.STOP_VIEWER))
         }
         break
+      case 'start':
       case '@':
         // Parse comma separated params (ensuring numbers are parsed correctly).
-        const [lat, lon, zoom, routerId] = id.split(',').map(s => isNaN(s) ? s : +s)
+        let [lat, lon, zoom, routerId] = id ? idToParams(id) : []
+        if (!lat || !lon) {
+          // Attempt to parse path. (Legacy UI otp.js used slashes in the
+          // pathname to specify lat, lon, etc.)
+          [,, lat, lon, zoom, routerId] = idToParams(location.pathname, '/')
+        }
+        console.log('Setting start position/zoom/router', lat, lon, zoom, routerId)
         // Update map location/zoom and optionally override router ID.
         dispatch(setMapCenter({ lat, lon }))
         dispatch(setMapZoom({ zoom }))
@@ -82,6 +90,10 @@ export function matchContentToUrl (location) {
   }
 }
 
+function idToParams (id, delimiter = ',') {
+  return id.split(delimiter).map(s => isNaN(s) ? s : +s)
+}
+
 /**
  * Event listener for responsive webapp that handles a back button press and
  * sets the active search and itinerary according to the URL query params.

lib/components/app/responsive-webapp.js

@@ -181,6 +181,7 @@ class RouterWrapper extends Component {
                 // to a quirk with react-router.
                 // https://github.com/ReactTraining/react-router/issues/5870#issuecomment-394194338
                 '/@/:latLonZoomRouter',
+                '/start/:latLonZoomRouter',
                 // Route viewer (and route ID).
                 '/route',
                 '/route/:id',
@@ -194,6 +195,10 @@ class RouterWrapper extends Component {
               path='/print'
               component={PrintLayout}
             />
+            {/* For any other route, simply return the web app. */}
+            <Route
+              render={() => <WebappWithRouter {...this.props} />}
+            />
           </Switch>
         </div>
       </ConnectedRouter>