🚧 (canal) Subscribe Navigation store to canal creation

Author: tpucci

__mocks__/react.js

@@ -0,0 +1,8 @@
+/**
+ * useEffect does not trigger on render.
+ * See https://github.com/facebook/react/issues/14050#issuecomment-438173736.
+ * @TODO 2019-05-15 Check if this can be removed
+ */
+
+const React = require.requireActual('react');
+module.exports = { ...React, useEffect: React.useLayoutEffect };

src/Navigation.store.tsx

@@ -1,4 +1,5 @@
 import { observable } from 'mobx';
+import { Subject } from 'rxjs';
 import { Canal } from 'Canal';
 
 interface INavigationState {}
@@ -16,8 +17,18 @@ export class Navigation {
   }
   private static instance: Navigation;
 
+  canalsSubject = new Subject<Canal>();
+
+  // @ts-ignore
+  private canalsMapSubscription = this.canalsSubject.subscribe({
+    next: (canal: Canal) => {
+      this.canalsMap[canal.id] = canal;
+    },
+  });
+
   private canalsMap: ICanalsMap = {};
 
   @observable
+  // @ts-ignore
   private state: INavigationState = {};
 }

src/__tests__/Canal.test.tsx

@@ -2,7 +2,7 @@ import { Canal } from '../Canal';
 
 describe('Canal', () => {
   it('initializes with a unique id', () => {
-    const canal = new Canal();
+    const canal = new Canal([]);
     expect(canal.id).toEqual(0);
   });
 });

src/__tests__/Navigation.store.test.tsx

@@ -1,12 +1,6 @@
 import { Navigation } from '../Navigation.store';
 
 describe('Navigation store', () => {
-  it('exposes the store instance', () => {
-    const expectedNavigation = new Navigation();
-    const navigation = Navigation.getInstance();
-    expect(navigation).toEqual(expectedNavigation);
-  });
-
   it('exposes the same store instance if it accessed twice', () => {
     const navigation = Navigation.getInstance();
     const otherNavigation = Navigation.getInstance();

src/__tests__/NavigationContext.test.tsx

@@ -8,7 +8,7 @@ import { Navigation } from '../Navigation.store';
 describe('NavigationContext', () => {
   describe('NavigationConsumer', () => {
     it('connects to context and exposes the navigation prop', () => {
-      const expectedNavigation = new Navigation();
+      const expectedNavigation = Navigation.getInstance();
       TestRenderer.create(
         <NavigationConsumer>
           {navigation => {
@@ -22,7 +22,7 @@ describe('NavigationContext', () => {
   });
   describe('withNavigation', () => {
     it('connects to context and exposes the navigation prop', () => {
-      const expectedNavigation = new Navigation();
+      const expectedNavigation = Navigation.getInstance();
       // @ts-ignore
       const ViewWithNavigation = withNavigation(View);
       const testRenderer = TestRenderer.create(<ViewWithNavigation />);
@@ -33,7 +33,7 @@ describe('NavigationContext', () => {
   });
   describe('useNavigation', () => {
     it('connects to context and exposes the navigation prop', () => {
-      const expectedNavigation = new Navigation();
+      const expectedNavigation = Navigation.getInstance();
       const ViewWithNavigation = () => {
         const navigation = useNavigation();
         // @ts-ignore

src/__tests__/__snapshots__/createCanal.test.tsx.snap

@@ -1,11 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`createCanal renders the first page when mounted 1`] = `
-<View
-  navigation={
-    Navigation {
-      "canalsMap": Object {},
-    }
-  }
-/>
-`;
+exports[`createCanal renders the first page when mounted 1`] = `<View />`;

src/__tests__/createCanal.test.tsx

@@ -3,6 +3,8 @@ import { View } from 'react-native';
 import TestRenderer from 'react-test-renderer';
 
 import { createCanal } from '../createCanal';
+import { Navigation } from '../Navigation.store';
+import { Canal } from '../Canal';
 
 describe('createCanal', () => {
   it('throws an error if first arg is not a Component', () => {
@@ -18,8 +20,8 @@ describe('createCanal', () => {
   });
 
   it('renders the first page when mounted', () => {
-    const Canal = createCanal(View);
-    const testRenderer = TestRenderer.create(<Canal />);
+    const Transitioner = createCanal(View);
+    const testRenderer = TestRenderer.create(<Transitioner />);
     expect(testRenderer.toJSON()).toMatchSnapshot();
   });
 
@@ -34,4 +36,18 @@ describe('createCanal', () => {
     }
     expect.assertions(1);
   });
+
+  it('emits the new canal to the navigation store', () => {
+    const PageOne = () => <View />;
+    const PageTwo = () => <View />;
+    const Transitioner = createCanal(PageOne, PageTwo);
+    const expectedCanal = new Canal([PageOne, PageTwo]);
+    Navigation.getInstance().canalsSubject.subscribe({
+      next: canal => {
+        expect(canal).toEqual(expectedCanal);
+      },
+    });
+    TestRenderer.create(<Transitioner />);
+    expect.assertions(1);
+  });
 });

src/canal.tsx

@@ -1,8 +1,17 @@
+import { ComponentType } from 'react';
+
 export interface IStop {
+  component: ComponentType;
   name: string;
 }
 
 export class Canal {
   id: number = Date.now();
   stopsList: IStop[] = [];
+  constructor(PagesList: ComponentType[]) {
+    this.stopsList = PagesList.map(Page => ({
+      component: Page,
+      name: Page.displayName || 'UntitledPage',
+    }));
+  }
 }

src/createCanal.tsx

@@ -1,23 +1,24 @@
-import React, { ComponentType, FunctionComponent } from 'react';
-import { Navigation } from 'Navigation.store';
+import React, { ComponentType, FunctionComponent, useEffect } from 'react';
+import { Canal } from './Canal';
 import { useNavigation } from './NavigationContext';
 
-export const createCanal = (
-  ...Pages: Array<ComponentType<{ navigation: Navigation }>>
-): FunctionComponent => {
-  for (let index = 0; index < Pages.length; index++) {
-    const Page = Pages[index];
+export const createCanal = (...PagesList: ComponentType[]): FunctionComponent => {
+  for (let index = 0; index < PagesList.length; index++) {
+    const Page = PagesList[index];
     if (!(React.isValidElement(Page) || typeof Page === 'function')) {
       throw new Error(
         `\`createCanal\` expects its first arguments to be a React component. Received type for argument ${index +
           1}: ${typeof Page}`
       );
     }
   }
-  const FirstPage = Pages[0];
-  const Canal = () => {
+  const LocalTransitioner = () => {
+    const FirstPage = PagesList[0];
     const navigation = useNavigation();
-    return <FirstPage navigation={navigation} />;
+    useEffect(() => {
+      navigation.canalsSubject.next(new Canal(PagesList));
+    }, [false]);
+    return <FirstPage />;
   };
-  return Canal;
+  return LocalTransitioner;
 };