@applicaster/quick-brick-core 15.0.0-rc.48 → 15.0.0-rc.49

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,
@@ -477,21 +473,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 +509,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 +712,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) || [],

package/App/NavigationProvider/__tests__/navigationProvider.test.tsx

@@ -1,13 +1,16 @@
 import React from "react";
 import { View } from "react-native";
-import { act, create } from "react-test-renderer";
-import { createStore } from "redux";
-import { Provider } from "react-redux";
 
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { NavigationProvider } from "../NavigationProvider";
+
 import { getByTestId } from "@applicaster/zapp-react-native-utils/testUtils/getByTestId";
-// @TODO @szhigunov to complete the migration to @testing-library/react-native
-// import { act, waitFor } from "@testing-library/react-native";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+import { act } from "@testing-library/react-native";
+
+jest.useFakeTimers({
+  legacyFakeTimers: true,
+});
 
 const rivers = {
   A1234: {
@@ -27,20 +30,20 @@ const rivers = {
     ui_components: [],
     hooks: {
       postload_plugins: [],
-      preload_plugins: [
-        {
-          screen_id: "hook_screen",
-          identifier: "test-hook",
-          type: "general",
-          weight: 7,
-        },
-        {
-          screen_id: "hook_screen2",
-          identifier: "test-hook2",
-          type: "general",
-          weight: 7,
-        },
-      ],
+      // preload_plugins: [
+      //   {
+      //     screen_id: "hook_screen",
+      //     identifier: "test-hook",
+      //     type: "general",
+      //     weight: 7,
+      //   },
+      //   {
+      //     screen_id: "hook_screen2",
+      //     identifier: "test-hook2",
+      //     type: "general",
+      //     weight: 7,
+      //   },
+      // ],
     },
   },
   D6543: {
@@ -81,13 +84,9 @@ const rivers = {
   },
 };
 
-jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
-  usePickFromState: jest.fn(() => ({
-    appData: { layoutVersion: "v2" },
-    rivers,
-    plugins: [],
-    appState: { appLaunched: true },
-  })),
+jest.mock("@applicaster/zapp-react-native-redux", () => ({
+  ...jest.requireActual("@applicaster/zapp-react-native-redux"),
+  usePickFromState: jest.fn(() => ({})),
   useContentTypes: jest.fn(() => ({})),
 }));
 
@@ -107,8 +106,6 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/connection", () => ({
   })),
 }));
 
