add RouteToggle, enhance matchedRoute

README.md

@@ -288,6 +288,43 @@ export default App
 
 Now our component will display the todo list only when it has loaded.
 
+### Common use case: displaying a component when a route is selected
+
+In most applications, there are menus that select components based on the user
+selecting a sub-application.  To display components whose sole display criteria is
+the selection of a route, use a `RouteToggle`
+
+```javascript
+import RouteToggle from 'react-redux-saga-router'
+
+const TodosRoute = RouteToggle('todos')
+```
+
+In this way, you can display several components scattered around a layout template
+that are route-specific without having to make a new layout template just for that route,
+or doing any strange contortions.
+
+A `RouteToggle` accepts all the arguments of Toggle afterwards:
+
+```javascript
+import RouteToggle from 'react-redux-saga-router'
+
+const TodosRoute = RouteToggle('todos', state => state.whatever === 'hi')
+```
+
+The example above will only toggle if the todos route is active and the `whatever`
+portion of state is equal to 'hi'
+
+A `RouteToggle` can be thought of
+as a simpler version of this source code:
+
+```javascript
+import Toggle from 'react-redux-saga-router/Toggle'
+import { matchedRoutes } from 'react-redux-saga-router/selectors'
+
+const TodosRoute = Toggle(state => matchedRoutes(state, 'todos'))
+```
+
 ### Available selectors for Toggles
 
 The following selectors are available for use with Toggles. import as follows:
@@ -305,6 +342,27 @@ import Toggle from 'react-redux-saga-router/Toggle'
 export Toggle(state => selectors.matchedRoute(state, 'routename'))
 ```
 
+`matchedRoute` accepts a single route name, or an array of route names to match.
+By default, it matches on any route.  To enable strict matching (all routes must match)
+pass in true to the third parameter of matchedRoute
+
+```javascript
+import * as selectors from 'react-redux-saga-router/selectors'
+import Toggle from 'react-redux-saga-router/Toggle'
+
+export Toggle(state => selectors.matchedRoute(state, ['route', 'subroute'], true))
+```
+
+This is useful for strict matching of a sub-route path.
+
+Note that a convenience Toggle, `RouteToggle` exists to match a route:
+
+```javascript
+import RouteToggle from 'react-redux-saga-router/RouteToggle'
+
+export RouteToggle('routename', state => otherconditions())
+```
+
 This selector returns true if the route specified by `'routename'` is active
 
 #### noMatches
@@ -407,9 +465,10 @@ We need 2 things:
 ```javascript
 import * as selectors from 'react-redux-saga-router/selectors'
 import Toggle from 'react-redux-saga-router/Toggle'
+import RouteToggle from 'react-redux-saga-router/RouteToggle'
 
-const AboutToggle = Toggle(state => selectors.matchedRoute('about'))
-const UsersToggle = Toggle(state => selectors.matchedRoute('users') || Toggle(state => selectors.matchedRoute('user')))
+const AboutToggle = RouteToggle('about')
+const UsersToggle = RouteToggle(['users', 'user'])
 const SelectedUserToggle = Toggle(state => !!state.users.selectedUser,
   state => usersLoaded(state) && state.users.user[state.users.selectedUser])
 const NoMatchToggle = Toggle(state => selectors.noMatches(state))

RouteToggle.js

