🐛 (FullScreenPortal) fix full screen portal

Author: tpucci

package.json

@@ -43,6 +43,7 @@
     "@types/jest": "^24.0.11",
     "@types/react-native": "^0.60.0",
     "@types/react-test-renderer": "^16.8.1",
+    "@types/recompose": "^0.30.6",
     "@typescript-eslint/eslint-plugin": "^1.12.0",
     "@typescript-eslint/parser": "^1.12.0",
     "babel-jest": "^24.7.0",

src/Canal.tsx

@@ -8,6 +8,7 @@ import { map, publish } from 'rxjs/operators';
 import { ConnectableObservable } from 'rxjs';
 import { BackContext } from './Navigation/BackContext';
 import { Screen, ScreenProps } from './Screen';
+import { Navigation } from './Navigation';
 
 interface Props {
   children: ReactElement<ScreenProps, typeof Screen>[] | ReactElement<ScreenProps, typeof Screen>;
@@ -20,6 +21,8 @@ class CanalComponent extends Component<WithBackContext<Props>> {
     this.back$.connect();
   }
 
+  canalId: string = Date.now().toString();
+
   static defaultProps = { style: StyleSheet.absoluteFill };
 
   /**
@@ -42,6 +45,32 @@ class CanalComponent extends Component<WithBackContext<Props>> {
     publish()
   );
 
+  componentDidUpdate() {
+    this.notifyFullScreenDelegate();
+  }
+
+  componentDidMount() {
+    this.notifyFullScreenDelegate();
+  }
+
+  componentWillUnmount() {
+    Navigation.instance.fullScreenDelegate.canalsFullScreenStackProperties$.next({
+      canalId: this.canalId,
+      fullScreenStack: [],
+    });
+  }
+
+  notifyFullScreenDelegate = () => {
+    const { children: reactChildren } = this.props;
+    const fullScreenChildren = arrayify<ReactElement<ScreenProps, typeof Screen>>(
+      reactChildren
+    ).filter(child => child.props.isFullScreen);
+    Navigation.instance.fullScreenDelegate.canalsFullScreenStackProperties$.next({
+      canalId: this.canalId,
+      fullScreenStack: fullScreenChildren,
+    });
+  };
+
   render() {
     const { children: reactChildren } = this.props;
     const children = arrayify<ReactElement<ScreenProps, typeof Screen>>(reactChildren).filter(

src/FullScreenPortal.tsx

@@ -1,36 +1,60 @@
-import React, { Component as ReactComponent, Fragment } from 'react';
+import React, { Component, Fragment } from 'react';
 import { View, StyleSheet } from 'react-native';
-import { Observer } from 'mobx-react';
-import { fromStream } from 'mobx-utils';
+import { from } from 'rxjs';
+import { componentFromStreamWithConfig } from 'recompose';
+
 import { Navigation } from './Navigation';
+import { map, publish, withLatestFrom } from 'rxjs/operators';
+import { withBackContext, WithBackContext } from './withBackContext';
+import { BackContext } from './Navigation/BackContext';
+import { last } from './utils/Array.last';
+
+class FullScreenPortalComponent extends Component<WithBackContext<{}>> {
+  static FullScreenStack = componentFromStreamWithConfig({
+    fromESObservable: from,
+    toESObservable: stream => stream,
+  })(() =>
+    Navigation.instance.fullScreenDelegate.fullSceenStack$.pipe(
+      map(fullScreenStack => <>{fullScreenStack}</>)
+    )
+  );
 
-export class FullScreenPortal extends ReactComponent {
-  fullScreenStack = fromStream(Navigation.instance.fullScreenDelegate.fullSceenStack$);
+  constructor(props: WithBackContext<{}>) {
+    super(props);
+    this.back$.connect();
+  }
+
+  /**
+   * @TODO Pipe operator cannot infer return type as ConnectableObservable.
+   * See https://github.com/ReactiveX/rxjs/issues/2972.
+   */
+  // @ts-ignore
+  back$: ConnectableObservable<BackEvent> = this.props.backContext.back$.pipe(
+    withLatestFrom(Navigation.instance.fullScreenDelegate.fullSceenStack$),
+    map(([_, fullScreenStack]) => {
+      const currentScreen = last(fullScreenStack.filter(screen => screen.props.visible));
+      if (currentScreen) {
+        return { target: currentScreen.props.name };
+      }
+      return { target: null };
+    }),
+    publish()
+  );
 
   render() {
     return (
-      <View style={StyleSheet.absoluteFill}>
-        <Fragment>{this.props.children}</Fragment>
-        <Observer>
-          {() => {
-            if (this.fullScreenStack.current) {
-              return (
-                <Fragment>
-                  {this.fullScreenStack.current &&
-                    this.fullScreenStack.current.map(({ Component, name, isAuthorized }) => (
-                      <Component isAuthorized={isAuthorized} key={name} />
-                    ))}
-                </Fragment>
-              );
-            }
-            /**
-             * @todo Improve typing of <Observer /> to accept null JSXElement.
-             * Expected: `return null;`
-             */
-            return <Fragment />;
-          }}
-        </Observer>
-      </View>
+      <BackContext.Provider
+        value={{
+          back$: this.back$,
+        }}
+      >
+        <View style={StyleSheet.absoluteFill}>
+          <Fragment>{this.props.children}</Fragment>
+          <FullScreenPortalComponent.FullScreenStack />
+        </View>
+      </BackContext.Provider>
     );
   }
 }
+
+export const FullScreenPortal = withBackContext(FullScreenPortalComponent);

src/Navigation/FullScreenDelegate.ts

@@ -1,8 +1,9 @@
 import { Subject, Observable } from 'rxjs';
-import { mergeAll, map, scan } from 'rxjs/operators';
-import { StopInterface } from './Stop';
+import { map, scan } from 'rxjs/operators';
+import { ReactElement } from 'react';
+import { ScreenProps, Screen } from '../Screen';
 
-type Stack = StopInterface[];
+type Stack = ReactElement<ScreenProps, typeof Screen>[];
 
 interface FullScreenStackProperties {
   canalId: string;
@@ -14,10 +15,9 @@ interface FullScreenStackMap {
 }
 
 export class FullScreenDelegate {
-  canalsFullScreenStackProperties$ = new Subject<Observable<FullScreenStackProperties>>();
+  canalsFullScreenStackProperties$ = new Subject<FullScreenStackProperties>();
 
   fullSceenStack$: Observable<Stack> = this.canalsFullScreenStackProperties$.pipe(
-    mergeAll(),
     scan(
       (
         fullScreenStackMap: FullScreenStackMap,

src/index.ts

@@ -1,4 +1,3 @@
-export { createCanal } from './createCanal';
 export { FullScreenPortal } from './FullScreenPortal';
 export { Screen } from './Screen';
 export { Canal } from './Canal';

yarn.lock

@@ -1680,6 +1680,13 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/recompose@^0.30.6":
+  version "0.30.6"
+  resolved "https://registry.yarnpkg.com/@types/recompose/-/recompose-0.30.6.tgz#f6ffae2008b84df916ed6633751f9287f344ea3e"
+  integrity sha512-A9c880h07JMrvVe+PwyjVihrQRyKWp4/GFjfA9YE4NgxdEuQD74gSdDhInhUNctO/dkCcR66rexEXevzBy85cQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/stack-utils@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"