@applicaster/quick-brick-core 14.0.0-rc.9 → 15.0.0-rc.1

package/App/ActionSetters/index.ts

@@ -12,7 +12,6 @@ const debugActions = (actions) =>
     message: `useSubscribeToActionProviders - available actions count: ${
       Object.keys(actions).length
     }`,
-    data: { actions },
   });
 
 const warnUndefinedContext = (context) =>

package/App/ActionsProvider/__tests__/__snapshots__/ActionsProvider.test.js.snap

@@ -12,18 +12,18 @@ exports[`Actions Provider renders children 1`] = `
             "$$typeof": Symbol(react.context),
             "Consumer": {
               "$$typeof": Symbol(react.context),
-              "_calculateChangedBits": null,
               "_context": [Circular],
             },
             "Provider": {
               "$$typeof": Symbol(react.provider),
               "_context": [Circular],
             },
-            "_calculateChangedBits": null,
             "_currentRenderer": null,
             "_currentRenderer2": {},
             "_currentValue": null,
             "_currentValue2": null,
+            "_defaultValue": null,
+            "_globalName": null,
             "_threadCount": 0,
           },
           "contextProvider": [Function],

package/App/ActionsProvider/index.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as R from "ramda";
 
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 
 import { ActionsProvider as ActionsProviderComponent } from "./ActionsProvider";
 

package/App/AppStateDecorator/index.tsx

@@ -2,9 +2,9 @@ import * as React from "react";
 import { AppState, AppStateStatus } from "react-native";
 import * as R from "ramda";
 
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 import { setAppState } from "@applicaster/zapp-react-native-redux/appState";
-import { Dispatch } from "redux";
+import { Dispatch } from "@reduxjs/toolkit";
 
 type Props = {
   Component: () => React.ComponentType<any>;
@@ -19,6 +19,7 @@ function withAppManagerDecorator(
     currentState: AppStateStatus;
     isAvailable: boolean;
     plugins: QuickBrickPlugin[];
+    appStateListener: ReturnType<typeof AppState.addEventListener>;
 
     constructor(props: Props) {
       super(props);
@@ -30,11 +31,15 @@ function withAppManagerDecorator(
 
     componentDidMount() {
       this.plugins = this.getAppStatePlugins();
-      AppState.addEventListener("change", this.onChange);
+
+      this.appStateListener = AppState.addEventListener(
+        "change",
+        this.onChange
+      );
     }
 
     componentWillUnmount() {
-      AppState.removeEventListener("change", this.onChange);
+      this.appStateListener.remove();
     }
 
     dispatchAction(nextState: AppStateStatus, eventType) {

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

@@ -16,7 +16,7 @@ import {
 } from "../useOpenSchemeHandler/const";
 import { withInitialPlayerState } from "../useOpenSchemeHandler/utils";
 
-const { log_warning } = require("../../../logger");
+import { log_warning } from "../../../logger";
 
 const rivers: Record<string, Partial<ZappRiver>> = {
   A1234: {
@@ -53,13 +53,10 @@ const navigator = {
   replace: jest.fn(),
   push: jest.fn(),
   goHome: jest.fn(),
-};
+} as any;
 
 const mockStore = configureStore();
-
-jest
-  .spyOn(useNavigationHooks, "useNavigation")
-  .mockImplementation(() => navigator);
+jest.spyOn(useNavigationHooks, "useNavigation").mockReturnValue(navigator);
 
 const helperSpy = jest.spyOn(helpers, "handlePresentNavigation");
 const feedLoaderSpy = jest.spyOn(feedLoader, "useFeedLoader");
@@ -72,7 +69,7 @@ jest.doMock("@applicaster/zapp-react-native-ui-components/Contexts", () => ({
   },
 }));
 
-jest.doMock("../../../logger", () => ({
+jest.mock("../../../logger", () => ({
   log_info: jest.fn(),
   log_error: jest.fn(),
   log_warning: jest.fn(),
@@ -80,10 +77,6 @@ jest.doMock("../../../logger", () => ({
   log_debug: jest.fn(),
 }));
 
-jest.useFakeTimers({
-  legacyFakeTimers: true,
-});
-
 // to use import instead of require it's required to use jest.mock above
 const { useOpenSchemeHandler } = require("../useOpenSchemeHandler");
 
@@ -192,7 +185,6 @@ describe("useOpenSchemeHandler", () => {
     it("doesn't log a warning", async () => {
       const tests = () => {
         expect(log_warning).not.toHaveBeenCalled();
-        expect.assertions(1);
       };
 
       await testHook({ url, query, tests });

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

@@ -1,14 +1,12 @@
-import * as React from "react";
 import * as R from "ramda";
 import axios from "axios";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
-import * as zappRedux from "@applicaster/zapp-react-native-redux";
 import * as helpers from "../../../helpers";
 import * as feedLoader from "@applicaster/zapp-react-native-utils/reactHooks/feed/useFeedLoader";
-import * as useNavigationHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
+import { WrappedWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+import { usePresentSchemeHandler } from "../usePresentSchemeHandler";
 
-import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
 
 const rivers = {
@@ -17,26 +15,31 @@ const rivers = {
   },
 };
 
-const navigator = {
+const mock_navigator = {
   currentRoute: "/river/A1234",
   replace: jest.fn(),
-};
+  goHome: jest.fn(),
+} as any;
 
-const mockStore = configureStore();
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation",
+  () => ({
+    useNavigation: jest.fn(() => mock_navigator),
+  })
+);
 
-jest
-  .spyOn(useNavigationHooks, "useNavigation")
-  .mockImplementation(() => navigator);
+const mockStore = configureStore();
 
 const helperSpy = jest.spyOn(helpers, "handlePresentNavigation");
 const feedLoaderSpy = jest.spyOn(feedLoader, "useFeedLoader");
 
-const { usePresentSchemeHandler } = require("../usePresentSchemeHandler");
-
 const onFinish = jest.fn((cb) => {
   cb();
 });
 
+const navigator = mock_navigator;
+jest.useFakeTimers();
+
 describe("usePresentSchemeHandler", () => {
   beforeEach(() => {
     onFinish.mockClear();
@@ -44,11 +47,7 @@ describe("usePresentSchemeHandler", () => {
     navigator.replace.mockClear();
   });
 
-  const store = mockStore({ test: "test", rivers });
-
-  const wrapper: React.FC<any> = ({ children }) => (
-    <Provider store={store}>{children}</Provider>
-  );
+  const store = { test: "test", rivers };
 
   describe("loading link url", () => {
     const query = { link_url: "http://applicaster.com" };
@@ -59,10 +58,11 @@ describe("usePresentSchemeHandler", () => {
 
     it("opens the link entry", () => {
       renderHook(() => usePresentSchemeHandler({ query, url, onFinish }), {
-        wrapper,
+        wrapper: WrappedWithProviders,
+        initialProps: { store },
       });
 
-      expect(onFinish).toBeCalled();
+      expect(onFinish).toHaveBeenCalled();
 
       expect(helperSpy).toBeCalledWith(
         expect.objectContaining({
@@ -96,7 +96,8 @@ describe("usePresentSchemeHandler", () => {
             onFinish,
           }),
         {
-          wrapper,
+          wrapper: WrappedWithProviders,
+          initialProps: { store },
         }
       );
 
@@ -123,7 +124,8 @@ describe("usePresentSchemeHandler", () => {
       )}&show_nav_bar=true`;
 
       renderHook(() => usePresentSchemeHandler({ query, url, onFinish }), {
-        wrapper,
+        wrapper: WrappedWithProviders,
+        initialProps: { store },
       });
 
       expect(onFinish).toBeCalled();
