lifecycle start works

ios/RNN.h

@@ -2,12 +2,14 @@
 #import <Foundation/Foundation.h>
 #import <UIKit/UIKit.h>
 
-@class RCTBridge;
+#import "RNNEventEmitter.h"
+#import "RCTBridge.h"
 
 @interface RNN : NSObject
 
 @property (readonly) BOOL isReadyToReceiveCommands;
 @property (readonly) RCTBridge* bridge;
+@property (readonly) RNNEventEmitter* eventEmitter;
 
 +(instancetype)instance;
 

ios/RNN.m

@@ -6,9 +6,11 @@
 #import "RNNSplashScreen.h"
 
 @interface RNN()
-@property RNNEventEmitter* eventEmitter;
+
 @property (readwrite) RCTBridge* bridge;
 @property (readwrite) BOOL isReadyToReceiveCommands;
+@property (readwrite) RNNEventEmitter* eventEmitter;
+
 @end
 
 @implementation RNN

ios/RNNEventEmitter.h

@@ -8,4 +8,8 @@
 
 -(void)sendOnAppLaunched;
 
+-(void)sendContainerStart:(NSString*)containerId;
+
+-(void)sendContainerStop:(NSString*)containerId;
+
 @end

ios/RNNEventEmitter.m

@@ -6,18 +6,34 @@
 
 RCT_EXPORT_MODULE();
 
-static NSString* const onAppLaunched = @"RNN_onAppLaunched";
+static NSString* const onAppLaunched	= @"RNN.appLaunched";
+static NSString* const containerStart	= @"RNN.containerStart";
+static NSString* const containerStop	= @"RNN.containerStop";
 
--(NSArray<NSString *> *)supportedEvents
-{
-	return @[onAppLaunched];
-}
+# pragma mark public
 
 -(void)sendOnAppLaunched
 {
 	[self send:onAppLaunched body:nil];
 }
 
+-(void)sendContainerStart:(NSString *)containerId
+{
+	[self send:containerStart body:@{@"id": containerId}];
+}
+
+-(void)sendContainerStop:(NSString *)containerId
+{
+	[self send:containerStop body:@{@"id": containerId}];
+}
+
+# pragma mark private
+
+-(NSArray<NSString *> *)supportedEvents
+{
+	return @[onAppLaunched, containerStart, containerStop];
+}
+
 -(void)send:(NSString *)eventName body:(id)body
 {
 	[[RNN.instance.bridge moduleForClass:[RNNEventEmitter class]] sendEventWithName:eventName body:body];

ios/RNNRootViewController.m

@@ -4,6 +4,8 @@
 #import "RNN.h"
 
 @interface RNNRootViewController()
+@property NSString* containerId;
+@property NSString* containerName;
 @end
 
 @implementation RNNRootViewController
@@ -11,24 +13,25 @@
 -(instancetype)initWithNode:(RNNLayoutNode*)node
 {
 	self = [super init];
-	NSString* containerName = node.data[@"name"];
+	self.containerId = node.nodeId;
+	self.containerName = node.data[@"name"];
 	
 	self.view = [[RCTRootView alloc] initWithBridge:RNN.instance.bridge
-													  moduleName:containerName
-											   initialProperties:@{@"id": node.nodeId}];
+										 moduleName:self.containerName
+								  initialProperties:@{@"id": self.containerId}];
 	return self;
 }
 
 -(void)viewDidAppear:(BOOL)animated
 {
 	[super viewDidAppear:animated];
-	//send the event onAppear
+	[RNN.instance.eventEmitter sendContainerStart:self.containerId];
 }
 
 -(void)viewDidDisappear:(BOOL)animated
 {
 	[super viewDidDisappear:animated];
-	//send the event onDisappear
+	[RNN.instance.eventEmitter sendContainerStop:self.containerId];
 }
 
 @end

playground/src/containers/WelcomeScreen.js

