From 392a50dc9e647189cd7c3c4d5f3c558ca21f89a7 Mon Sep 17 00:00:00 2001
From: Naresh Bhatia <naresh.archfirst@gmail.com>
Date: Sun, 10 Jun 2018 11:36:42 -0400
Subject: [PATCH] feat: Added isTransitioning property to RouterStore

`isTransitioning` is set to true when the router is in the process of transitioning from one state
to another.

Implements #32
---
 README.md                 | 7 +++++++
 src/router-store.ts       | 3 +++
 test/router-store.test.ts | 3 ++-
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 44aa32b..a20d223 100644
--- a/README.md
+++ b/README.md
@@ -454,6 +454,9 @@ The `RouterStore` is the keeper of the `RouterState`. It allows transitioning be
 
 ```jsx
 export class RouterStore {
+    @observable.ref routerState: RouterState;
+    @observable isTransitioning: boolean = false;
+
     constructor(rootStore: any, routes: Route[], notFoundState: RouterState, initialRoute: Route = INITIAL_ROUTE);
     goTo(toState: RouterState): Promise<RouterState>;
     goTo(routeName: string, params?: StringMap, queryParams?: Object): Promise<RouterState>;
@@ -463,6 +466,10 @@ export class RouterStore {
 }
 ```
 
+The `RouterStore` exposes two observable properties:
+- routerState: the state of the router
+- isTransitioning: set to true when the router is in the process of transitioning from one state to another. This property can be used, for example, to display a progress indicator during transitions.
+
 ### HistoryAdapter
 The `HistoryAdapter` is responsible for keeping the browser address bar and the `RouterState` in sync. It also provides a `goBack()` method to go back in history.
 
diff --git a/src/router-store.ts b/src/router-store.ts
index 9e4fcb3..d790e28 100644
--- a/src/router-store.ts
+++ b/src/router-store.ts
@@ -74,6 +74,7 @@ export class RouterStore {
     routes: Route[];
     notFoundState: RouterState;
     @observable.ref routerState: RouterState;
+    @observable isTransitioning: boolean = false;
 
     constructor(
         rootStore: any,
@@ -172,6 +173,7 @@ export class RouterStore {
         const { beforeEnter, onEnter } = this.getRoute(toState.routeName);
 
         // Call the transition hook chain
+        this.isTransitioning = true;
         return (
             [beforeExit, beforeEnter, onExit, onEnter]
                 .reduce(
@@ -202,5 +204,6 @@ export class RouterStore {
     @action
     private setRouterState(routerState: RouterState) {
         this.routerState = routerState;
+        this.isTransitioning = false;
     }
 }
diff --git a/test/router-store.test.ts b/test/router-store.test.ts
index f9a072d..cc72eed 100644
--- a/test/router-store.test.ts
+++ b/test/router-store.test.ts
@@ -62,11 +62,12 @@ const errorState = new RouterState('errorRoute');
 
 describe('RouterStore', () => {
     test('transitions to the desired state', () => {
-        expect.assertions(1);
+        expect.assertions(2);
 
         const routerStore = new RouterStore({}, routes, notFound);
         return routerStore.goTo(home).then(toState => {
             expect(toState.isEqual(home)).toBeTruthy();
+            expect(routerStore.isTransitioning).toBeFalsy();
         });
     });