@@ -155,22 +157,22 @@ describe("usePresentSchemeHandler", () => {
       )}&screen_id=${screen_id}`;
 
       renderHook(() => usePresentSchemeHandler({ query, url, onFinish }), {
-        wrapper,
+        wrapper: WrappedWithProviders,
+        initialProps: { store },
       });
 
       expect(onFinish).toBeCalled();
 
-      expect(helperSpy).toBeCalledWith(
+      expect(helperSpy).toHaveBeenCalledWith(
         expect.objectContaining({
           data: {
             id: "url_scheme_entry",
             type: { value: "link" },
-            screen_type: screen_id,
             link: { href: query.link_url, type: "text/html" },
             extensions: { showNavBar: false },
           },
-          navigator,
-          pushScreen: expect.anything(),
+          navigator: expect.anything(),
+          pushScreen: "http://applicaster.com",
         })
       );
     });
@@ -180,9 +182,7 @@ describe("usePresentSchemeHandler", () => {
     it("Re-sets app ready state and calls loadAppContextData with new river and cellStyles data", async () => {
       const store = mockStore({ test: "test" });
 
-      const wrapper: React.FC<any> = ({ children }) => (
-        <Provider store={store}>{children}</Provider>
-      );
+      const wrapper = WrappedWithProviders;
 
       const query = {
         rivers_configuration_id: "test",
@@ -190,7 +190,6 @@ describe("usePresentSchemeHandler", () => {
 
       const storageSpy = jest.spyOn(sessionStorage, "getAllItems");
       const axiosGetSpy = jest.spyOn(axios, "get");
-      const zappReduxSpy = jest.spyOn(zappRedux, "loadAppContextData");
 
       const getAllItems = jest.fn().mockResolvedValue({
         accountsAccountId: "accountsAccountId",
@@ -204,7 +203,6 @@ describe("usePresentSchemeHandler", () => {
 
       storageSpy.mockImplementation(getAllItems);
       axiosGetSpy.mockImplementation(get);
-      zappReduxSpy.mockReturnValue(null);
 
       renderHook(() => usePresentSchemeHandler({ query, url: "", onFinish }), {
         wrapper,
@@ -219,11 +217,6 @@ describe("usePresentSchemeHandler", () => {
 
         expect(actions?.find(R.propEq("type", "SET_APP_READY"))).toBeDefined();
 
-        expect(zappReduxSpy).toBeCalledWith(expect.any(Function), {
-          cellStyles: "url",
-          rivers: "url",
-        });
-
         expect(navigator.replace).toBeCalledWith({});
       };
     });
@@ -261,7 +254,7 @@ describe("usePresentSchemeHandler", () => {
             },
           }),
         {
-          wrapper,
+          wrapper: WrappedWithProviders,
         }
       );
 
@@ -293,7 +286,7 @@ describe("usePresentSchemeHandler", () => {
             },
           }),
         {
-          wrapper,
+          wrapper: WrappedWithProviders,
         }
       );
 
@@ -325,7 +318,7 @@ describe("usePresentSchemeHandler", () => {
             },
           }),
         {
-          wrapper,
+          wrapper: WrappedWithProviders,
         }
       );
 
@@ -357,7 +350,7 @@ describe("usePresentSchemeHandler", () => {
             },
           }),
         {
-          wrapper,
+          wrapper: WrappedWithProviders,
         }
       );
 

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

@@ -5,7 +5,7 @@ import * as URLHandlersMap from "..";
 import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
 
-const { log_warning } = require("../../../logger");
+import { log_warning } from "../../../logger";
 
 const mockStore = configureStore();
 

package/App/DeepLinking/URLSchemeHandler/SchemeHandlerHooks/useOpenSchemeHandler/index.ts

@@ -1,4 +1,8 @@
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import {
+  useAppSelector,
+  selectContentTypes,
+  selectRivers,
+} from "@applicaster/zapp-react-native-redux";
 import { ZappPipesEntryContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { useEffect } from "react";
@@ -97,7 +101,8 @@ async function handleQuery({
 }
 
 export function useOpenSchemeHandler({ query, url, onFinish }) {
-  const { rivers, contentTypes } = usePickFromState(["rivers", "contentTypes"]);
+  const rivers = useAppSelector(selectRivers);
+  const contentTypes = useAppSelector(selectContentTypes);
   const navigator = useNavigation();
   const homeId = getHomeScreenId(rivers);
   const homeRoute = `/river/${homeId}`;

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

@@ -1,15 +1,17 @@
-import { useActions } from "@applicaster/zapp-react-native-redux/hooks";
+import {
+  loadAppContextData,
+  useAppDispatch,
+  useActions,
+} from "@applicaster/zapp-react-native-redux";
 import * as R from "ramda";
 import * as React from "react";
 import axios from "axios";
-import { useDispatch } from "react-redux";
 
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 import { useFeedLoader } from "@applicaster/zapp-react-native-utils/reactHooks/feed/useFeedLoader";
 
 import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
-import { loadAppContextData } from "@applicaster/zapp-react-native-redux";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
 import {
@@ -60,7 +62,7 @@ export function usePresentSchemeHandler({
 
   const rivers = useRivers();
   const screenRiver = findRiver({ screen_id, rivers });
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const actions = useActions({
     setAppReady,

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

@@ -6,16 +6,16 @@ const theme = {
   app_background_color: "white",
 };
 
-const plugins = [];
-
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
+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(() => plugins),
+  usePickFromState: jest.fn(() => ({})),
 }));
 
 const { URLSchemeHandler } = require("../URLSchemeHandler");

package/App/ErrorBoundary/index.tsx

@@ -60,6 +60,10 @@ export class ErrorBoundary extends React.Component<Props> {
     useErrorStore.getState().setError(error, info, recoverable);
   }
 
+  static getDerivedStateFromError(_error) {
+    return { hasError: true };
+  }
+
   render() {
     return <ErrorBoundaryContent>{this.props.children}</ErrorBoundaryContent>;
   }

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

@@ -52,9 +52,9 @@ export class DraggableBottomSheet extends Component<Props, ComponentState> {
   _lastScrollYValue: number;
   _lastScrollY: Animated.Value;
   _dragY: Animated.Value;
-  _reverseLastScrollY: Animated.AnimatedMultiplication;
+  _reverseLastScrollY: Animated.AnimatedInterpolation<number>;
   _translateYOffset: Animated.Value;
-  _translateY: Animated.AnimatedAddition;
+  _translateY: Animated.AnimatedInterpolation<number>;
   _snapPoints: SnapPoints;
   _prevContentHeight = 0;
 

package/App/ModalProvider/ModalBottomSheet/ModalBottomSheetFrame.tsx

@@ -47,7 +47,7 @@ const getSheetHeight = ({ height, bottomOffset, maxHeight }) => {
     ios: height - bottomOffset,
     default:
       (height || maxHeight) -
-      (!isAndroidVersionAtLeast(35) && isAndroidPlatform() ? bottomOffset : 0),
+      (isAndroidPlatform() && !isAndroidVersionAtLeast(35) ? bottomOffset : 0),
   });
 };
 

package/App/ModalProvider/ModalChildrenWrapper/index.tsx

@@ -1,13 +1,8 @@
 import React, { ReactChild } from "react";
-import { StyleSheet, ViewProps } from "react-native";
-import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { View, StyleSheet, ViewProps } from "react-native";
 
 type Props = ViewProps & { children: ReactChild };
 
 export function ModalChildrenWrapper({ children }: Props) {
-  return (
-    <GestureHandlerRootView style={StyleSheet.absoluteFill}>
-      {children}
-    </GestureHandlerRootView>
-  );
+  return <View style={StyleSheet.absoluteFill}>{children}</View>;
 }

package/App/ModalProvider/ModalPresenter.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { Modal, ModalProps } from "react-native";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
 
 type Props = ModalProps & {
   children: React.ReactChild;
@@ -13,7 +14,7 @@ export function ModalPresenter(props: Props) {
 
   return (
     <Presenter visible={visible} {...presenterOptions}>
-      {children}
+      <GestureHandlerRootView>{children}</GestureHandlerRootView>
     </Presenter>
   );
 }

package/App/NavigationProvider/NavigationProvider.tsx

@@ -7,6 +7,7 @@ import {
   getTargetRoute,
   usesVideoModal,
 } from "@applicaster/zapp-react-native-utils/navigationUtils";
+import { last } from "@applicaster/zapp-react-native-utils/utils";
 import {
   allowedOrientationsForScreen,
   useGetScreenOrientation,
@@ -121,8 +122,20 @@ export function NavigationProvider({ children }: Props) {
     NavigationReducerState
   >(reducer, initialState, (x) => x);
 
+  const topStackRoute = last(state?.stack?.mainStack);
+
+  /** TODO: temporary variable, before we remove need for a "current".
+   There is no current as we are using stack navigator. Route data should be contextualised per screen
+   There are some cases to use a route data from top of the stack but it should be separate method.
+   */
+
+  const currentLocation = {
+    ...topStackRoute,
+    route: topStackRoute?.route || "/", // Fallback for initial state.
+  };
+
   const stateRef = React.useRef<NavigationReducerState>(state);
-  const pathname = state?.location?.pathname;
+  const pathname = currentLocation?.route; // TODO: remove. Pathname is part of the route, not a global.
   const pathnameRef = React.useRef(pathname);
 
   const { context } = React.useContext(ZappPipesEntryContext.Context);
@@ -146,6 +159,8 @@ export function NavigationProvider({ children }: Props) {
     }
   }, [pathname]);
 
+  // TODO remove.
+  // There is no concept of active river. Multiple rivers can be rendered at the same time.
   const activeRiver = React.useMemo(
     () => activeRiverSelector({ pathname, rivers }),
     [pathname, rivers]
@@ -186,6 +201,7 @@ export function NavigationProvider({ children }: Props) {
   // TODO: Move in proper place
   const modalPresenterScreenOrientation = useGetScreenOrientation(activeRiver);
 
+  // TODO: Move modal state to separate store
   const closeVideoModal = () => {
     if (navigator.modalData) {
       allowedOrientationsForScreen(modalPresenterScreenOrientation);
@@ -213,13 +229,15 @@ export function NavigationProvider({ children }: Props) {
   const isVideoModalDocked = () =>
     state?.options.videoModal.mode === "MINIMIZED";
 
+  // TODO: Remove as it's using a concept of "current" route.
+  // Route is contextualised and shouldn't be used this way.
   const routeData = () => {
     // eslint-disable-next-line no-console
     console.warn(`you are retrieving screen data from navigator.routeData()
     This function will be removed in a later version of quick brick.
     You can retrieve this data from navigator.screenData`);
 
-    return legacyScreenData(state?.location?.state as NavigationScreenData);
+    return legacyScreenData(currentLocation?.state as NavigationScreenData);
   };
 
   // TODO: remove it by refactoring back buttons handlers
@@ -262,7 +280,7 @@ export function NavigationProvider({ children }: Props) {
     if (
       targetRoute !== pathnameRef.current ||
       item?.id !==
-        legacyScreenData(state?.location?.state as NavigationScreenData)?.id
+        legacyScreenData(currentLocation?.state as NavigationScreenData)?.id
     ) {
       replaceEvent();
       navigateTo(item, ACTIONS.REPLACE, options);
@@ -688,7 +706,8 @@ export function NavigationProvider({ children }: Props) {
     }
   }, [state?.options?.videoModal?.previousMode]);
 
-  const getNestedEntry = () => state?.location?.state?.nested?.entry ?? null;
+  // TODO: remove. This shouldn't be part of navigator
+  const getNestedEntry = () => currentLocation?.state?.nested?.entry ?? null;
 
   // It will only work for the regular stack and pathname, It won't work for modals
   // TODO: integrate video/hook and regular modal into stack.
@@ -706,7 +725,7 @@ export function NavigationProvider({ children }: Props) {
     () => ({
       activeRiver,
       getPathname: () => pathnameRef.current, // hack use to fix issue causing broken navigation as currentRoute is unreliable
-      currentRoute: pathname,
+      currentRoute: pathname, // TODO: remove. Current route shouldn't be needed
       previousAction: lastEntrySelector(state)
         ?.action as QuickBrickNavigationActionType,
       push: pushItem,
@@ -716,14 +735,15 @@ export function NavigationProvider({ children }: Props) {
       goHome,
       canGoBack,
       goBack,
-      routeData,
+      routeData, // TODO: remove
       screenData: legacyScreenData(
-        state?.location?.state as NavigationScreenData,
+        // TODO: remove
+        currentLocation?.state as NavigationScreenData,
         plugins
       ),
-      data: state?.location?.state as NavigationScreenData,
+      data: currentLocation?.state as NavigationScreenData,
       getNestedEntry,
-      key: state?.location?.key,
+      key: currentLocation?.key, // TODO: remove
       modalData: state.stack.modal?.state ?? null,
       openModal,
       dismissModal,