@applicaster/quick-brick-core 14.0.0-alpha.4104749434 → 14.0.0-alpha.4138342511

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>;

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

@@ -4,7 +4,6 @@ import { renderHook } from "@testing-library/react-native";
 import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
 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";
 
@@ -16,15 +15,20 @@ 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").mockReturnValue(navigator);
+const mockStore = configureStore();
 
 const helperSpy = jest.spyOn(helpers, "handlePresentNavigation");
 const feedLoaderSpy = jest.spyOn(feedLoader, "useFeedLoader");
@@ -33,6 +37,7 @@ const onFinish = jest.fn((cb) => {
   cb();
 });
 
+const navigator = mock_navigator;
 jest.useFakeTimers();
 
 describe("usePresentSchemeHandler", () => {
@@ -210,6 +215,8 @@ describe("usePresentSchemeHandler", () => {
           actions?.find(R.propEq("type", "SET_APP_NOT_READY"))
         ).toBeDefined();
 
+        expect(actions?.find(R.propEq("type", "SET_APP_READY"))).toBeDefined();
+
         expect(navigator.replace).toBeCalledWith({});
       };
     });

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/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,

package/App/NavigationProvider/navigator/__tests__/__snapshots__/reducer.test.ts.snap

@@ -13,7 +13,6 @@ exports[`ACTIONS matches snapshot 1`] = `
   "PUSH": "PUSH",
   "REPLACE": "REPLACE",
   "REPLACE_TOP": "REPLACE_TOP",
-  "SET_LOCATION": "SET_LOCATION",
   "SET_NESTED_CONTENT": "SET_NESTED_CONTENT",
   "SET_VIDEO_MODAL_ITEM": "SET_VIDEO_MODAL_ITEM",
 }
@@ -22,30 +21,6 @@ exports[`ACTIONS matches snapshot 1`] = `
 exports[`reducer when a back action is dispatched push, back, push, back does what it's supposed to do 1`] = `
 {
   "state1": {
-    "location": {
-      "key": "mocked-uuid",
-      "pathname": "/river/A1234",
-      "state": {
-        "entry": undefined,
-        "options": undefined,
-        "screen": {
-          "home": true,
-          "home_offline": true,
-          "hooks": {
-            "preload_plugins": [],
-          },
-          "id": "A1234",
-          "name": "Home",
-          "navigations": [
-            {
-              "id": "nav_id",
-            },
-          ],
-          "supports_offline": false,
-          "type": "general_content",
-        },
-      },
-    },
     "options": {
       "videoModal": {
         "item": null,
@@ -86,36 +61,6 @@ exports[`reducer when a back action is dispatched push, back, push, back does wh
     },
   },
   "state2": {
-    "location": {
-      "key": "mocked-uuid",
-      "pathname": "/river/A1234/river/B7890",
-      "state": {
-        "entry": {
-          "id": "C0987",
-          "title": "Entry",
-          "type": {
-            "value": "feed",
-          },
-        },
-        "options": undefined,
-        "screen": {
-          "home": false,
-          "home_offline": false,
-          "hooks": {
-            "preload_plugins": [],
-          },
-          "id": "B5678",
-          "name": "Screen name",
-          "navigations": [
-            {
-              "id": "nav_id",
-            },
-          ],
-          "supports_offline": false,
-          "type": "general_content",
-        },
-      },
-    },
     "options": {
       "videoModal": {
         "item": null,
@@ -187,36 +132,6 @@ exports[`reducer when a back action is dispatched push, back, push, back does wh
     },
   },
   "state3": {
-    "location": {
-      "key": "mocked-uuid",
-      "pathname": "/river/A1234/river/B7890/river/C0987",
-      "state": {
-        "entry": {
-          "id": "D1234",
-          "title": "Entry 2",
-          "type": {
-            "value": "video",
-          },
-        },
-        "options": undefined,
-        "screen": {
-          "home": false,
-          "home_offline": false,
-          "hooks": {
-            "preload_plugins": [],
-          },
-          "id": "C9090",
-          "name": "Screen 2 name",
-          "navigations": [
-            {
-              "id": "nav_id",
-            },
-          ],
-          "supports_offline": false,
-          "type": "general_content",
-        },
-      },
-    },
     "options": {
       "videoModal": {
         "item": null,
@@ -319,37 +234,6 @@ exports[`reducer when a back action is dispatched push, back, push, back does wh
     },
   },
   "state4": {
-    "location": {
-      "action": "PUSH",
-      "key": "mocked-uuid",
-      "pathname": "/river/A1234/river/B7890",
-      "state": {
-        "entry": {
-          "id": "C0987",
-          "title": "Entry",
-          "type": {
-            "value": "feed",
-          },
-        },
-        "options": undefined,
-        "screen": {
-          "home": false,
-          "home_offline": false,
-          "hooks": {
-            "preload_plugins": [],
-          },
-          "id": "B5678",
-          "name": "Screen name",
-          "navigations": [
-            {
-              "id": "nav_id",
-            },
-          ],
-          "supports_offline": false,
-          "type": "general_content",
-        },
-      },
-    },
     "options": {
       "videoModal": {
         "item": null,
@@ -421,36 +305,6 @@ exports[`reducer when a back action is dispatched push, back, push, back does wh
     },
   },
   "state5": {
-    "location": {
-      "key": "mocked-uuid",
-      "pathname": "/river/A1234/river/B7890/river/D5678",
-      "state": {
-        "entry": {
-          "id": "C0987",
-          "title": "Entry",
-          "type": {
-            "value": "feed",
-          },
-        },
-        "options": undefined,
-        "screen": {
-          "home": false,
-          "home_offline": false,
-          "hooks": {
-            "preload_plugins": [],
-          },
-          "id": "B5678",
-          "name": "Screen name",
-          "navigations": [
-            {
-              "id": "nav_id",
-            },
-          ],
-          "supports_offline": false,
-          "type": "general_content",
-        },
-      },
-    },
     "options": {
       "videoModal": {
         "item": null,
@@ -553,37 +407,6 @@ exports[`reducer when a back action is dispatched push, back, push, back does wh
     },
   },
   "state6": {
-    "location": {
-      "action": "PUSH",
-      "key": "mocked-uuid",
-      "pathname": "/river/A1234/river/B7890",
-      "state": {
-        "entry": {
-          "id": "C0987",
-          "title": "Entry",
-          "type": {
-            "value": "feed",
-          },
-        },
-        "options": undefined,
-        "screen": {
-          "home": false,
-          "home_offline": false,
-          "hooks": {
-            "preload_plugins": [],
-          },
-          "id": "B5678",
-          "name": "Screen name",
-          "navigations": [
-            {
-              "id": "nav_id",
-            },
-          ],
-          "supports_offline": false,
-          "type": "general_content",
-        },
-      },
-    },
     "options": {
       "videoModal": {
         "item": null,

package/App/NavigationProvider/navigator/__tests__/reducer.test.ts

@@ -1,9 +1,9 @@
 import reducer, {
   ACTIONS,
-  push,
-  replace,
   back,
   initialState,
+  push,
+  replace,
 } from "../reducer";
 
 jest.mock("uuid");
@@ -181,24 +181,6 @@ describe("reducer", () => {
       expect(newState.options.navBar).toEqual(initialState.options.navBar);
       expect(newState2.options.navBar).toEqual(initialState.options.navBar);
     });
-
-    it("updates the location properties of the state", () => {
-      expect(newState).toHaveProperty("location");
-      expect(newState.location).toHaveProperty("pathname", route);
-
-      expect(newState.location).toHaveProperty("state", { screen: homeScreen });
-
-      expect(newState2).toHaveProperty("location");
-      expect(newState2.location).toHaveProperty("pathname", route2);
-
-      expect(newState2.location).toHaveProperty(
-        "state",
-        expect.objectContaining({
-          screen,
-          entry,
-        })
-      );
-    });
   });
 
   describe("when a replace action is dispatched", () => {
@@ -245,24 +227,6 @@ describe("reducer", () => {
       expect(newState.options.navBar).toEqual(initialState.options.navBar);
       expect(newState2.options.navBar).toEqual(initialState.options.navBar);
     });
-
-    it("updates the location properties of the state", () => {
-      expect(newState).toHaveProperty("location");
-      expect(newState.location).toHaveProperty("pathname", route);
-
-      expect(newState.location).toHaveProperty("state", {
-        screen: homeScreen,
-        entry: undefined,
-      });
-
-      expect(newState2).toHaveProperty("location");
-      expect(newState2.location).toHaveProperty("pathname", route2);
-
-      expect(newState2.location).toHaveProperty("state", {
-        screen,
-        entry,
-      });
-    });
   });
 
   describe("when a back action is dispatched", () => {
@@ -300,30 +264,6 @@ describe("reducer", () => {
         expect(newState2.options.navBar).toEqual(initialState.options.navBar);
         expect(finalState.options.navBar).toEqual(initialState.options.navBar);
       });
-
-      it("updates the location properties of the state", () => {
-        expect(newState).toHaveProperty("location");
-        expect(newState.location).toHaveProperty("pathname", route);
-
-        expect(newState.location).toHaveProperty("state", {
-          screen: homeScreen,
-        });
-
-        expect(newState2).toHaveProperty("location");
-        expect(newState2.location).toHaveProperty("pathname", route2);
-
-        expect(newState2.location).toHaveProperty("state", {
-          screen,
-          entry,
-        });
-
-        expect(finalState).toHaveProperty("location");
-        expect(finalState.location).toHaveProperty("pathname", route);
-
-        expect(finalState.location).toHaveProperty("state", {
-          screen: homeScreen,
-        });
-      });
     });
 
     describe("push, back, push, back", () => {
@@ -382,14 +322,6 @@ describe("reducer", () => {
           entry: undefined,
         });
 
-        expect(finalState).toHaveProperty("location");
-        expect(finalState.location).toHaveProperty("pathname", route);
-
-        expect(finalState.location).toHaveProperty("state", {
-          screen: homeScreen,
-          entry: undefined,
-        });
-
         expect(finalState).toEqual(newState);
       });
     });

package/App/NavigationProvider/navigator/reducer.ts

@@ -1,6 +1,8 @@
 import * as R from "ramda";
 import { v4 } from "uuid";
 
+import { last } from "@applicaster/zapp-react-native-utils/utils";
+
 import {
   firstStackEntriesSelector,
   previousStackEntriesSelector,
@@ -18,7 +20,6 @@ export const initialState: NavigationReducerState = {
     mainStack: [],
     modal: null,
   },
-  location: { key: "", pathname: "/", state: null },
   options: {
     videoModal: {
       visible: false,
@@ -38,7 +39,6 @@ export enum ACTIONS {
   BACK_PLAYER_NESTED_CONTENT = "BACK_PLAYER_NESTED_CONTENT",
   REPLACE_TOP = "REPLACE_TOP",
   SET_NESTED_CONTENT = "SET_NESTED_CONTENT",
-  SET_LOCATION = "SET_LOCATION",
   OPEN_VIDEO_MODAL = "OPEN_VIDEO_MODAL",
   CLOSE_VIDEO_MODAL = "CLOSE_VIDEO_MODAL",
   MINIMISE_VIDEO_MODAL = "MINIMISE_VIDEO_MODAL",
@@ -174,9 +174,9 @@ function backPlayerNestedContent(state) {
   return findPlayableAndTruncate(currentState);
 }
 
-function addNestedContent(stack, payload, locationState: LocationReducerState) {
-  const locationKey = locationState.key;
-  const stackIndex = R.findIndex(R.propEq("key", locationKey))(stack);
+function addNestedContent(stack, payload, targetStackEntry) {
+  const targetStackKey = targetStackEntry.key;
+  const stackIndex = R.findIndex(R.propEq("key", targetStackKey))(stack);
 
   return R.adjust(
     stackIndex,
@@ -190,7 +190,7 @@ function addNestedContent(stack, payload, locationState: LocationReducerState) {
 
 function navigationStackReducer(
   state: NavigationStackReducerState = initialState.stack,
-  { type = "", payload, meta }: ReducerAction = { type: "" }
+  { type = "", payload }: ReducerAction = { type: "" }
 ) {
   switch (type) {
     case ACTIONS.SET_NESTED_CONTENT:
@@ -199,7 +199,7 @@ function navigationStackReducer(
         mainStack: addNestedContent(
           state.mainStack,
           navigationEntry(ACTIONS.REPLACE, payload as AnyRecord),
-          meta as LocationReducerState
+          last(state.mainStack)
         ),
       };
     case ACTIONS.PUSH:
@@ -268,47 +268,6 @@ function navigationStackReducer(
   }
 }
 
-function locationReducer(
-  state = initialState.location,
-  { type, payload, meta = {} }
-) {
-  const { route, key, screen, entry, options } = payload;
-
-  switch (type) {
-    case ACTIONS.BACK:
-      // eslint-disable-next-line no-case-declarations
-      const previousEntry = R.compose(
-        R.last,
-        payload.route ? firstStackEntriesSelector : previousStackEntriesSelector
-      )(meta);
-
-      if (previousEntry) {
-        const { state, key, action } = previousEntry;
-
-        return { pathname: previousEntry.route, state, key, action };
-      }
-
-      return state;
-
-    case ACTIONS.PUSH:
-    case ACTIONS.REPLACE:
-    case ACTIONS.REPLACE_TOP:
-    case ACTIONS.BACK_PLAYER_NESTED_CONTENT:
-      return { pathname: route, state: { screen, entry, options }, key };
-
-    case ACTIONS.SET_NESTED_CONTENT:
-      // eslint-disable-next-line no-case-declarations
-      const nestedEntry = navigationEntry(
-        ACTIONS.REPLACE,
-        payload as AnyRecord
-      );
-
-      return R.assocPath(["state", "nested"], nestedEntry.state, state);
-    default:
-      return state;
-  }
-}
-
 /* Video Modal reducer */
 export const setVideoModalOpen = (item, options, screen) => ({
   type: ACTIONS.OPEN_VIDEO_MODAL,
@@ -354,43 +313,28 @@ export const videoModalReducer = (
   switch (type) {
     case ACTIONS.OPEN_VIDEO_MODAL: {
       const { item, options } = payload;
+      const mode = options?.mode || MAXIMIZED;
 
-      const mode = R.pathOr(MAXIMIZED, ["mode"], options);
-
-      return R.compose(
-        R.set(R.lensProp("mode"), mode),
-        R.set(R.lensProp("visible"), true),
-        R.over(
-          R.lensProp("item"),
-          R.unless(R.tryCatch(R.propEq("id", item?.id), R.F), () => item)
-        )
-      )(state);
+      return {
+        ...state,
+        visible: true,
+        mode,
+        item: state.item?.id !== item?.id ? item : state.item,
+      };
     }
 
     case ACTIONS.SET_VIDEO_MODAL_ITEM:
-      return R.set(R.lensProp("item"), payload)(state);
+      return { ...state, item: payload };
     case ACTIONS.CLOSE_VIDEO_MODAL:
       return initialState.options.videoModal;
     case ACTIONS.FULLSCREEN_VIDEO_MODAL:
-      return R.compose(
-        R.set(R.lensProp("mode"), FULLSCREEN),
-        R.set(R.lensProp("previousMode"), state.mode)
-      )(state);
+      return { ...state, mode: FULLSCREEN, previousMode: state.mode };
     case ACTIONS.MINIMISE_VIDEO_MODAL:
-      return R.compose(
-        R.set(R.lensProp("mode"), MINIMIZED),
-        R.set(R.lensProp("previousMode"), state.mode)
-      )(state);
+      return { ...state, mode: MINIMIZED, previousMode: state.mode };
     case ACTIONS.MAXIMISE_VIDEO_MODAL:
-      return R.compose(
-        R.set(R.lensProp("mode"), MAXIMIZED),
-        R.set(R.lensProp("previousMode"), state.mode)
-      )(state);
+      return { ...state, mode: MAXIMIZED, previousMode: state.mode };
     case ACTIONS.PIP:
-      return R.compose(
-        R.set(R.lensProp("mode"), PIP),
-        R.set(R.lensProp("previousMode"), state.mode)
-      )(state);
+      return { ...state, mode: PIP, previousMode: state.mode };
   }
 };
 
@@ -406,34 +350,19 @@ export default function navigationReducer(
     case ACTIONS.REPLACE_TOP:
     case ACTIONS.BACK:
     case ACTIONS.BACK_PLAYER_NESTED_CONTENT:
-      return R.evolve(
-        {
-          stack: applyReducer(navigationStackReducer, { type, payload }),
-          location: applyReducer(locationReducer, {
-            type,
-            payload,
-            meta: state,
-          }),
-        },
-        state
-      );
+      return {
+        ...state,
+        stack: navigationStackReducer(state.stack, { type, payload }),
+      };
 
     case ACTIONS.SET_NESTED_CONTENT:
-      return R.evolve(
-        {
-          stack: applyReducer(navigationStackReducer, {
-            type,
-            payload,
-            meta: state.location,
-          }),
-          location: applyReducer(locationReducer, {
-            type,
-            payload,
-            meta: state.stack,
-          }),
-        },
-        state
-      );
+      return {
+        ...state,
+        stack: navigationStackReducer(state.stack, {
+          type,
+          payload,
+        }),
+      };
 
     case ACTIONS.OPEN_VIDEO_MODAL:
     case ACTIONS.CLOSE_VIDEO_MODAL:

package/App/NavigationProvider/navigator/selectors.ts

@@ -1,5 +1,5 @@
 import * as R from "ramda";
-import { createSelector } from "reselect";
+import { createSelector } from "@reduxjs/toolkit";
 
 import { getPathAttributes } from "@applicaster/zapp-react-native-utils/navigationUtils";
 
@@ -7,6 +7,7 @@ const riverSelector = R.prop("rivers");
 const pathnameSelector = R.prop("pathname");
 const navigationStackSelector = R.prop("stack");
 
+// @TODO extract to zapp-react-native-redux/selectors, remove ramda
 export const homeRiverSelector = createSelector(
   riverSelector,
   R.compose(R.find(R.propEq("home", true)), R.values)

package/App/RouterDecorator/__tests__/routerDecorator.test.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import ReactTestRenderer from "react-test-renderer";
+import { render } from "@testing-library/react-native";
 
 import { createRouterDecorator } from "../index";
 
@@ -26,7 +26,7 @@ describe("routerDecorator", () => {
     const decorator = createRouterDecorator(Router);
     const DecoratedComp = decorator(SomeComp);
 
-    const wrapper = ReactTestRenderer.create(<DecoratedComp foo="bar" />);
-    expect(wrapper.toJSON()).toMatchSnapshot();
+    const { toJSON } = render(<DecoratedComp foo="bar" />);
+    expect(toJSON()).toMatchSnapshot();
   });
 });

package/App/StoreConnector/index.ts

@@ -1,5 +1,5 @@
 import * as R from "ramda";
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 
 const REDUX_STORE_PROPS = [
   "components",

package/App/__tests__/createQuickBrickApp.test.js

@@ -1,6 +1,6 @@
 /* eslint-disable indent */
 import * as React from "react";
-import ReactTestRenderer from "react-test-renderer";
+import { render } from "@testing-library/react-native";
 import { Provider } from "react-redux";
 import thunk from "redux-thunk";
 import configureStore from "redux-mock-store";
@@ -175,13 +175,13 @@ describe("createQuickBrickApp", () => {
   it("returns a react component and it renders correctly", () => {
     const QuickBrickApp = createQuickBrickApp(options);
 
-    const wrapper = ReactTestRenderer.create(
+    const { toJSON } = render(
       <Provider store={store}>
         <QuickBrickApp store={store} />
       </Provider>
     );
 
-    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 
   describe("with no InteractionManager", () => {
@@ -190,13 +190,13 @@ describe("createQuickBrickApp", () => {
       const { InteractionManager, ...otherOptions } = options;
       const QuickBrickApp = createQuickBrickApp(otherOptions);
 
-      const wrapper = ReactTestRenderer.create(
+      const { toJSON } = render(
         <Provider store={store}>
           <QuickBrickApp store={store} />
         </Provider>
       );
 
-      expect(wrapper.toJSON()).toMatchSnapshot();
+      expect(toJSON()).toMatchSnapshot();
     });
   });
 
@@ -206,13 +206,13 @@ describe("createQuickBrickApp", () => {
       const { ContextProviders, ...otherOptions } = options;
       const QuickBrickApp = createQuickBrickApp(otherOptions);
 
-      const wrapper = ReactTestRenderer.create(
+      const { toJSON } = render(
         <Provider store={store}>
           <QuickBrickApp store={store} />
         </Provider>
       );
 
-      expect(wrapper.toJSON()).toMatchSnapshot();
+      expect(toJSON()).toMatchSnapshot();
     });
   });
 });

package/App/appLifeCycleManager/__tests__/appLifeCycleManager.test.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { View, Text } from "react-native";
-import { render, waitFor } from "@testing-library/react-native";
-import thunk from "redux-thunk";
-import configureStore from "redux-mock-store";
+import { waitFor } from "@testing-library/react-native";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 
 let mocked_items: Record<string, any> = {};
 
@@ -10,6 +10,13 @@ import { appLifeCycleManager } from "../";
 
 const mock_actions = {};
 
+jest.mock("@applicaster/zapp-react-native-redux", () => ({
+  ...jest.requireActual("@applicaster/zapp-react-native-redux"),
+  AppData: {
+    loadAppData: jest.fn(() => () => Promise.resolve()),
+  },
+}));
+
 jest.mock(
   "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage",
   () => ({
@@ -19,10 +26,6 @@ jest.mock(
   })
 );
 
-jest.mock("@applicaster/zapp-react-native-redux/AppData", () => ({
-  loadAppData: jest.fn(() => () => Promise.resolve()),
-}));
-
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/actions", () => ({
   useActions: jest.fn(() => ({ actions: mock_actions })),
 }));
@@ -31,6 +34,9 @@ jest.mock(
   "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage",
   () => ({
     localStorage: {
+      ...jest.requireActual(
+        "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage"
+      ).localStorage,
       getAllItems: jest.fn(() => Promise.resolve(mocked_items)),
       setItem: jest.fn((key, value) => {
         mocked_items[key] = JSON.stringify(value);
@@ -73,12 +79,8 @@ const appLoader = jest.fn((_dispatch, _getState) => {
   return Promise.resolve();
 });
 
-const store = configureStore([thunk])({});
-const dispatch = store.dispatch;
-
 const state = {
-  rivers: {},
-  plugins: {},
+  plugins: {} as QuickBrickPlugin[],
   appSettings: { runtimeConfigurationUrls: { rivers: "http://rivers.url" } },
 };
 
@@ -100,19 +102,16 @@ describe("appLifeCycleManager", () => {
   it("runs the loaders, then sends quickBrickReady event", async () => {
     const testCallback = jest.fn(() => {});
 
-    render(
-      <DecoratedComponent
-        dispatch={dispatch}
-        {...state}
-        testCallback={testCallback}
-      />
+    renderWithProviders(
+      <DecoratedComponent {...state} testCallback={testCallback} />,
+      state
     );
 
     await waitFor(() => {
       return expect(testCallback).toHaveBeenCalled();
     });
 
-    const actions = store.getActions();
+    const actions = appStore.testStore.getActions();
 
     expect(actions[0]).toMatchObject({ type: "SET_APP_READY" });
 
@@ -126,16 +125,12 @@ describe("appLifeCycleManager", () => {
   it("sends the quickBrickReady event when a loader doesn't resolves", async () => {
     const testCallback = jest.fn(() => {});
 
-    render(
-      <DecoratedComponent
-        dispatch={dispatch}
-        {...state}
-        shouldFail
-        testCallback={testCallback}
-      />
+    renderWithProviders(
+      <DecoratedComponent {...state} shouldFail testCallback={testCallback} />,
+      state
     );
 
-    const actions = store.getActions();
+    const actions = appStore.testStore.getActions();
 
     await waitFor(() => {
       return expect(testCallback).toHaveBeenCalled();

package/App/appLifeCycleManager/index.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import * as R from "ramda";
 
 import { sendLaunchEvent } from "@applicaster/zapp-react-native-utils/analyticsUtils";
-import { loadAppData } from "@applicaster/zapp-react-native-redux/AppData";
+import { AppData, useAppDispatch } from "@applicaster/zapp-react-native-redux";
 import {
   setAppLaunched,
   setAppReady,
@@ -13,7 +13,6 @@ import { networkStatusReady } from "../NetworkStatusProvider/networkStatusReady"
 import { updateSessionNumber } from "../SessionCounter/sessionCounter";
 
 import { coreAppLogger } from "../logger";
-import { Dispatch } from "@reduxjs/toolkit";
 import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
 import { isEmptyOrNil } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { requiredSessionKeys } from "../../const";
@@ -24,7 +23,6 @@ const logger = coreAppLogger.addSubsystem("AppLifeCycleManager");
 const isAndroid = isAndroidPlatform();
 
 type Props = {
-  dispatch: Dispatch;
   testCallback: () => void;
   plugins: QuickBrickPlugin[];
   appSettings: { runtimeConfigurationUrls: { [key in string]: string } };
@@ -35,6 +33,7 @@ export function appLifeCycleManager(appLoader, QuickBrickManager) {
     // this function is not called until React View is mounted to activity(ie quickBrickReady event sent)
     return function AppLifeCycleManagerRenderer(props: Props) {
       const actionsInitialStateSetters = useActionSetters();
+      const dispatch = useAppDispatch();
       // using useLayoutEffect to call the loader just after the DOM render to mimic componentDidMount timing
 
       async function setUpdateSessionNumber(results: unknown[]) {
@@ -93,7 +92,7 @@ export function appLifeCycleManager(appLoader, QuickBrickManager) {
       }
 
       function makeAppReady() {
-        const { dispatch, testCallback } = props;
+        const { testCallback } = props;
 
         dispatch(setAppReady());
         dispatch(setAppLaunched());
@@ -153,14 +152,14 @@ export function appLifeCycleManager(appLoader, QuickBrickManager) {
 
       const prepareApp = async () => {
         // eslint-disable-next-line unused-imports/no-unused-vars
-        const { dispatch, testCallback, ...state } = props;
+        const { testCallback, ...state } = props;
 
         try {
           const getState = () => state;
 
           const loaders = [
             appLoader(dispatch, getState),
-            dispatch<any>(loadAppData()),
+            dispatch<any>(AppData.loadAppData()),
             networkStatusReady(),
           ];
 

package/App/remoteContextReloader/__tests__/getRemoteContextData.test.js

@@ -1,10 +1,16 @@
-import * as ReduxModule from "@applicaster/zapp-react-native-redux";
 import nock from "nock";
 
 jest.mock("../../AssetCache", () => ({
   cacheAssets: jest.fn((x) => x),
 }));
 
+const mockLoadAppContextData = jest.fn(() => ({}));
+
+jest.mock("@applicaster/zapp-react-native-redux", () => ({
+  ...jest.requireActual("@applicaster/zapp-react-native-redux"),
+  loadAppContextData: mockLoadAppContextData,
+}));
+
 const uuid = "342ee911-03b6-4a16-adde-ece5ef739feb";
 
 const { getRemoteContextData } = require("../getRemoteContextData");
@@ -100,11 +106,12 @@ const failingRuntimeConfigurationUrls = {
   remote_configurations_url: "http://zapp.com/failing.json",
 };
 
-let reduxLoaderSpy;
 const dispatch = jest.fn();
 
 describe("getRemoteContextData", () => {
   beforeEach(() => {
+    mockLoadAppContextData.mockClear();
+
     nock("http://zapp.com").persist().get("/layout.json").reply(200, layout);
 
     nock("http://zapp.com")
@@ -120,20 +127,12 @@ describe("getRemoteContextData", () => {
     nock("http://zapp.com")
       .get("/failing.json")
       .reply(Math.floor(Math.random() * 200 + 400), 0);
-
-    reduxLoaderSpy = jest
-      .spyOn(ReduxModule, "loadAppContextData")
-      .mockImplementation(() => ({}));
-  });
-
-  afterEach(() => {
-    reduxLoaderSpy.mockRestore();
   });
 
   it("returns a map of context data with the result of the matched urls", async () => {
     await getRemoteContextData(dispatch, runtimeConfigurationUrls, plugins);
 
-    return expect(reduxLoaderSpy).toHaveBeenCalledWith(
+    return expect(mockLoadAppContextData).toHaveBeenCalledWith(
       dispatch,
       expect.objectContaining({
         pluginConfigurations,
@@ -147,7 +146,7 @@ describe("getRemoteContextData", () => {
   });
 
   it("skips the context data if it cannot be retrieved", async () => {
-    expect(reduxLoaderSpy).not.toHaveBeenCalled();
+    expect(mockLoadAppContextData).not.toHaveBeenCalled();
 
     return expect(
       getRemoteContextData(dispatch, failingRuntimeConfigurationUrls, plugins)

package/App/remoteContextReloader/getRemoteContextData/getNativeRemoteContextData.ts

@@ -1,12 +1,14 @@
 import * as R from "ramda";
 import isEmpty from "lodash/isEmpty";
 import { Dimensions, NativeModules } from "react-native";
-import { loadAppContextData } from "@applicaster/zapp-react-native-redux";
+import {
+  loadAppContextData,
+  AppData,
+} from "@applicaster/zapp-react-native-redux";
 import { isTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { mapPromises } from "@applicaster/zapp-react-native-utils/arrayUtils";
 import { fetchPluginConfiguration, getPromiseForType } from "../helpers";
 import { cacheAssets } from "../../AssetCache";
-import { actions as appDataActions } from "@applicaster/zapp-react-native-redux/AppData";
 import { logger } from "@applicaster/zapp-react-native-utils/logger";
 import { ACTIVE_LAYOUT_ID_STORAGE_KEY } from "../consts";
 const { AppLoaderBridge } = NativeModules;
@@ -74,7 +76,7 @@ export async function getNativeRemoteContextData(
 
   const apiVersion = layout?.layout?.["api_version"]; // Taken from remote configuration
 
-  dispatch(appDataActions.merge({ layoutVersion: apiVersion || "v1" }));
+  dispatch(AppData.actions.merge({ layoutVersion: apiVersion || "v1" }));
 
   const resolvedPromises = await mapPromises(getPromiseForType, ["cellStyles"]);
 

package/README.md

@@ -42,10 +42,6 @@ Creates a Zapp App with the provided options :
   - `module`: the plugin's callable function / React component
   - `name`: the name of the plugin - should match the `PascalCase`'d identifier of the plugin. If your plugin's identifier is `react-native-article`, the name should be `ReactNativeArticle`
   - `type`: the type of the plugin, as it is defined in the plugin's manifest in Zapp
-- `reduxStoreOptions`: (optional)
-  - `additionalReducers`: map of reducers to load in the redux store, on top of the existing ones. See available reducers' names to avoid name collision which would override your own custom reducers
-  - `additionalMiddlewares`: array of additional middlewares to load - by default, the ZappApp will have the `thunk` middleware, but others can be added
-  - `initialState`: optional initial state for the redux store
 - `pluginConfigurations`: the remote configuration options for plugins, as coming from Zapp
 - `remoteConfigurations`: Zapp's remote configurations
 - `appSettings`: arbitrary app settings which will be stored in the redux store.

package/createZappApp/__tests__/createZappApp.test.js

@@ -75,6 +75,17 @@ jest.mock("@applicaster/zapp-react-native-bridge/QuickBrick", () => ({
   getLegacyInitialProps: jest.fn(() => ({ initialProps: {} })),
 }));
 
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/River",
+  () => {
+    const View = require("react-native").View;
+
+    return {
+      River: jest.fn(() => <View testID="mock-river" />),
+    };
+  }
+);
+
 describe("createZappApp", () => {
   it("renders the provided React App", () => {
     const ZappApp = createZappApp({ App });

package/createZappApp/index.tsx

@@ -12,9 +12,10 @@ import {
   isNotNil,
 } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
+import { createZappReduxStore } from "@applicaster/zapp-react-native-redux/utils/createZappReduxStore";
 import {
-  createZappReduxStore,
   loadAppContextData,
+  AppData,
 } from "@applicaster/zapp-react-native-redux";
 
 import { coreLogger } from "@applicaster/zapp-react-native-utils/logger";
@@ -26,7 +27,6 @@ import { Provider } from "react-redux";
 import { EmptyZappApp } from "../defaults";
 import { mergeUiComponentPlugins } from "../helpers";
 import { isTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
-import { actions as appDataActions } from "@applicaster/zapp-react-native-redux/AppData";
 import { remoteDataLoader } from "../App/appRemoteDataLoader/remoteDataLoader";
 import * as QuickBrickManager from "@applicaster/zapp-react-native-bridge/QuickBrick";
 import { isAndroidPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
@@ -51,7 +51,6 @@ export function createZappApp(zappAppConfig: ZappAppConfig) {
     remoteConfigurations = {},
     layout = {},
     tabletLayout = {},
-    reduxStoreOptions = {},
     appSettings = {},
     ZappApp = EmptyZappApp,
     presetsMapping = {},
@@ -89,7 +88,7 @@ export function createZappApp(zappAppConfig: ZappAppConfig) {
     injectCorePlugins
   )(plugins);
 
-  const store = createZappReduxStore(reduxStoreOptions);
+  const store = createZappReduxStore();
 
   const appComponents = mergeUiComponentPlugins(components, plugins);
 
@@ -113,7 +112,7 @@ export function createZappApp(zappAppConfig: ZappAppConfig) {
     // Handle case when layout is backed in as part of the environment, dev only
     // TODO: Handle it inside getNativeRemoteContextData
     store.dispatch(
-      appDataActions.merge({
+      AppData.actions.merge({
         layoutVersion: layout?.api_version ? layout.api_version : "v1",
       })
     );

package/index.d.ts

@@ -45,7 +45,6 @@ declare type NavigationReducerActionTypes =
   | "SET_NAV_BAR_TITLE"
   | "SET_NAV_BAR_SUMMARY"
   | "SET_BOTTOM_BAR_VISIBILITY"
-  | "SET_LOCATION"
   | "OPEN_VIDEO_MODAL"
   | "CLOSE_VIDEO_MODAL"
   | "MINIMISE_VIDEO_MODAL"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-core",
-  "version": "14.0.0-alpha.4104749434",
+  "version": "14.0.0-alpha.4138342511",
   "description": "Core package for Applicaster's Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,13 +28,13 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "14.0.0-alpha.4104749434",
-    "@applicaster/quick-brick-core-plugins": "14.0.0-alpha.4104749434",
-    "@applicaster/zapp-pipes-v2-client": "14.0.0-alpha.4104749434",
-    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.4104749434",
-    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.4104749434",
-    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.4104749434",
-    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.4104749434",
+    "@applicaster/applicaster-types": "14.0.0-alpha.4138342511",
+    "@applicaster/quick-brick-core-plugins": "14.0.0-alpha.4138342511",
+    "@applicaster/zapp-pipes-v2-client": "14.0.0-alpha.4138342511",
+    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.4138342511",
+    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.4138342511",
+    "@applicaster/zapp-react-native-ui-components": "14.0.0-alpha.4138342511",
+    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.4138342511",
     "atob": "^2.1.2",
     "axios": "^0.28.0",
     "btoa": "^1.2.1",
@@ -42,9 +42,6 @@
     "md5": "^2.3.0",
     "promise": "^8.3.0",
     "query-string": "7.1.3",
-    "react-redux": "9.2.0",
-    "redux": "^4.0.4",
-    "reselect": "^4.0.0",
     "url": "^0.11.0",
     "uuid": "3.3.2"
   },
@@ -56,7 +53,6 @@
     "@applicaster/zapp-react-native-tvos-ui-components": "*",
     "@babel/runtime": "*",
     "@react-native-community/netinfo": "*",
-    "immer": "*",
     "react": "*",
     "react-native": "*",
     "react-native-fs": "*",