@@ -0,0 +1 @@
+module.exports = require('./lib/RouteToggle.js')

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-redux-saga-router",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "elegant powerful routing based on the simplicity of storing url as state",
   "main": "lib/index.js",
   "directories": {

src/RouteToggle.jsx

@@ -0,0 +1,9 @@
+import Toggle from './Toggle'
+import * as selectors from './selectors'
+
+export default function RouteToggle(route, othertests = null, loading = undefined,
+  componentMap = {}, debug = false) {
+  return Toggle(state => (selectors.matchedRoute(state, route) &&
+      (othertests ? othertests(state) : true)
+  ), loading, componentMap, debug)
+}

src/selectors.js

@@ -1,5 +1,10 @@
-export function matchedRoute(state, name) {
-  return state.routing.matchedRoutes.some(route => route === name)
+export function matchedRoute(state, name, strict = false) {
+  if (Array.isArray(name)) {
+    const matches = state.routing.matchedRoutes.filter(route => name.includes(route))
+    if (strict) return matches.length === name.length
+    return !!matches.length
+  }
+  return state.routing.matchedRoutes.includes(name)
 }
 
 export function noMatches(state) {

test/RouteToggle.test.js

@@ -0,0 +1,116 @@
+import React from 'react'
+import { connectToggle } from '../src/Toggle'
+
+import RouteToggle from '../src/RouteToggle'
+import { renderComponent, connect } from './test_helper'
+
+describe('RouteToggle', () => {
+  const Component = props => ( // eslint-disable-next-line
+    <div>
+      hi {Object.keys(props).map(prop => <div key={prop} className={prop}>{props[prop]}</div>)}
+    </div>
+  )
+  let Route, state // eslint-disable-line
+  describe('initialized', () => {
+    beforeEach(() => {
+      connectToggle(connect)
+      Route = RouteToggle('test')
+    })
+    it('renders the component if the route matches', () => {
+      const container = renderComponent(Route, { component: Component, foo: 'bar' }, {
+        week: 1,
+        routing: {
+          routes: {
+            test: {
+              name: 'test',
+              path: '/test'
+            }
+          },
+          matchedRoutes: ['test']
+        }
+      })
+      expect(container.find(Component)).has.length(1)
+      expect(container.find('.foo')).has.length(1)
+      expect(container.find('.foo').text()).eqls('bar')
+    })
+    it('does not render the component if the route matches', () => {
+      const container = renderComponent(Route, { component: Component, foo: 'bar' }, {
+        week: 1,
+        routing: {
+          routes: {
+            test: {
+              name: 'test',
+              path: '/test'
+            }
+          },
+          matchedRoutes: ['no']
+        }
+      })
+      expect(container.find(Component)).has.length(0)
+    })
+    it('does not render the component if the route matches, but other does not', () => {
+      const Route = RouteToggle('test', () => false)
+
+      const container = renderComponent(Route, { component: Component, foo: 'bar' }, {
+        week: 1,
+        routing: {
+          routes: {
+            test: {
+              name: 'test',
+              path: '/test'
+            }
+          },
+          matchedRoutes: ['test']
+        }
+      })
+      expect(container.find(Component)).has.length(0)
+    })
+    it('does not call state if loaded returns false', () => {
+      const spy = sinon.spy(() => true)
+      const loaded = sinon.spy(() => false)
+      const R = RouteToggle('test', spy, loaded)
+      const container = renderComponent(R, { component: Component, foo: 'bar', week: 1 }, {
+        week: 1,
+        routing: {
+          routes: {
+            test: {
+              name: 'test',
+              path: '/test'
+            }
+          },
+          matchedRoutes: ['no']
+        }
+      })
+
+      expect(spy.called).is.false
+      expect(loaded.called).is.true
+      expect(container.find(Component)).has.length(0)
+    })
+    it('componentLoadingMap', () => {
+      const R = RouteToggle('test', () => true, () => true, {
+        component: 'bobby',
+        loadingComponent: 'frenzel',
+        else: 'blah'
+      })
+      const container = renderComponent(R, { component: Component, bobby: 'hi', frenzel: 'there', blah: 'oops' }, {
+        week: 1,
+        routing: {
+          routes: {
+            test: {
+              name: 'test',
+              path: '/test'
+            }
+          },
+          matchedRoutes: ['test']
+        }
+      })
+      expect(container.find(Component)).has.length(1)
+      expect(container.find(Component).props('component')).eqls('hi')
+      expect(container.find(Component).props('bobby')).eqls(undefined)
+      expect(container.find(Component).props('loadingComponent')).eqls('there')
+      expect(container.find(Component).props('frenzel')).eqls(undefined)
+      expect(container.find(Component).props('else')).eqls('oops')
+      expect(container.find(Component).props('blah')).eqls(undefined)
+    })
+  })
+})

test/selectors.test.js

@@ -11,6 +11,12 @@ describe('react-redux-saga-router selectors', () => {
     }
     expect(selectors.matchedRoute(state, 'foo')).eqls(true)
     expect(selectors.matchedRoute(state, 'bar')).eqls(false)
+    expect(selectors.matchedRoute(state, ['foo'])).eqls(true)
+    expect(selectors.matchedRoute(state, ['foo', 'bar'])).eqls(true)
+    expect(selectors.matchedRoute(state, ['foo', 'bar'], true)).eqls(false)
+    expect(selectors.matchedRoute(state, ['bar'])).eqls(false)
+    expect(selectors.matchedRoute(state, ['foo', 'gronk'])).eqls(true)
+    expect(selectors.matchedRoute(state, ['foo', 'gronk'], true)).eqls(true)
   })
   const mystate = {
     routing: {