♻️ (NavigationContext) Use new context api instead of mobx-react

Author: tpucci

example/src/App.tsx

@@ -1,14 +1,9 @@
 import React, { Component } from 'react';
-import { NavigationProvider } from 'react-gondola';
 import { SignIn } from './canals/SignIn';
 
 interface IProps {}
 export default class App extends Component<IProps> {
   render() {
-    return (
-      <NavigationProvider>
-        <SignIn />
-      </NavigationProvider>
-    );
+    return <SignIn />;
   }
 }

src/NavigationContext.tsx

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+import { Navigation } from './Navigation.store';
+
+export const NavigationContext = createContext(new Navigation());

src/NavigationProvider.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import TestRenderer from 'react-test-renderer';
+import { View } from 'react-native';
+
+import { NavigationContext } from '../NavigationContext';
+import { Navigation } from '../Navigation.store';
+
+describe('NavigationContext', () => {
+  it('initializes a context with a new navigation store', () => {
+    const expectedNavigation = new Navigation();
+    TestRenderer.create(
+      <NavigationContext.Consumer>
+        {navigation => {
+          expect(navigation).toEqual(expectedNavigation);
+          return <View />;
+        }}
+      </NavigationContext.Consumer>
+    );
+    expect.assertions(1);
+  });
+});

src/__tests__/NavigationContext.test.tsx

@@ -7,10 +7,11 @@ import { createCanal } from '../createCanal';
 describe('createCanal', () => {
   it('throws an error if first arg is not a Component', () => {
     try {
+      // @ts-ignore
       createCanal('aaa');
     } catch (error) {
       expect(error.message).toBe(
-        '`createCanal` expects its first argument to be a React component. Received type: string'
+        '`createCanal` expects its first arguments to be a React component. Received type for argument 1: string'
       );
     }
     expect.assertions(1);
@@ -21,4 +22,16 @@ describe('createCanal', () => {
     const testRenderer = TestRenderer.create(<Canal />);
     expect(testRenderer.toJSON()).toMatchSnapshot();
   });
+
+  it('throws an error if any first 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'
+      );
+    }
+    expect.assertions(1);
+  });
 });

src/__tests__/NavigationProvider.test.tsx

@@ -1,10 +1,15 @@
 import React, { ComponentType, FunctionComponent } from 'react';
 
-export const createCanal = (Page: ComponentType): FunctionComponent => {
-  if (!(React.isValidElement(Page) || typeof Page === 'function')) {
-    throw new Error(
-      `\`createCanal\` expects its first argument to be a React component. Received type: ${typeof Page}`
-    );
+export const createCanal = (...Pages: ComponentType[]): FunctionComponent => {
+  for (let index = 0; index < Pages.length; index++) {
+    const Page = Pages[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}`
+      );
+    }
   }
-  return () => <Page />;
+  const FirstPage = Pages[0];
+  return () => <FirstPage />;
 };

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

@@ -1,2 +1 @@
 export { createCanal } from './createCanal';
-export { NavigationProvider } from './NavigationProvider';

src/__tests__/createCanal.test.tsx

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