🚧 (createCanal) Push Canal to Navigation service

Author: tpucci

example/src/App.tsx

@@ -1,9 +1,10 @@
 import React, { Component } from 'react';
+import { StyleSheet } from 'react-native';
 import { SignIn } from './canals/SignIn';
 
 interface IProps {}
 export default class App extends Component<IProps> {
   render() {
-    return <SignIn />;
+    return <SignIn style={StyleSheet.absoluteFill} />;
   }
 }

src/Navigation.store.tsx

@@ -1,8 +1,14 @@
-import { observable } from 'mobx';
+import { observable, computed, action } from 'mobx';
 import { Subject } from 'rxjs';
-import { Canal } from 'Canal';
+import { Canal, IStop } from 'Canal';
 
-interface INavigationState {}
+interface INavigationEvent {
+  canalId: Canal['id'];
+  stop: IStop;
+}
+interface INavigationState {
+  [key: string]: IStop[];
+}
 interface ICanalsMap {
   [key: string]: Canal;
 }
@@ -23,12 +29,31 @@ export class Navigation {
   private canalsMapSubscription = this.canalsSubject.subscribe({
     next: (canal: Canal) => {
       this.canalsMap[canal.id] = canal;
+      this.pushToHistory(canal, canal.stopsList[0]);
     },
   });
 
   private canalsMap: ICanalsMap = {};
 
   @observable
-  // @ts-ignore
-  private state: INavigationState = {};
+  private history: INavigationEvent[] = [];
+
+  @action
+  private pushToHistory = (canal: Canal, stop: IStop) => {
+    this.history.push({
+      canalId: canal.id,
+      stop,
+    });
+  };
+
+  @computed get state(): INavigationState {
+    const result = this.history.reduce(
+      (previousState, navigationEvent) => ({
+        ...previousState,
+        [navigationEvent.canalId]: [navigationEvent.stop],
+      }),
+      {}
+    );
+    return result;
+  }
 }

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

@@ -1,3 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`createCanal renders the first page when mounted 1`] = `<View />`;
+exports[`createCanal renders the first page when mounted 1`] = `
+<View>
+  <View
+    style={
+      Object {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <View />
+  </View>
+</View>
+`;

src/__tests__/createCanal.test.tsx

@@ -13,7 +13,7 @@ describe('createCanal', () => {
       createCanal('aaa');
     } catch (error) {
       expect(error.message).toBe(
-        '`createCanal` expects its first arguments to be a React component. Received type for argument 1: string'
+        '`createCanal` expects its arguments to be React components. Received type for argument 1: string'
       );
     }
     expect.assertions(1);
@@ -25,13 +25,13 @@ describe('createCanal', () => {
     expect(testRenderer.toJSON()).toMatchSnapshot();
   });
 
-  it('throws an error if any first arg is not a Component', () => {
+  it('throws an error if any arg is not a Component', () => {
     try {
       // @ts-ignore
       createCanal(View, 'aaa');
     } catch (error) {
       expect(error.message).toBe(
-        '`createCanal` expects its first arguments to be a React component. Received type for argument 2: string'
+        '`createCanal` expects its arguments to be React components. Received type for argument 2: string'
       );
     }
     expect.assertions(1);

src/canal.tsx

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

src/createCanal.tsx

@@ -1,24 +1,47 @@
-import React, { ComponentType, FunctionComponent, useEffect } from 'react';
+import React, { ComponentType, Component as ReactComponent } from 'react';
+import { ViewStyle, View, StyleSheet } from 'react-native';
+import { observer } from 'mobx-react/native';
 import { Canal } from './Canal';
-import { useNavigation } from './NavigationContext';
+import { Navigation } from './Navigation.store';
 
-export const createCanal = (...PagesList: ComponentType[]): FunctionComponent => {
+interface ILocalTransitionerProps {
+  style?: ViewStyle;
+}
+
+export const createCanal = (
+  ...PagesList: ComponentType[]
+): ComponentType<ILocalTransitionerProps> => {
   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 +
+        `\`createCanal\` expects its arguments to be React components. Received type for argument ${index +
           1}: ${typeof Page}`
       );
     }
   }
-  const LocalTransitioner = () => {
-    const FirstPage = PagesList[0];
-    const navigation = useNavigation();
-    useEffect(() => {
-      navigation.canalsSubject.next(new Canal(PagesList));
-    }, [false]);
-    return <FirstPage />;
-  };
+
+  @observer
+  class LocalTransitioner extends ReactComponent<ILocalTransitionerProps> {
+    canal = new Canal(PagesList);
+
+    constructor(props: ILocalTransitionerProps) {
+      super(props);
+      const navigation = Navigation.getInstance();
+      navigation.canalsSubject.next(this.canal);
+    }
+
+    render() {
+      return (
+        <View style={this.props.style}>
+          {Navigation.getInstance().state[this.canal.id].map(({ Component, name }) => (
+            <View style={StyleSheet.absoluteFill} key={name}>
+              <Component />
+            </View>
+          ))}
+        </View>
+      );
+    }
+  }
   return LocalTransitioner;
 };

tsconfig.json

@@ -25,7 +25,7 @@
     "noEmit": true,
     "allowJs": true,
     "lib": ["es6"],
-    "types": ["react-native"]
+    "types": ["react-native", "mobx-react"]
   },
   "include": ["./src"],
   "exclude": [

tslint.json

@@ -8,7 +8,8 @@
     "trailing-comma": false,
     "no-empty-interface": false,
     "member-access": false,
-    "arrow-parens": false
+    "arrow-parens": false,
+    "semicolon": false
   },
   "rulesDirectory": []
 }