@@ -7,6 +7,7 @@ class WelcomeScreen extends Component {
   constructor(props) {
     super(props);
     this.onClickPush = this.onClickPush.bind(this);
+    this.onClickLifecycleScreen = this.onClickLifecycleScreen.bind(this);
   }
 
   render() {

src/Navigation.js

@@ -8,6 +8,8 @@ import AppCommands from './commands/AppCommands';
 import ContainerCommands from './commands/ContainerCommands';
 import LayoutTreeParser from './commands/LayoutTreeParser';
 import LayoutTreeCrawler from './commands/LayoutTreeCrawler';
+import PrivateEventsListener from './events/PrivateEventsListener';
+import PublicEventsRegistry from './events/PublicEventsRegistry';
 
 class Navigation {
   constructor() {
@@ -19,6 +21,9 @@ class Navigation {
     this.layoutTreeCrawler = new LayoutTreeCrawler(this.uniqueIdProvider, this.store);
     this.nativeCommandsSender = new NativeCommandsSender();
     this.appCommands = new AppCommands(this.nativeCommandsSender, this.layoutTreeParser, this.layoutTreeCrawler);
+    this.publicEventsRegistry = new PublicEventsRegistry(this.nativeEventsReceiver);
+    this.privateEventsListener = new PrivateEventsListener(this.nativeEventsReceiver, this.store);
+    this.privateEventsListener.listenAndHandlePrivateEvents();
   }
 
   registerContainer(containerName, getContainerFunc) {
@@ -30,7 +35,7 @@ class Navigation {
   }
 
   events() {
-    return this.nativeEventsReceiver;
+    return this.publicEventsRegistry;
   }
 
   on(containerId) {
@@ -39,4 +44,4 @@ class Navigation {
 }
 
 const singleton = new Navigation();
-module.exports = singleton;
+export default singleton;

src/Navigation.test.js

@@ -9,9 +9,8 @@ describe('Navigation', () => {
 
     jest.mock('./containers/ContainerRegistry');
     jest.mock('./commands/AppCommands');
-    jest.mock('./commands/ContainerCommands');
 
-    Navigation = require('./Navigation');
+    Navigation = require('./Navigation').default;
   });
 
   it('registerContainer delegates to ContainerRegistry', () => {
@@ -31,12 +30,18 @@ describe('Navigation', () => {
     expect(Navigation.appCommands.setRoot).toHaveBeenCalledWith(params);
   });
 
-  it('events return the events registry', () => {
-    expect(Navigation.events()).toBeDefined();
-    expect(Navigation.events().onAppLaunched).toBeInstanceOf(Function);
+  it('events return public events', () => {
+    const cb = jest.fn();
+    Navigation.events().onAppLaunched(cb);
+    expect(Navigation.nativeEventsReceiver.appLaunched).toHaveBeenCalledTimes(1);
+    expect(Navigation.nativeEventsReceiver.appLaunched).toHaveBeenCalledWith(cb);
   });
 
   it('on containerId returns an object that performs commands on a container', () => {
     expect(Navigation.on('myUniqueId').push).toBeInstanceOf(Function);
   });
+
+  it('starts listening and handles internal events', () => {
+    expect(Navigation.nativeEventsReceiver.containerStart).toHaveBeenCalledTimes(1);
+  });
 });

src/adapters/NativeEventsReceiver.js

@@ -5,7 +5,11 @@ export default class NativeEventsReceiver {
     this.emitter = new NativeEventEmitter(NativeModules.RNNEventEmitter);
   }
 
-  onAppLaunched(callback) {
-    this.emitter.addListener('RNN_onAppLaunched', callback);
+  containerStart(callback) {
+    this.emitter.addListener('RNN.containerStart', callback);
+  }
+
+  appLaunched(callback) {
+    this.emitter.addListener('RNN.appLaunched', callback);
   }
 }

src/adapters/NativeEventsReceiver.test.js

@@ -11,11 +11,19 @@ describe('NativeEventsReceiver', () => {
     uut.emitter = eventEmitterMock;
   });
 
-  it('register for onAppLaunched', () => {
+  it('register for appLaunched', () => {
     const callback = jest.fn();
-    uut.onAppLaunched(callback);
+    uut.appLaunched(callback);
     expect(callback).not.toHaveBeenCalled();
     expect(eventEmitterMock.addListener).toHaveBeenCalledTimes(1);
-    expect(eventEmitterMock.addListener).toHaveBeenCalledWith('RNN_onAppLaunched', callback);
+    expect(eventEmitterMock.addListener).toHaveBeenCalledWith('RNN.appLaunched', callback);
+  });
+
+  it('register for internal events', () => {
+    const callback = jest.fn();
+    uut.containerStart(callback);
+    expect(callback).not.toHaveBeenCalled();
+    expect(eventEmitterMock.addListener).toHaveBeenCalledTimes(1);
+    expect(eventEmitterMock.addListener).toHaveBeenCalledWith('RNN.containerStart', callback);
   });
 });

src/containers/ContainerWrapper.js

@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import React, { Component } from 'react';
 
 export default class ContainerWrapper {
@@ -6,10 +7,7 @@ export default class ContainerWrapper {
       constructor(props) {
         super(props);
         this._assertId(props);
-        this.state = {
-          id: props.id,
-          allProps: { ...props, ...store.getPropsForContainerId(props.id) }
-        };
+        this._createState(props);
       }
 
       _assertId(props) {
@@ -18,9 +16,24 @@ export default class ContainerWrapper {
         }
       }
 
+      _createState(props) {
+        this.state = {
+          id: props.id,
+          allProps: _.merge({}, props, store.getPropsForContainerId(props.id))
+        };
+      }
+
+      componentWillMount() {
+        store.setRefForId(this.state.id, this);
+      }
+
+      componentWillUnmount() {
+        store.cleanId(this.state.id);
+      }
+
       componentWillReceiveProps(nextProps) {
         this.setState({
-          allProps: { ...nextProps, ...store.getPropsForContainerId(this.state.id) }
+          allProps: _.merge({}, nextProps, store.getPropsForContainerId(this.state.id))
         });
       }
 

src/containers/ContainerWrapper.test.js

@@ -100,9 +100,24 @@ describe('ContainerWrapper', () => {
 
   it('assignes key by id', () => {
     const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
-    renderer.create(<NavigationContainer id={'container123'} />);
-    expect(myContainerRef.props.id).toEqual('container123');
-    expect(myContainerRef._reactInternalInstance._currentElement.key).toEqual('container123');
+    renderer.create(<NavigationContainer id={'container1'} />);
+    expect(myContainerRef.props.id).toEqual('container1');
+    expect(myContainerRef._reactInternalInstance._currentElement.key).toEqual('container1');
+  });
+
+  it('saves self ref into store', () => {
+    const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
+    const tree = renderer.create(<NavigationContainer id={'container1'} />);
+    expect(store.getRefForId('container1')).toBeDefined();
+    expect(store.getRefForId('container1')).toBe(tree.getInstance());
+  });
+
+  it('cleans ref from store on unMount', () => {
+    const NavigationContainer = ContainerWrapper.wrap(containerName, MyContainer, store);
+    const tree = renderer.create(<NavigationContainer id={'container1'} />);
+    expect(store.getRefForId('container1')).toBeDefined();
+    tree.unmount();
+    expect(store.getRefForId('container1')).toBeUndefined();
   });
 
   xdescribe('container lifecycle', () => {

src/containers/Store.js

@@ -16,23 +16,23 @@ export default class Store {
   }
 
   setContainerClassForName(containerName, ContainerClass) {
-    this.containersByName[containerName] = ContainerClass;
+    _.set(this.containersByName, containerName, ContainerClass);
   }
 
   getContainerClassForName(containerName) {
-    return this.containersByName[containerName];
+    return _.get(this.containersByName, containerName);
   }
 
   setRefForId(id, ref) {
-    this.refsById[id] = ref;
+    _.set(this.refsById, id, ref);
   }
 
   getRefForId(id) {
-    return this.refsById[id];
+    return _.get(this.refsById, id);
   }
 
   cleanId(id) {
-    this.refsById[id] = undefined;
-    this.propsByContainerId[id] = undefined;
+    _.unset(this.refsById, id);
+    _.unset(this.propsByContainerId, id);
   }
 }

src/events/PrivateEventsListener.js

@@ -0,0 +1,24 @@
+import _ from 'lodash';
+
+export default class PrivateEventsListener {
+  constructor(nativeEventsReceiver, store) {
+    this.nativeEventsReceiver = nativeEventsReceiver;
+    this.store = store;
+  }
+
+  listenAndHandlePrivateEvents() {
+    this.nativeEventsReceiver.containerStart(this._handleContainerStart);
+  }
+
+  _handleContainerStart(params) {
+    // const id = params.id;
+    // try {
+    //   const ref = this.store.getRefForId(id);
+    //   if (ref && ref.onStart) {
+    //     ref.onStart();
+    //   }
+    // } catch (e) {
+    //   console.warn(e);
+    // }
+  }
+}

src/events/PrivateEventsListener.test.js

@@ -0,0 +1,21 @@
+import _ from 'lodash';
+import PrivateEventsListener from './PrivateEventsListener';
+import NativeEventsReceiver from '../adapters/NativeEventsReceiver.mock';
+
+describe('PrivateEventsListener', () => {
+  let uut;
+  let nativeEventsReceiver;
+
+  beforeEach(() => {
+    nativeEventsReceiver = new NativeEventsReceiver();
+    uut = new PrivateEventsListener(nativeEventsReceiver);
+  });
+
+  it('registers for private events against nativeEventsReceiver', () => {
+    uut.listenAndHandlePrivateEvents();
+    expect(nativeEventsReceiver.containerStart).toHaveBeenCalledTimes(1);
+    const callbackFunction = nativeEventsReceiver.containerStart.mock.calls[0][0];
+    expect(callbackFunction).toBeInstanceOf(Function);
+    callbackFunction('myContainerId');
+  });
+});

src/events/PublicEventsRegistry.js

@@ -0,0 +1,9 @@
+export default class PublicEventsRegistry {
+  constructor(nativeEventsReceiver) {
+    this.nativeEventsReceiver = nativeEventsReceiver;
+  }
+
+  onAppLaunched(callback) {
+    this.nativeEventsReceiver.appLaunched(callback);
+  }
+}

src/events/PublicEventsRegistry.test.js

@@ -0,0 +1,19 @@
+import PublicEventsRegistry from './PublicEventsRegistry';
+import NativeEventsReceiver from '../adapters/NativeEventsReceiver.mock';
+
+describe('PublicEventsRegistry', () => {
+  let uut;
+  let nativeEventsReceiver;
+
+  beforeEach(() => {
+    nativeEventsReceiver = new NativeEventsReceiver();
+    uut = new PublicEventsRegistry(nativeEventsReceiver);
+  });
+
+  it('exposes onAppLaunch event', () => {
+    const cb = jest.fn();
+    uut.onAppLaunched(cb);
+    expect(nativeEventsReceiver.appLaunched).toHaveBeenCalledTimes(1);
+    expect(nativeEventsReceiver.appLaunched).toHaveBeenCalledWith(cb);
+  });
+});