🚧 (BackHandler) pipe events to canals

Author: tpucci

src/Navigation/BackContext.ts

@@ -0,0 +1,12 @@
+import { createContext } from 'react';
+import { Observable } from 'rxjs';
+import { IBackEvent } from './BackHandlerDelegate';
+import { Navigation } from './Navigation';
+
+interface IBackContext {
+  back$: Observable<IBackEvent>;
+}
+
+export const BackContext = createContext<IBackContext>(
+  Navigation.instance.backHandlerDelegate.defaultBackContext
+);

src/Navigation/BackHandlerDelegate.ts

@@ -1,32 +1,24 @@
 import { BackHandler } from 'react-native';
 import { fromEventPattern } from 'rxjs';
-import { map, elementAt } from 'rxjs/operators';
+
+export interface IBackEvent {
+  target: string | null;
+}
 
 export class BackHandlerDelegate {
-  private shouldExit: boolean = false;
-  constructor() {
-    const addHandler = (handler: () => void) => {
-      BackHandler.addEventListener('hardwareBackPress', () => {
-        handler();
-        return !this.shouldExit;
+  private static addEventListener = (handler: (event: IBackEvent) => void) => {
+    BackHandler.addEventListener('hardwareBackPress', () => {
+      handler({
+        target: null
       });
-    };
-    const hardwareBacks$ = fromEventPattern<undefined>(addHandler);
-    hardwareBacks$
-      .pipe(map(this.resetShouldExit))
-      .pipe(
-        map(() => {
-          // tslint:disable-next-line
-          console.log("back");
-        })
-      )
-      .pipe(elementAt(3))
-      .subscribe(this.setShouldExit);
-  }
-  private resetShouldExit = () => {
-    this.shouldExit = false;
-  };
-  private setShouldExit = () => {
-    this.shouldExit = true;
+      return true;
+    });
   };
+
+  private back$ = fromEventPattern<IBackEvent>(
+    BackHandlerDelegate.addEventListener
+  );
+
+  // tslint:disable-next-line:member-ordering
+  defaultBackContext = { back$: this.back$ };
 }

src/Navigation/__tests__/BackHandlerDelegate.test.tsx

@@ -0,0 +1,19 @@
+import BackHandler from 'react-native/Libraries/Utilities/__mocks__/BackHandler';
+import { BackHandlerDelegate } from '../BackHandlerDelegate';
+
+jest.mock('react-native', () => ({
+  BackHandler: require.requireActual(
+    'react-native/Libraries/Utilities/__mocks__/BackHandler'
+  )
+}));
+
+describe('BackHandlerDelegate', () => {
+  it('exposes a root context which emits back events', () => {
+    const backHandlerDelegate = new BackHandlerDelegate();
+    backHandlerDelegate.defaultBackContext.back$.subscribe(event => {
+      expect(event).toStrictEqual({ target: null });
+    });
+    BackHandler.mockPressBack();
+    expect.assertions(1);
+  });
+});

src/createCanal.tsx

@@ -3,8 +3,10 @@ import { ViewStyle, View, StyleSheet, StyleProp } from 'react-native';
 import { Observer } from 'mobx-react/native';
 import { fromStream } from 'mobx-utils';
 import { Subject } from 'rxjs';
-import { map, distinctUntilChanged } from 'rxjs/operators';
+import { map, distinctUntilChanged, withLatestFrom } from 'rxjs/operators';
 import { Navigation } from './Navigation';
+import { BackContext } from './Navigation/BackContext';
+import { last } from './utils/Array.last';
 
 type CanalComponentProps<T> = {
   style?: StyleProp<ViewStyle>;
@@ -49,6 +51,9 @@ export const createCanal = <
       style: StyleSheet.absoluteFill
     };
 
+    static contextType = BackContext;
+    context!: React.ContextType<typeof BackContext>;
+
     canalId = Date.now().toString();
 
     stopsList = stopsList;
@@ -126,6 +131,18 @@ export const createCanal = <
     }
 
     render() {
+      // @ts-ignore
+      const back$ = this.context.back$
+        .pipe(withLatestFrom(this.progress$))
+        .pipe(
+          map(([_, progress]) => {
+            const currentStop = last(progress);
+            if (currentStop) {
+              return { target: currentStop.name };
+            }
+            return { target: null };
+          })
+        );
       return (
         <View style={this.props.style}>
           <Observer>

src/utils/Array.last.ts

@@ -0,0 +1,4 @@
+export function last<T>(arr: T[]): T | null {
+  if (arr.length < 1) { return null; }
+  return arr[arr.length - 1];
+}

src/utils/__tests__/Array.last.test.ts

@@ -0,0 +1,11 @@
+import { last } from '../Array.last';
+
+describe('Array.last', () => {
+  it('returns null if arr is empty', () => {
+    expect(last([])).toBeNull();
+  });
+
+  it('returns the last element of the list', () => {
+    expect(last([1, 2, 3])).toBe(3);
+  });
+});