✨ (createCanal) Introduce createCanal function

Author: tpucci

example/src/canals/SignIn/index.ts

@@ -1,6 +1,6 @@
-import { canal } from 'react-gondola';
+import { createCanal } from 'react-gondola';
 import { FirstName } from './FirstName';
 import { LastName } from './LastName';
 
 // @ts-ignore
-export const SignIn = canal(FirstName, LastName);
+export const SignIn = createCanal(FirstName, LastName);

src/Navigation.store.tsx

@@ -0,0 +1,13 @@
+import { observable } from 'mobx';
+import { Canal } from 'Canal';
+
+interface INavigationState {}
+interface ICanalsMap {
+  [key: string]: Canal;
+}
+
+export class Navigation {
+  @observable
+  state: INavigationState = {};
+  canalsMap: ICanalsMap = {};
+}

src/__tests__/Canal.tsx

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

src/__tests__/Navigation.store.test.tsx

@@ -0,0 +1,21 @@
+import { Navigation } from '../Navigation.store';
+
+describe('Navigation store', () => {
+  it('initializes with an empty state and canalsMap', () => {
+    const navigation = new Navigation();
+    expect(navigation.state).toEqual({});
+    expect(navigation.canalsMap).toEqual({});
+  });
+
+  describe('state', () => {
+    it('cannot be changed directly', () => {
+      try {
+        const navigation = new Navigation();
+        navigation.state = {};
+      } catch (error) {
+        expect(error.message).toMatch(/\[mobx\]/);
+      }
+      expect.assertions(1);
+    });
+  });
+});

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

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`createCanal renders the first page when mounted 1`] = `<View />`;

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

@@ -2,22 +2,22 @@ import React from 'react';
 import { View } from 'react-native';
 import TestRenderer from 'react-test-renderer';
 
-import { canal } from '../canal';
+import { createCanal } from '../createCanal';
 
-describe('canal', () => {
+describe('createCanal', () => {
   it('throws an error if first arg is not a Component', () => {
     try {
-      canal('aaa');
+      createCanal('aaa');
     } catch (error) {
       expect(error.message).toBe(
-        '`canal` expects its first argument to be a React component. Received type: string'
+        '`createCanal` expects its first argument to be a React component. Received type: string'
       );
     }
     expect.assertions(1);
   });
 
   it('renders the first page when mounted', () => {
-    const Canal = canal(View);
+    const Canal = createCanal(View);
     const testRenderer = TestRenderer.create(<Canal />);
     expect(testRenderer.toJSON()).toMatchSnapshot();
   });

src/__tests__/canal.test.tsx src/__tests__/createCanal.test.tsxsrc/__tests__/canal.test.tsx renamed to src/__tests__/createCanal.test.tsx

@@ -1,10 +1,8 @@
-import React, { ComponentType, FunctionComponent } from 'react';
+export interface IStop {
+  name: string;
+}
 
-export const canal = (Page: ComponentType): FunctionComponent => {
-  if (!(React.isValidElement(Page) || typeof Page === 'function')) {
-    throw new Error(
-      `\`canal\` expects its first argument to be a React component. Received type: ${typeof Page}`
-    );
-  }
-  return () => <Page />;
-};
+export class Canal {
+  id: number = Date.now();
+  stopsList: IStop[] = [];
+}

src/canal.tsx

@@ -0,0 +1,10 @@
+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}`
+    );
+  }
+  return () => <Page />;
+};

src/createCanal.tsx

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