@applicaster/quick-brick-core 15.0.0-rc.12 → 15.0.0-rc.121

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/ModalBottomSheetFrame.tsx

@@ -42,12 +42,17 @@ const defaultBottomOffset = platformSelect({
   android: 0,
 });
 
+const SAFE_AREA_BREAKING_API_VERSION = 35;
+
 const getSheetHeight = ({ height, bottomOffset, maxHeight }) => {
   return platformSelect({
     ios: height - bottomOffset,
     default:
       (height || maxHeight) -
-      (isAndroidPlatform() && !isAndroidVersionAtLeast(35) ? bottomOffset : 0),
+      (isAndroidPlatform() &&
+      !isAndroidVersionAtLeast(SAFE_AREA_BREAKING_API_VERSION)
+        ? bottomOffset
+        : 0),
   });
 };
 

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

@@ -7,16 +7,12 @@ import {
   getTargetRoute,
   usesVideoModal,
 } from "@applicaster/zapp-react-native-utils/navigationUtils";
-import { last } from "@applicaster/zapp-react-native-utils/utils";
+import { clone, last } from "@applicaster/zapp-react-native-utils/utils";
 import {
   allowedOrientationsForScreen,
   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.
@@ -249,22 +246,24 @@ export function NavigationProvider({ children }: Props) {
     const screen = rivers[screenId];
     const parent = findParent(context, navigator.currentRoute);
 
+    const entryClone = clone(entry);
+
     if (!screen) {
       logger.warn({
         message: `Cannot resolve type mapping for ${screenId} id`,
-        data: { entry, screenId },
+        data: { entry: entryClone, screenId },
       });
 
       return;
     }
 
     if (parent) {
-      entry.parent = parent?.data;
+      entryClone.parent = parent?.data;
 
-      entry.parentId = parent?.id;
+      entryClone.parentId = parent?.id;
     }
 
-    dispatch(setNestedContent(pathname, entry, screen));
+    dispatch(setNestedContent(pathname, entryClone, screen));
   };
 
   const pushItem = (item, options = {}) => {
@@ -477,21 +476,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),
@@ -523,7 +512,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);
@@ -726,7 +715,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) || [],