[state-router] Support programmatical intent navigation (#123)

Author: bjoerge

packages/@sanity/state-router/demo-server/components/Product.js

@@ -10,6 +10,7 @@ export default class Product extends React.Component {
   static propTypes = {
     id: PropTypes.string
   }
+
   render() {
     const {id} = this.props
     const nextProductId = Math.random().toString(32).substring(2)
@@ -24,6 +25,15 @@ export default class Product extends React.Component {
         <IntentLink intent="open" params={{type: 'product', id: 'foo'}}>
           Open Foo
         </IntentLink>
+        <p>
+        <WithRouter>
+          {router => (
+            <button onClick={() => router.navigateIntent('open', {type: 'product', id: 'foobar'})}>
+              Click to programmatically navigate to intent <b>open:</b> product foobar
+            </button>
+          )}
+        </WithRouter>
+        </p>
         <WithRouter>{router => <pre>{JSON.stringify(router.state)}</pre>}</WithRouter>
         <p>
           <StateLink toIndex>Up…</StateLink>

packages/@sanity/state-router/src/components/RouterProvider.js

@@ -30,6 +30,7 @@ export default class RouterProvider extends React.Component {
       resolveIntentLink: this.resolveIntentLink,
       navigateUrl: this.navigateUrl,
       navigate: this.navigateState,
+      navigateIntent: this.navigateIntent,
       getState: this.getState,
       channel: pubsub()
     }
@@ -44,6 +45,10 @@ export default class RouterProvider extends React.Component {
     this.navigateUrl(this.resolvePathFromState(nextState), options)
   }
 
+  navigateIntent = (intentName : string, params : Object, options : NavigateOptions = {}) : void => {
+    this.navigateUrl(this.resolveIntentLink(intentName, params), options)
+  }
+
   getState = () => this._state
 
   resolvePathFromState = (state : Object) : string => {

packages/@sanity/state-router/src/components/withRouterHOC.js

@@ -40,7 +40,8 @@ export default function withRouter(ComposedComponent: ReactClass<{}>) : ReactCla
     render() {
       const router = {
         state: this.state.routerState,
-        navigate: this.context.__internalRouter.navigate
+        navigate: this.context.__internalRouter.navigate,
+        navigateIntent: this.context.__internalRouter.navigateIntent
       }
       return <ComposedComponent {...this.props} router={router} />
     }