@applicaster/quick-brick-core 15.1.4 → 16.0.0-alpha.1042942411

package/App/DeepLinking/URLSchemeHandler/SchemeHandlerHooks/useUrlSchemeHandler.ts

@@ -1,55 +1,59 @@
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
-import * as R from "ramda";
+import {
+  selectUrlSchemePlugins,
+  useAppSelector,
+} from "@applicaster/zapp-react-native-redux";
 
 import { schemeHandlerHooks } from ".";
 import { parseUrl } from "../../helpers";
-
 import { log_warning } from "../../logger";
+import { getPluginModuleUrlScheme } from "@applicaster/zapp-react-native-utils/pluginUtils";
 
 type useUrlSchemeHandlerArgs = {
   url: string;
   onFinish: (callback: (done: () => void) => void) => void;
 };
 
-function resolveSchemeHandler(host, plugins) {
+function resolveSchemeHandler(
+  host: string,
+  eligiblePlugins: QuickBrickPlugin[]
+) {
+  // First check built-in scheme handlers
   if (schemeHandlerHooks?.[host]) return schemeHandlerHooks?.[host];
 
-  const elligiblePlugins = R.filter(
-    R.hasPath(["module", "urlScheme"]),
-    plugins
-  );
-
-  if (elligiblePlugins?.length > 0) {
-    const match = R.compose(
-      R.prop("handler"),
-      R.head,
-      R.filter(R.propEq("host", host)),
-      R.map(R.path(["module", "urlScheme"]))
-    )(elligiblePlugins);
+  if (eligiblePlugins?.length > 0) {
+    // Find the first plugin with matching host
+    const matchingPlugin = eligiblePlugins.find(
+      (plugin) => getPluginModuleUrlScheme(plugin)?.host === host
+    );
 
-    return match;
+    return getPluginModuleUrlScheme(matchingPlugin)?.handler || null;
   }
-}
 
-const skipSchemeHandle = ({ url }) => {
-  throw new Error(
-    `Non of the installed plugins knows how to handle this urlScheme ${url}`
-  );
-};
+  return null;
+}
 
 export function useUrlSchemeHandler({
   url,
   onFinish,
 }: useUrlSchemeHandlerArgs) {
   const { host, query } = parseUrl(url);
-  const { plugins } = usePickFromState(["plugins"]);
+  const pluginsWithUrlScheme = useAppSelector(selectUrlSchemePlugins) || [];
 
-  const useSchemeHandler =
-    resolveSchemeHandler(host, plugins) || skipSchemeHandle;
+  const schemeHandler = resolveSchemeHandler(host, pluginsWithUrlScheme);
 
   try {
-    useSchemeHandler({ query, url, onFinish });
+    if (schemeHandler) {
+      schemeHandler({ query, url, onFinish });
+    } else {
+      onFinish((done) => {
+        log_warning(
+          `unable to resolve ${url}: No handler found for scheme ${host}`
+        );
+
+        done?.();
+      });
+    }
   } catch (e) {
     onFinish((done) => {
       log_warning(`unable to resolve ${url}: ${e.message}`);
@@ -58,11 +62,19 @@ export function useUrlSchemeHandler({
   }
 }
 
-export function handleActionSchemeUrl({ url }) {
+export function handleActionSchemeUrl({
+  url,
+  availablePlugins = appStore.get("plugins"),
+}) {
   const { host, query } = parseUrl(url);
-  const plugins = appStore.get("plugins");
 
-  const actionScheme = resolveSchemeHandler(host, plugins) || skipSchemeHandle;
+  const actionScheme = resolveSchemeHandler(host, availablePlugins);
+
+  if (!actionScheme) {
+    throw new Error(
+      `Non of the installed plugins knows how to handle this urlScheme ${url}`
+    );
+  }
 
   actionScheme({ query, url });
 }

package/App/DeepLinking/URLSchemeHandler/URLSchemeHandler.tsx

@@ -30,7 +30,10 @@ export function URLSchemeHandler({ url, onFinish }: Props) {
   useUrlSchemeHandler({ url, onFinish });
 
   return (
-    <View style={[viewStyles.container, { width, height, backgroundColor }]}>
+    <View
+      testID="URLSchemeHandler"
+      style={[viewStyles.container, { width, height, backgroundColor }]}
+    >
       <Spinner size="large" />
     </View>
   );

package/App/DeepLinking/URLSchemeHandler/__tests__/URLSchemeHandler.test.tsx

@@ -1,5 +1,7 @@
 import React from "react";
-import { cleanup, render, waitFor } from "@testing-library/react-native";
+import { StyleSheet } from "react-native";
+import { cleanup } from "@testing-library/react-native";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 
 const theme = {
   screen_margin_top: 0,
@@ -10,14 +12,6 @@ jest.mock(
   "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation"
 );
 
-jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
-  useTheme: jest.fn(() => theme),
-}));
-
-jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
-  usePickFromState: jest.fn(() => ({})),
-}));
-
 const { URLSchemeHandler } = require("../URLSchemeHandler");
 const schemeHooks = require("../SchemeHandlerHooks/useUrlSchemeHandler");
 
@@ -36,12 +30,25 @@ describe("URLSchemeHandler", () => {
 
   afterEach(cleanup);
 
-  it("renders correctly and invokes the hook", async () => {
-    const wrapper = await waitFor(() =>
-      render(<URLSchemeHandler url={url} onFinish={onFinish} />)
+  it("renders correctly and invokes the hook", () => {
+    const wrapper = renderWithProviders(
+      <URLSchemeHandler url={url} onFinish={onFinish} />,
+      {},
+      theme
     );
 
-    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(wrapper.getByTestId("URLSchemeHandler")).toBeTruthy();
+
+    expect(
+      StyleSheet.flatten(wrapper.getByTestId("URLSchemeHandler").props.style)
+    ).toMatchObject({
+      alignItems: "center",
+      backgroundColor: "white",
+      flex: 1,
+      height: 1334,
+      justifyContent: "center",
+      width: 750,
+    });
 
     expect(hookSpy).toHaveBeenCalledWith(
       expect.objectContaining({ url, onFinish })

package/App/DeepLinking/URLSchemeListener/index.tsx

@@ -3,16 +3,15 @@ import React, { useCallback, useContext } from "react";
 import { URLSchemeHandler } from "../URLSchemeHandler";
 import { URLSchemeContext } from "./URLSchemeContextProvider";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useAppSelector } from "@applicaster/zapp-react-native-redux/hooks";
+import { selectAppReady } from "@applicaster/zapp-react-native-redux";
 
 export function URLSchemeListener({ children }: { children: React.ReactNode }) {
   const { url, done } = useContext(URLSchemeContext);
 
   const navigator = useNavigation();
 
-  const { appState } = usePickFromState(["appState"]);
-
-  const appReady = appState?.appReady;
+  const appReady = useAppSelector(selectAppReady);
 
   const onFinish = useCallback(
     (callback) => {

package/App/ErrorBoundary/__tests__/store.test.js

@@ -1,4 +1,4 @@
-import { act, renderHook } from "@testing-library/react-hooks";
+import { act, renderHook } from "@testing-library/react-native";
 import { useErrorStore } from "../store";
 
 describe("Error Store", () => {

package/App/ModalProvider/ModalBottomSheet/DraggableBottomSheet/__tests__/index.test.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { View } from "react-native";
+import { render } from "@testing-library/react-native";
+import { State } from "react-native-gesture-handler";
+import { DraggableBottomSheet } from "../index";
+
+// Render the gesture handlers as passthrough Views so we can mount the sheet
+// and drive its release handler directly. State stays real (we need ACTIVE).
+jest.mock("react-native-gesture-handler", () => {
+  const RN = require("react-native");
+  const ReactActual = require("react");
+  const actual = jest.requireActual("react-native-gesture-handler");
+
+  const Passthrough = ReactActual.forwardRef(({ children }: any, _ref: any) => (
+    <RN.View>{children}</RN.View>
+  ));
+
+  return {
+    __esModule: true,
+    ...actual,
+    PanGestureHandler: Passthrough,
+    TapGestureHandler: Passthrough,
+  };
+});
+
+// height 800, sheetHeight 400, no header:
+//   SnapPoints.top = 800 - 400 = 400 (lastSnap after mount)
+//   SnapPoints.threshold = max(800 - 400 / 2, 100) = 600
+// Release dismisses when lastSnap + translationY + 0.05 * velocityY > 600,
+// i.e. once the drag+toss pushes past 200px.
+const mountSheet = () => {
+  const dismiss = jest.fn();
+  const ref = React.createRef<DraggableBottomSheet>();
+
+  render(
+    <DraggableBottomSheet
+      ref={ref}
+      header={() => null}
+      dismiss={dismiss}
+      visible={true}
+      sheetHeight={400}
+      width={320}
+      height={800}
+      hasHeader={false}
+      maxWidth={320}
+    >
+      <View testID="child" />
+    </DraggableBottomSheet>
+  );
+
+  return { instance: ref.current as DraggableBottomSheet, dismiss };
+};
+
+const release = (
+  instance: DraggableBottomSheet,
+  translationY: number,
+  velocityY = 0
+) =>
+  instance._onHandlerStateChange({
+    nativeEvent: { oldState: State.ACTIVE, translationY, velocityY },
+  });
+
+describe("DraggableBottomSheet release", () => {
+  // Mounting an open sheet schedules a deferred animateIn via setTimeout. Keep
+  // it on fake timers so it never fires into a torn-down Jest environment.
+  beforeEach(() => jest.useFakeTimers());
+
+  afterEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+  });
+
+  it("dismisses when the release lands past the threshold", () => {
+    const { instance, dismiss } = mountSheet();
+
+    release(instance, 300);
+
+    expect(dismiss).toHaveBeenCalledTimes(1);
+  });
+
+  it("springs back (does not dismiss) when the release is below the threshold", () => {
+    const { instance, dismiss } = mountSheet();
+
+    release(instance, 50);
+
+    expect(dismiss).not.toHaveBeenCalled();
+  });
+});

package/App/ModalProvider/ModalBottomSheet/DraggableBottomSheet/index.tsx

@@ -1,15 +1,24 @@
-import React, { Component, ReactChild, ReactElement } from "react";
+import React, { Component, ReactElement } from "react";
 import { Animated, StyleSheet, View, Easing } from "react-native";
 import {
   PanGestureHandler,
-  NativeViewGestureHandler,
   State,
   TapGestureHandler,
 } from "react-native-gesture-handler";
 
 import { SnapPoints } from "./SnapPoints";
-
-const USE_NATIVE_DRIVER = true;
+import {
+  BottomSheetContext,
+  BottomSheetContextValue,
+} from "@applicaster/zapp-react-native-utils/bottomSheet";
+
+// Must stay false: the sheet drives _dragY from old-API PanGestureHandler
+// onGestureEvent props via RN Animated.event. This RNGH version cannot attach
+// a native (useNativeDriver: true) Animated.event to those handlers — it leaks
+// the AnimatedEvent object into the JS event path and throws "Expected
+// onGestureHandlerEvent listener to be a function". Native-threaded dragging
+// needs the full reanimated + Gesture-API migration (tracked separately).
+const USE_NATIVE_DRIVER = false;
 const HEADER_HEIGHT = 44;
 
 const ANIMATION_DURATION = 400;
@@ -24,7 +33,7 @@ const styles = StyleSheet.create({
 });
 
 type Props = {
-  children: ReactChild;
+  children: ReactElement;
   header: (boolean) => ReactElement;
   dismiss: () => void;
   visible: boolean;
@@ -49,35 +58,24 @@ export class DraggableBottomSheet extends Component<Props, ComponentState> {
   _isMounted = false;
   _animatedIn = false;
   _animating = false;
-  _lastScrollYValue: number;
-  _lastScrollY: Animated.Value;
   _dragY: Animated.Value;
-  _reverseLastScrollY: Animated.AnimatedInterpolation<number>;
   _translateYOffset: Animated.Value;
   _translateY: Animated.AnimatedInterpolation<number>;
   _snapPoints: SnapPoints;
   _prevContentHeight = 0;
+  _bottomSheetContextValue: BottomSheetContextValue;
 
   _callWhenMounted: () => void | null;
 
-  _onRegisterLastScroll: (...args: any[]) => void;
+  // One shared JS Animated.event feeds _dragY for every drag handler (top
+  // handle, header drag-area, body). Safe because useNativeDriver is false — the
+  // event is a plain JS listener that setValue's _dragY for whichever handler
+  // is active, and only one gesture is ever active at a time.
   _onGestureEvent: (...args: any[]) => void;
 
   constructor(props) {
     super(props);
 
-    this._lastScrollYValue = 0;
-    this._lastScrollY = new Animated.Value(0);
-
-    this._onRegisterLastScroll = Animated.event(
-      [{ nativeEvent: { contentOffset: { y: this._lastScrollY } } }],
-      { useNativeDriver: USE_NATIVE_DRIVER }
-    );
-
-    this._lastScrollY.addListener(({ value }) => {
-      this._lastScrollYValue = value;
-    });
-
     this._dragY = new Animated.Value(0);
 
     this._onGestureEvent = Animated.event(
@@ -85,10 +83,11 @@ export class DraggableBottomSheet extends Component<Props, ComponentState> {
       { useNativeDriver: USE_NATIVE_DRIVER }
     );
 
-    this._reverseLastScrollY = Animated.multiply(
-      new Animated.Value(-1),
-      this._lastScrollY
-    );
+    this._bottomSheetContextValue = {
+      masterDrawerRef: this.masterdrawer,
+      onDragGestureEvent: this._onGestureEvent,
+      onDragStateChange: this._onHeaderHandlerStateChange,
+    };
 
     const initialSnapPoints = new SnapPoints(props.height, props.sheetHeight);
 
@@ -181,7 +180,7 @@ export class DraggableBottomSheet extends Component<Props, ComponentState> {
 
     this._translateY = Animated.add(
       this._translateYOffset,
-      Animated.add(this._dragY, this._reverseLastScrollY)
+      this._dragY
     ).interpolate({
       inputRange: [this._snapPoints.top, this._snapPoints.bottom],
       outputRange: [this._snapPoints.top, this._snapPoints.bottom],
@@ -226,10 +225,6 @@ export class DraggableBottomSheet extends Component<Props, ComponentState> {
       return;
     }
 
-    if (nativeEvent.oldState === State.BEGAN) {
-      this._lastScrollY.setValue(0);
-    }
-
     this._onHandlerStateChange({ nativeEvent });
   };
 
@@ -240,8 +235,7 @@ export class DraggableBottomSheet extends Component<Props, ComponentState> {
 
     if (nativeEvent.oldState === State.ACTIVE) {
       const { velocityY } = nativeEvent;
-      let { translationY } = nativeEvent;
-      translationY -= this._lastScrollYValue;
+      const { translationY } = nativeEvent;
       const dragToss = 0.05;
 
       const endOffsetY =
@@ -300,7 +294,7 @@ export class DraggableBottomSheet extends Component<Props, ComponentState> {
           >
             <PanGestureHandler
               ref={this.drawerheader}
-              simultaneousHandlers={[this.scroll, this.masterdrawer]}
+              simultaneousHandlers={[this.masterdrawer]}
               shouldCancelWhenOutside={false}
               onGestureEvent={this._onGestureEvent}
               onHandlerStateChange={this._onHeaderHandlerStateChange}
@@ -309,31 +303,11 @@ export class DraggableBottomSheet extends Component<Props, ComponentState> {
                 {this.props?.header(this.state.dragging)}
               </Animated.View>
             </PanGestureHandler>
-            <PanGestureHandler
-              ref={this.drawer}
-              simultaneousHandlers={[this.scroll, this.masterdrawer]}
-              shouldCancelWhenOutside={false}
-              onGestureEvent={this._onGestureEvent}
-              onHandlerStateChange={this._onHandlerStateChange}
-            >
+            <BottomSheetContext.Provider value={this._bottomSheetContextValue}>
               <Animated.View style={styles.container}>
-                <NativeViewGestureHandler
-                  ref={this.scroll}
-                  waitFor={this.masterdrawer}
-                  simultaneousHandlers={this.drawer}
-                >
-                  <Animated.ScrollView
-                    bounces={false}
-                    onScrollBeginDrag={this._onRegisterLastScroll}
-                    scrollEventThrottle={1}
-                    scrollEnabled={false}
-                    showsVerticalScrollIndicator={false}
-                  >
-                    {this.props.children}
-                  </Animated.ScrollView>
-                </NativeViewGestureHandler>
+                {this.props.children}
               </Animated.View>
-            </PanGestureHandler>
+            </BottomSheetContext.Provider>
           </Animated.View>
         </View>
       </TapGestureHandler>

package/App/NavigationProvider/Loader.tsx

@@ -2,8 +2,9 @@ import React from "react";
 import { View, StyleSheet } from "react-native";
 
 import { Spinner } from "@applicaster/zapp-react-native-ui-components/Components/Spinner";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useAppSelector } from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { selectAppLaunched } from "@applicaster/zapp-react-native-redux";
 
 type Props = {
   children: React.ReactChild;
@@ -21,9 +22,7 @@ const styles = StyleSheet.create({
 });
 
 export function Loader({ children }: Props) {
-  const {
-    appState: { appLaunched },
-  } = usePickFromState(["appState"]);
+  const appLaunched = useAppSelector(selectAppLaunched);
 
   const { currentRoute } = useNavigation();
 

package/App/NavigationProvider/NavigationProvider.tsx

@@ -13,10 +13,6 @@ import {
   useGetScreenOrientation,
 } from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
 import { focusManager } from "@applicaster/zapp-react-native-utils/focusManager/FocusManager";
-import {
-  useContentTypes,
-  usePickFromState,
-} from "@applicaster/zapp-react-native-redux/hooks";
 
 import reducer, {
   ACTIONS,
@@ -44,6 +40,7 @@ import {
   activeRiverSelector,
   homeRiverSelector,
   lastEntrySelector,
+  startUpHookPluginIdentifiersSelector,
 } from "./navigator/selectors";
 
 import { coreAppLogger } from "../logger";
@@ -79,6 +76,16 @@ import { Hook } from "@applicaster/zapp-react-native-utils/appUtils/HooksManager
 import { URLSchemeContext } from "../DeepLinking/URLSchemeListener/URLSchemeContextProvider";
 
 import { loadingOverlayManager } from "../LoadingOverlay";
+import {
+  selectAppLaunched,
+  useAppSelector,
+  useContentTypes,
+  usePlugins,
+} from "@applicaster/zapp-react-native-redux";
+import {
+  useLayoutVersion,
+  useRivers,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
 
 const logger = coreAppLogger.addSubsystem("Navigator");
 
@@ -100,22 +107,11 @@ const platform = getPlatform();
 export function NavigationProvider({ children }: Props) {
   const { url: deepLinkURL } = React.useContext(URLSchemeContext);
 
-  const {
-    appData: { layoutVersion },
-    rivers,
-    plugins,
-    pluginConfigurations,
-    appState: { appLaunched },
-  } = usePickFromState([
-    "appData",
-    "rivers",
-    "plugins",
-    "pluginConfigurations",
-    "appState",
-    "contentTypes",
-  ]);
-
+  const appLaunched = useAppSelector(selectAppLaunched);
+  const layoutVersion = useLayoutVersion();
+  const rivers = useRivers();
   const contentTypes = useContentTypes();
+  const plugins = usePlugins();
 
   const [state, dispatch] = React.useReducer<
     NavigationReducer,
@@ -227,6 +223,7 @@ export function NavigationProvider({ children }: Props) {
   };
 
   const isVideoModalDocked = () =>
+    state?.options.videoModal.visible &&
     state?.options.videoModal.mode === "MINIMIZED";
 
   // TODO: Remove as it's using a concept of "current" route.
@@ -485,21 +482,11 @@ export function NavigationProvider({ children }: Props) {
     openLoadingOverlay();
   };
 
-  const checkStartUpHooks = React.useMemo(() => {
-    if (!pluginConfigurations) return false;
-
-    const startUpHooksIdentifiers = R.compose(
-      R.map((item) => item.plugin.identifier),
-      R.filter(
-        R.allPass([
-          R.pathEq(["plugin", "api", "require_startup_execution"], true),
-          R.pathEq(["plugin", "react_native"], true),
-          R.pathEq(["plugin", "preload"], true),
-        ])
-      ),
-      R.values
-    )(pluginConfigurations);
+  const startUpHooksIdentifiers = useAppSelector(
+    startUpHookPluginIdentifiersSelector
+  );
 
+  const checkStartUpHooks = React.useMemo(() => {
     if (startUpHooksIdentifiers?.length) {
       const startUpHooks = R.filter(
         (plugin) => R.includes(plugin.identifier, startUpHooksIdentifiers),
@@ -531,7 +518,7 @@ export function NavigationProvider({ children }: Props) {
     }
 
     return false;
-  }, [pluginConfigurations, plugins, rivers]);
+  }, [startUpHooksIdentifiers, plugins, rivers]);
 
   const [startUpHooks, _setStartUpHooks] = React.useState(checkStartUpHooks);
   const currentStartUpHooks = React.useRef(checkStartUpHooks);
@@ -734,7 +721,7 @@ export function NavigationProvider({ children }: Props) {
       activeRiver,
       getPathname: () => pathnameRef.current, // hack use to fix issue causing broken navigation as currentRoute is unreliable
       currentRoute: pathname, // TODO: remove. Current route shouldn't be needed
-      previousAction: lastEntrySelector(state)
+      previousAction: (lastEntrySelector(state) as any)
         ?.action as QuickBrickNavigationActionType,
       push: pushItem,
       replace: replaceItem,

package/App/NavigationProvider/ScreenHooks/usePluginScreenHooks.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as R from "ramda";
 
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePlugins } from "@applicaster/zapp-react-native-redux";
 
 enum ReactHooks {
   useEffect = "useEffect",
@@ -39,7 +39,7 @@ function invokeScreenHook(hooksWrappers) {
 }
 
 export function usePluginScreenHooks(pathname: string) {
-  const { plugins } = usePickFromState(["plugins"]);
+  const plugins = usePlugins();
 
   const hooks = React.useMemo(
     () => R.filter(hasScreenHook, plugins) || [],