Merge pull request #177 from ui-router/remount

Force Component remount when reloading the State

Author: christopherthielen

examples/typescript/components/Child.tsx

@@ -1,15 +1,22 @@
 import * as React from 'react';
-import { UIView } from '@uirouter/react';
+import { UIView, UIViewInjectedProps } from '@uirouter/react';
 
-export class Child extends React.Component<any, any> {
+export class Child extends React.Component<UIViewInjectedProps, any> {
   uiCanExit = () => {
     return Promise.resolve();
   };
+  componentDidMount() {
+    console.log('mounted');
+  }
+  handleClick = () => {
+    this.props.transition.router.stateService.reload();
+  };
   render() {
     return (
       <div>
         <h2>Child</h2>
         <UIView />
+        <button onClick={this.handleClick}>remount</button>
       </div>
     );
   }

src/components/UIView.tsx

@@ -243,7 +243,8 @@ class View extends Component<UIViewProps, UIViewState> {
     }
 
     this.uiViewData.config = newConfig;
-    let props = { ...resolves, transition: trans };
+    const key = Date.now();
+    let props = { ...resolves, transition: trans, key };
 
     let newComponent = newConfig && newConfig.viewDecl && newConfig.viewDecl.component;
     this.setState({

src/components/__tests__/UIView.test.tsx

@@ -57,7 +57,7 @@ const states = [
 
 describe('<UIView>', () => {
   describe('(unmounted)', () => {
-    let router;
+    let router: UIRouterReact;
     beforeEach(() => {
       router = new UIRouterReact();
       router.plugin(memoryLocationPlugin);
@@ -98,12 +98,12 @@ describe('<UIView>', () => {
   });
 
   describe('(mounted)', () => {
-    let router;
+    let router: UIRouterReact;
     beforeEach(() => {
       router = new UIRouterReact();
       router.plugin(servicesPlugin);
       router.plugin(memoryLocationPlugin);
-      states.forEach(state => router.stateRegistry.register(state));
+      states.forEach(state => router.stateRegistry.register(state as ReactStateDeclaration));
     });
 
     it('renders its State Component', () => {
@@ -123,7 +123,7 @@ describe('<UIView>', () => {
         name: '__state',
         component: Comp,
         resolve: [{ resolveFn: () => true, token: 'myresolve' }],
-      });
+      } as ReactStateDeclaration);
       const wrapper = mount(
         <UIRouter router={router}>
           <UIView />
@@ -141,7 +141,7 @@ describe('<UIView>', () => {
         name: '__state',
         component: Comp,
         resolve: [{ token: 'foo', resolveFn: () => 'bar' }],
-      });
+      } as ReactStateDeclaration);
       const wrapper = mount(
         <UIRouter router={router}>
           <UIView />
@@ -158,7 +158,7 @@ describe('<UIView>', () => {
         name: '__state',
         component: Comp,
         resolve: [{ token: 'transition', resolveFn: () => null }],
-      });
+      } as ReactStateDeclaration);
 
       await router.stateService.go('__state');
 
@@ -268,5 +268,35 @@ describe('<UIView>', () => {
       await router.stateService.go('withrenderprop');
       expect(wrapper.html()).toEqual(`<div><span>withrenderprop</span><span>bar</span></div>`);
     });
+
+    it('unmounts the State Component when calling stateService.reload(true)', async () => {
+      const componentDidMountWatcher = jest.fn();
+      const componentWillUnmountWatcher = jest.fn();
+      class TestUnmountComponent extends React.Component {
+        componentDidMount() {
+          componentDidMountWatcher();
+        }
+        componentWillUnmount() {
+          componentWillUnmountWatcher();
+        }
+        render() {
+          return <div />;
+        }
+      }
+      const testState = {
+        name: 'testunmount',
+        component: TestUnmountComponent,
+      };
+      router.stateRegistry.register(testState);
+      const wrapper = mount(
+        <UIRouter router={router}>
+          <UIView />
+        </UIRouter>,
+      );
+      await router.stateService.go('testunmount');
+      await router.stateService.reload('testunmount');
+      expect(componentDidMountWatcher).toHaveBeenCalledTimes(2);
+      expect(componentWillUnmountWatcher).toHaveBeenCalledTimes(1);
+    });
   });
 });