ComponentEventsRegistry

lib/src/adapters/NativeEventsReceiver.ts

@@ -14,15 +14,15 @@ export class NativeEventsReceiver {
     return this.emitter.addListener('RNN.onAppLaunched', callback);
   }
 
-  registerComponentDidAppear(callback: (componendId: string, componentName: string) => void): EventSubscription {
+  registerComponentDidAppear(callback: (componentId: string, componentName: string) => void): EventSubscription {
     return this.emitter.addListener('RNN.componentDidAppear', callback);
   }
 
-  registerComponentDidDisappear(callback: (componendId: string, componentName: string) => void): EventSubscription {
+  registerComponentDidDisappear(callback: (componentId: string, componentName: string) => void): EventSubscription {
     return this.emitter.addListener('RNN.componentDidDisappear', callback);
   }
 
-  registerOnNavigationInteraction(callback: (name: string) => void): EventSubscription {
+  registerOnNavigationInteraction(callback: (componentId: string, params) => void): EventSubscription {
     return this.emitter.addListener('RNN.onNavigationInteraction', callback);
   }
 }

lib/src/components/ComponentWrapper.tsx

@@ -1,38 +1,24 @@
 import * as React from 'react';
 import * as  _ from 'lodash';
 
-interface State {
-  componentId: string;
-  allProps: {};
-}
-
 export class ComponentWrapper {
+
   static wrap(componentName: string, OriginalComponentClass: React.ComponentType<any>, store): React.ComponentType<any> {
 
-    class WrappedComponent extends React.Component<any, State> {
+    class WrappedComponent extends React.Component<any, { componentId: string; allProps: {}; }> {
 
       private originalComponentRef;
 
       constructor(props) {
         super(props);
+        this._assertComponentId();
         this._saveComponentRef = this._saveComponentRef.bind(this);
-        this._assertComponentId(props);
         this.state = {
           componentId: props.componentId,
           allProps: _.merge({}, props, store.getPropsForId(props.componentId))
         };
       }
 
-      _assertComponentId(props) {
-        if (!props.componentId) {
-          throw new Error(`Component ${componentName} does not have a componentId!`);
-        }
-      }
-
-      _saveComponentRef(r) {
-        this.originalComponentRef = r;
-      }
-
       componentWillMount() {
         store.setRefForId(this.state.componentId, this);
       }
@@ -75,6 +61,16 @@ export class ComponentWrapper {
           />
         );
       }
+
+      private _assertComponentId() {
+        if (!this.props.componentId) {
+          throw new Error(`Component ${componentName} does not have a componentId!`);
+        }
+      }
+
+      private _saveComponentRef(r) {
+        this.originalComponentRef = r;
+      }
     }
 
     return WrappedComponent;

lib/src/events/ComponentEventsRegistry.test.ts

@@ -0,0 +1,73 @@
+import { ComponentEventsRegistry } from './ComponentEventsRegistry';
+import { Store } from '../components/Store';
+
+describe(`ComponentEventRegistry`, () => {
+  let uut: ComponentEventsRegistry;
+  let eventRegistry;
+  let store: Store;
+  let mockComponentRef;
+  const refId = 'myUniqueId';
+
+  beforeEach(() => {
+    eventRegistry = {
+      componentDidAppear: jest.fn(),
+      componentDidDisappear: jest.fn(),
+      onNavigationInteraction: jest.fn()
+    };
+
+    mockComponentRef = {
+      componentDidAppear: jest.fn(),
+      componentDidDisappear: jest.fn(),
+      onNavigationInteraction: jest.fn()
+    };
+
+    store = new Store();
+    store.setRefForId(refId, mockComponentRef);
+
+    uut = new ComponentEventsRegistry(eventRegistry, store);
+  });
+
+  it('register for lifecycle events on eventRegistry', () => {
+    expect(eventRegistry.componentDidAppear).toHaveBeenCalledTimes(0);
+    expect(eventRegistry.componentDidDisappear).toHaveBeenCalledTimes(0);
+    expect(eventRegistry.onNavigationInteraction).toHaveBeenCalledTimes(0);
+    uut.registerForAllComponents();
+    expect(eventRegistry.componentDidAppear).toHaveBeenCalledTimes(1);
+    expect(eventRegistry.componentDidDisappear).toHaveBeenCalledTimes(1);
+    expect(eventRegistry.onNavigationInteraction).toHaveBeenCalledTimes(1);
+  });
+
+  it('bubbles lifecycle to component from store', () => {
+    const params = {};
+    expect(mockComponentRef.componentDidAppear).toHaveBeenCalledTimes(0);
+    expect(mockComponentRef.componentDidDisappear).toHaveBeenCalledTimes(0);
+    expect(mockComponentRef.onNavigationInteraction).toHaveBeenCalledTimes(0);
+    uut.registerForAllComponents();
+    eventRegistry.componentDidAppear.mock.calls[0][0](refId);
+    eventRegistry.componentDidDisappear.mock.calls[0][0](refId);
+    eventRegistry.onNavigationInteraction.mock.calls[0][0](refId, params);
+    expect(mockComponentRef.componentDidAppear).toHaveBeenCalledTimes(1);
+    expect(mockComponentRef.componentDidDisappear).toHaveBeenCalledTimes(1);
+    expect(mockComponentRef.onNavigationInteraction).toHaveBeenCalledTimes(1);
+    expect(mockComponentRef.onNavigationInteraction).toHaveBeenCalledWith(params);
+  });
+
+  it('defensive unknown id', () => {
+    uut.registerForAllComponents();
+    expect(() => {
+      eventRegistry.componentDidAppear.mock.calls[0][0]('bad id');
+      eventRegistry.componentDidDisappear.mock.calls[0][0]('bad id');
+      eventRegistry.onNavigationInteraction.mock.calls[0][0]('bad id', {});
+    }).not.toThrow();
+  });
+
+  it('defensive method impl', () => {
+    store.setRefForId('myId', {});
+    uut.registerForAllComponents();
+    expect(() => {
+      eventRegistry.componentDidAppear.mock.calls[0][0]('myId');
+      eventRegistry.componentDidDisappear.mock.calls[0][0]('myId');
+      eventRegistry.onNavigationInteraction.mock.calls[0][0]('myId', {});
+    }).not.toThrow();
+  });
+});

lib/src/events/ComponentEventsRegistry.ts

@@ -0,0 +1,37 @@
+import { EventsRegistry } from './EventsRegistry';
+import { Store } from '../components/Store';
+
+export class ComponentEventsRegistry {
+  constructor(private eventsRegistry: EventsRegistry, private store: Store) {
+    this.componentDidAppear = this.componentDidAppear.bind(this);
+    this.componentDidDisappear = this.componentDidDisappear.bind(this);
+    this.onNavigationInteraction = this.onNavigationInteraction.bind(this);
+  }
+
+  public registerForAllComponents(): void {
+    this.eventsRegistry.componentDidAppear(this.componentDidAppear);
+    this.eventsRegistry.componentDidDisappear(this.componentDidDisappear);
+    this.eventsRegistry.onNavigationInteraction(this.onNavigationInteraction);
+  }
+
+  private componentDidAppear(componentId: string) {
+    const componentRef = this.store.getRefForId(componentId);
+    if (componentRef && componentRef.componentDidAppear) {
+      componentRef.componentDidAppear();
+    }
+  }
+
+  private componentDidDisappear(componentId: string) {
+    const componentRef = this.store.getRefForId(componentId);
+    if (componentRef && componentRef.componentDidDisappear) {
+      componentRef.componentDidDisappear();
+    }
+  }
+
+  private onNavigationInteraction(componentId: string, params) {
+    const componentRef = this.store.getRefForId(componentId);
+    if (componentRef && componentRef.onNavigationInteraction) {
+      componentRef.onNavigationInteraction(params);
+    }
+  }
+}

lib/src/events/EventsRegistry.test.ts

@@ -10,7 +10,7 @@ describe('EventsRegistry', () => {
     uut = new EventsRegistry(mockNativeEventsReceiver);
   });
 
-  it('exposes appLaunch event', () => {
+  it('exposes onAppLaunched event', () => {
     const subscription = {};
     const cb = jest.fn();
     mockNativeEventsReceiver.registerOnAppLaunched.mockReturnValueOnce(subscription);
@@ -46,7 +46,7 @@ describe('EventsRegistry', () => {
     expect(mockNativeEventsReceiver.registerComponentDidDisappear).toHaveBeenCalledWith(cb);
   });
 
-  it('exposes interaction event', () => {
+  it('exposes onNavigationInteraction event', () => {
     const subscription = {};
     const cb = jest.fn();
     mockNativeEventsReceiver.registerOnNavigationInteraction.mockReturnValueOnce(subscription);

lib/src/events/EventsRegistry.ts

@@ -11,15 +11,15 @@ export class EventsRegistry {
     return this.nativeEventsReceiver.registerOnAppLaunched(callback);
   }
 
-  public componentDidAppear(callback: (componendId: string, componentName: string) => void): EventSubscription {
+  public componentDidAppear(callback: (componentId: string, componentName: string) => void): EventSubscription {
     return this.nativeEventsReceiver.registerComponentDidAppear(callback);
   }
 
-  public componentDidDisappear(callback: (componendId: string, componentName: string) => void): EventSubscription {
+  public componentDidDisappear(callback: (componentId: string, componentName: string) => void): EventSubscription {
     return this.nativeEventsReceiver.registerComponentDidDisappear(callback);
   }
 
-  public onNavigationInteraction(callback: (name: string) => void): EventSubscription {
+  public onNavigationInteraction(callback: (componentId: string, params) => void): EventSubscription {
     return this.nativeEventsReceiver.registerOnNavigationInteraction(callback);
   }
 }