-const { NavigationProvider } = require("../NavigationProvider");
-
 // eslint-disable-next-line react/prop-types
 const HookComponent = ({ callback, payload }: Props) => {
   if (payload?.id === "D6543") {
@@ -154,18 +151,13 @@ const failingHook = {
   name: "failing hook",
 };
 
-// const store = {
-//   rivers,
-//   plugins: [hookPlugin, hookPlugin2, failingHook],
-// };
-
-const store = createStore(() => ({
+const store = {
   appData: { layoutVersion: "v1" },
-  contentTypes: null,
+  contentTypes: {},
   rivers,
   plugins: [hookPlugin, hookPlugin2, failingHook],
   appState: { appLaunched: true },
-}));
+};
 
 const ContextConsumer = () => {
   const { state, ...navigator } = useNavigation();
@@ -173,6 +165,7 @@ const ContextConsumer = () => {
   let renderHook;
 
   if (navigator.currentRoute.includes("/hooks/")) {
+    // @ts-ignore
     const { hookPlugin, payload, callback } = navigator.screenData;
     const Component = hookPlugin.module.Component;
 
@@ -192,18 +185,21 @@ const ContextConsumer = () => {
 
 const consoleSpy = jest.spyOn(console, "error").mockImplementation(() => {});
 
-// const renderContextConsumer = (_store = store) => {
-//   return renderWithProviders(<ContextConsumer />, _store);
-// };
-
-const renderContextConsumer = (_store = store) => {
-  return create(
-    <Provider store={store}>
-      <NavigationProvider>
-        <ContextConsumer />
-      </NavigationProvider>
-    </Provider>
+const renderContextConsumer = (_store = store) =>
+  renderWithProviders(
+    <NavigationProvider>
+      <ContextConsumer />
+    </NavigationProvider>,
+    _store
   );
+
+const getNavigatorValues = (wrapper) => {
+  const view = getByTestId(wrapper, "WrapperView");
+  const navigator = view.props.navigator;
+
+  const state = view.props.state;
+
+  return { navigator, state };
 };
 
 afterAll(() => {
@@ -213,14 +209,12 @@ afterAll(() => {
 describe("<NavigationProvider />", () => {
   let wrapper;
 
-  it("navigator contains expected properties", () => {
-    act(() => {
-      wrapper = renderContextConsumer();
-    });
-
-    const view = getByTestId(wrapper, "WrapperView");
+  beforeEach(() => {
+    wrapper = renderContextConsumer();
+  });
 
-    const { navigator } = view.props;
+  it("navigator contains expected properties", () => {
+    const { navigator } = getNavigatorValues(wrapper);
     expect(navigator.activeRiver).toEqual(rivers.B4567);
     expect(navigator.currentRoute).toEqual("/river/B4567");
     expect(navigator.previousAction).toEqual("REPLACE");
@@ -236,148 +230,131 @@ describe("<NavigationProvider />", () => {
     });
   });
 
-  describe("pushing a new route", () => {
+  it("pushing a new route sets the data to that route", async () => {
     act(() => {
-      wrapper = renderContextConsumer();
+      getNavigatorValues(wrapper).navigator.push(rivers.A1234);
     });
 
-    it("sets the data to that route", async () => {
-      const view = getByTestId(wrapper, "WrapperView");
+    const { navigator, state } = getNavigatorValues(wrapper);
 
-      act(() => view.props.navigator.push(rivers.A1234));
+    expect(navigator).toHaveProperty("activeRiver", rivers.A1234);
 
-      expect(view.props.navigator).toHaveProperty("activeRiver", rivers.A1234);
+    expect(navigator).toHaveProperty(
+      "currentRoute",
+      "/river/B4567/river/A1234"
+    );
 
-      expect(view.props.navigator).toHaveProperty(
-        "currentRoute",
-        "/river/B4567/river/A1234"
-      );
-
-      expect(view.props.navigator.screenData).toEqual({
-        ...rivers.A1234,
-        targetScreen: rivers.A1234,
-      });
-
-      expect(view.props.state.stack.mainStack).toHaveLength(2);
+    expect(navigator.screenData).toEqual({
+      ...rivers.A1234,
+      targetScreen: rivers.A1234,
     });
+
+    expect(state.stack.mainStack).toHaveLength(2);
   });
 
   describe("replacing a current route", () => {
-    act(() => {
-      wrapper = renderContextConsumer();
-    });
-
-    const view = getByTestId(wrapper, "WrapperView");
-
     it("sets the data to that route", () => {
-      act(() => view.props.navigator.replace(rivers.A1234));
-      expect(view.props.navigator).toHaveProperty("activeRiver", rivers.A1234);
+      act(() => getNavigatorValues(wrapper).navigator.replace(rivers.A1234));
+      const { navigator, state } = getNavigatorValues(wrapper);
+      expect(navigator).toHaveProperty("activeRiver", rivers.A1234);
 
-      expect(view.props.navigator).toHaveProperty(
-        "currentRoute",
-        "/river/A1234"
-      );
+      expect(navigator).toHaveProperty("currentRoute", "/river/A1234");
 
-      expect(view.props.navigator.screenData).toEqual({
+      expect(navigator.screenData).toEqual({
         ...rivers.A1234,
         targetScreen: rivers.A1234,
       });
 
-      expect(view.props.state.stack.mainStack).toHaveLength(1);
+      expect(state.stack.mainStack).toHaveLength(1);
     });
   });
 
   describe("going back", () => {
     describe("when there is no previous route", () => {
-      act(() => {
-        wrapper = renderContextConsumer();
-      });
-
-      const view = getByTestId(wrapper, "WrapperView");
-
       it("returns false when calling canGoBack", () => {
         let result;
 
         act(() => {
-          result = view.props.navigator.canGoBack();
+          result = getNavigatorValues(wrapper).navigator.canGoBack();
         });
 
         expect(result).toBe(false);
       });
 
       it("stays on the current route", () => {
-        act(() => view.props.navigator.goBack());
+        act(() => getNavigatorValues(wrapper).navigator.goBack());
+        const { navigator, state } = getNavigatorValues(wrapper);
 
-        expect(view.props.navigator).toHaveProperty(
-          "activeRiver",
-          rivers.B4567
-        );
+        expect(navigator).toHaveProperty("activeRiver", rivers.B4567);
 
-        expect(view.props.navigator).toHaveProperty(
-          "currentRoute",
-          "/river/B4567"
-        );
+        expect(navigator).toHaveProperty("currentRoute", "/river/B4567");
 
-        expect(view.props.navigator.screenData).toEqual({
+        expect(navigator.screenData).toEqual({
           ...rivers.B4567,
           targetScreen: rivers.B4567,
         });
 
-        expect(view.props.state.stack.mainStack).toHaveLength(1);
+        expect(state.stack.mainStack).toHaveLength(1);
       });
     });
 
     describe("when there is one route and we're going in a hook", () => {
-      act(() => {
-        wrapper = renderContextConsumer();
+      beforeEach(() => {
+        getNavigatorValues(wrapper).navigator.replace(rivers.A1234);
       });
 
-      const view = getByTestId(wrapper, "WrapperView");
-      act(() => view.props.navigator.replace(rivers.A1234));
+      it.skip("returns true when calling goBack()", () => {
+        wrapper = renderContextConsumer();
+
+        act(() => {
+          getNavigatorValues(wrapper).navigator.replace(rivers.A1234);
+          getNavigatorValues(wrapper).navigator.push(rivers.C0987);
+        });
 
-      it("returns true when calling goBack()", () => {
-        act(() => view.props.navigator.push(rivers.C0987));
-        expect(view.props.state.stack.mainStack.length).toBeGreaterThan(1);
-        expect(view.props.navigator.canGoBack()).toEqual(true);
+        const { navigator, state } = getNavigatorValues(wrapper);
+
+        expect(state.stack.mainStack.length).toBeGreaterThan(1);
+        expect(navigator.canGoBack()).toEqual(true);
       });
 
       // this test is skipped as it doesn't work on this version of react
       // where we can't properly test async actions within components
       it.skip("returns to the previous route when the hook is cancelled", () => {
-        act(() => view.props.navigator.replace(rivers.A1234));
-        act(() => view.props.navigator.push(rivers.D6543));
+        wrapper = renderContextConsumer();
 
-        expect(view.props.navigator).toHaveProperty(
-          "activeRiver",
-          rivers.A1234
-        );
+        act(() => {
+          getNavigatorValues(wrapper).navigator.replace(rivers.A1234);
+          getNavigatorValues(wrapper).navigator.push(rivers.D6543);
+        });
 
-        expect(view.props.navigator).toHaveProperty(
-          "currentRoute",
-          "/river/A1234"
-        );
+        const { navigator, state } = getNavigatorValues(wrapper);
 
-        expect(view.props.navigator.screenData).toEqual(rivers.A1234);
-        expect(view.props.state.stack.mainStack).toHaveLength(1);
+        expect(navigator).toHaveProperty("activeRiver", rivers.A1234);
+
+        expect(navigator).toHaveProperty("currentRoute", "/river/A1234");
+
+        expect(navigator.screenData).toEqual(rivers.A1234);
+        expect(state.stack.mainStack).toHaveLength(1);
       });
     });
 
     describe("when there is a previous route", () => {
-      act(() => {
-        wrapper = renderContextConsumer();
+      beforeEach(() => {
+        act(() => getNavigatorValues(wrapper).navigator.push(rivers.A1234));
+
+        act(() =>
+          getNavigatorValues(wrapper).navigator.push({
+            ...rivers.B4567,
+            id: "B4567-1",
+          })
+        );
       });
 
-      const view = getByTestId(wrapper, "WrapperView");
-
-      act(() => view.props.navigator.push(rivers.A1234));
-
-      act(() => view.props.navigator.push({ ...rivers.B4567, id: "B4567-1" }));
-
       it("returns true when calling canGoBack", () => {
         let result;
 
         act(() => {
-          result = view.props.navigator.canGoBack();
+          result = getNavigatorValues(wrapper).navigator.canGoBack();
         });
 
         expect(result).toBeTruthy();
@@ -387,74 +364,86 @@ describe("<NavigationProvider />", () => {
         let result;
 
         act(() => {
-          result = view.props.navigator.canGoBack(false, "B4567-1");
+          result = getNavigatorValues(wrapper).navigator.canGoBack(
+            false,
+            "B4567-1"
+          );
         });
 
         expect(result).toBeTruthy();
 
         act(() => {
-          result = view.props.navigator.canGoBack(false, "A1234");
+          result = getNavigatorValues(wrapper).navigator.canGoBack(
+            false,
+            "A1234"
+          );
         });
 
         expect(result).toBeTruthy();
       });
 
       it("returns to the previous route", () => {
-        expect(view.props.state.stack.mainStack).toHaveLength(3);
+        expect(getNavigatorValues(wrapper).state.stack.mainStack).toHaveLength(
+          3
+        );
 
-        act(() => view.props.navigator.goBack());
+        act(() => getNavigatorValues(wrapper).navigator.goBack());
 
-        expect(view.props.navigator).toHaveProperty(
+        expect(getNavigatorValues(wrapper).navigator).toHaveProperty(
           "activeRiver",
           rivers.A1234
         );
 
-        expect(view.props.navigator).toHaveProperty(
+        expect(getNavigatorValues(wrapper).navigator).toHaveProperty(
           "currentRoute",
           "/river/B4567/river/A1234"
         );
 
-        expect(view.props.navigator.screenData).toEqual({
+        expect(getNavigatorValues(wrapper).navigator.screenData).toEqual({
           ...rivers.A1234,
           targetScreen: rivers.A1234,
         });
 
-        expect(view.props.state.stack.mainStack).toHaveLength(2);
+        expect(getNavigatorValues(wrapper).state.stack.mainStack).toHaveLength(
+          2
+        );
       });
     });
 
     describe("when there is a previous route and there are hooks", () => {
-      act(() => {
+      beforeEach(() => {
         wrapper = renderContextConsumer();
+        act(() => getNavigatorValues(wrapper).navigator.push(rivers.A1234));
+        act(() => getNavigatorValues(wrapper).navigator.push(rivers.C0987));
       });
 
-      const view = getByTestId(wrapper, "WrapperView");
-      act(() => view.props.navigator.push(rivers.A1234));
-      act(() => view.props.navigator.push(rivers.C0987));
-
       it("returns to the previous entry in the stack which is not a hook", () => {
-        expect(view.props.state.stack.mainStack).toHaveLength(3);
+        expect(getNavigatorValues(wrapper).state.stack.mainStack).toHaveLength(
+          3
+        );
 
-        expect(view.props.navigator).toHaveProperty(
+        expect(getNavigatorValues(wrapper).navigator).toHaveProperty(
           "currentRoute",
           "/river/B4567/river/A1234/river/C0987"
         );
 
-        expect(view.props.navigator.screenData).toMatchObject({
+        expect(getNavigatorValues(wrapper).navigator.screenData).toMatchObject({
           ...rivers.C0987,
           targetScreen: rivers.C0987,
         });
 
-        act(() => view.props.navigator.goBack());
+        act(() => getNavigatorValues(wrapper).navigator.goBack());
 
-        expect(view.props.state.stack.mainStack).toHaveLength(2);
+        expect(getNavigatorValues(wrapper).state.stack.mainStack).toHaveLength(
+          2
+        );
 
-        expect(view.props.navigator).toHaveProperty(
+        expect(getNavigatorValues(wrapper).navigator).toHaveProperty(
           "currentRoute",
           "/river/B4567/river/A1234"
         );
 
-        expect(view.props.navigator.screenData).toMatchObject({
+        expect(getNavigatorValues(wrapper).navigator.screenData).toMatchObject({
           ...rivers.A1234,
           targetScreen: rivers.A1234,
         });

package/App/NavigationProvider/navigator/selectors.ts

@@ -2,6 +2,7 @@ import * as R from "ramda";
 import { createSelector } from "@reduxjs/toolkit";
 
 import { getPathAttributes } from "@applicaster/zapp-react-native-utils/navigationUtils";
+import { selectPluginConfigurations } from "@applicaster/zapp-react-native-redux";
 
 const riverSelector = R.prop("rivers");
 const pathnameSelector = R.prop("pathname");
@@ -56,11 +57,25 @@ export const previousStackEntriesSelector = createSelector(
   )
 );
 
-export const lastEntrySelector = createSelector<
-  unknown,
-  unknown,
-  NavigationScreenState
->(
+export const lastEntrySelector = createSelector(
   navigationStackSelector,
   R.compose(R.last, R.when(R.has("mainStack"), R.prop("mainStack")))
+) as (state: any) => any; // TODO: tighten type to NavigationScreenState
+
+// Selector extracting identifiers of plugins requiring startup execution
+export const startUpHookPluginIdentifiersSelector = createSelector(
+  selectPluginConfigurations,
+  (pluginConfigurations) => {
+    if (!pluginConfigurations) return [];
+
+    return Object.values(pluginConfigurations)
+      .filter(
+        (item) =>
+          "require_startup_execution" in item.plugin.api &&
+          item?.plugin?.api?.require_startup_execution === true &&
+          item?.plugin?.react_native === true &&
+          item?.plugin?.preload === true
+      )
+      .map((item: any) => item.plugin.identifier);
+  }
 );

package/App/NetworkStatusProvider/NetworkStatusProvider.tsx

@@ -3,7 +3,7 @@ import { Platform } from "react-native";
 import NetInfo, { NetInfoState } from "@react-native-community/netinfo";
 
 import { NetworkStatusContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NetworkStatusContext";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePlugins } from "@applicaster/zapp-react-native-redux";
 import {
   callAllWith,
   getNetworkHooks,
@@ -29,7 +29,7 @@ export const NetworkStatusProvider = ({
 }: {
   children: React.ReactNode;
 }) => {
-  const { plugins } = usePickFromState("plugins");
+  const plugins = usePlugins();
   const [deviceStatus, setDeviceStatus] = React.useState(null);
   const currentNetInfo = NetInfo.useNetInfo();