@applicaster/quick-brick-core 12.0.0-alpha.5035843303 → 12.0.0-alpha.5050333009

package/App/ActionSetters/index.ts

@@ -88,10 +88,10 @@ const getActionInitialStateSetters = (key) => {
   return R.compose(
     R.map((subscription: { [x: string]: any; pluginId: any }) => {
       return async () => {
+        const now = performance.now();
+
         logger.info({
-          message: `Invocation Started - action plugin ${key}, pluginId: ${
-            subscription.pluginId
-          }: ${performance.now()}`,
+          message: `Invocation Started - action plugin ${key}, pluginId: ${subscription.pluginId}`,
         });
 
         const promiseFunc = subscription[key];
@@ -101,7 +101,7 @@ const getActionInitialStateSetters = (key) => {
         logger.info({
           message: `Invocation Completed - action plugin ${key}, pluginId: ${
             subscription.pluginId
-          }: ${performance.now()}`,
+          }: ${performance.now() - now} ms`,
         });
 
         return result;

package/App/AssetCache/__tests__/assetCache.test.ts

@@ -323,7 +323,7 @@ describe("asset cache", () => {
 
       expect(saveCacheData).toHaveBeenCalledWith(
         layoutId,
-        newFiles.filter(({ url }) => !url.includes("fail")),
+        newFiles.filter(({ url }) => !url.includes("fail"))
       );
     });
 

package/App/AssetCache/index.ts

@@ -1,6 +1,6 @@
 /// <reference types="../../" />
 import * as R from "ramda";
-import { log_debug, log_warning } from "./logger";
+import { log_debug, log_verbose, log_warning } from "./logger";
 import { CacheManager } from "./CacheManager";
 
 import {
@@ -84,6 +84,8 @@ export async function cacheAssets({
     };
   }
 
+  const time = performance.now();
+
   try {
     const { assetFiles, cellAssets, pluginAssets, layoutAssets } =
       await getLayoutAssets({
@@ -141,18 +143,25 @@ export async function cacheAssets({
 
     newCacheState.forEach(({ file, url }) => (urlFileMap[url] = file));
 
-    const updatedLayout = remapAssetPath(layoutAssets, layout, urlFileMap);
+    const updatedLayout = remapAssetPath(
+      layoutAssets,
+      layout,
+      urlFileMap,
+      "layoutAssets"
+    );
 
     const updatedPluginConfigurations = remapAssetPath(
       pluginAssets,
       pluginConfigurations,
-      urlFileMap
+      urlFileMap,
+      "pluginAssets"
     );
 
     const updatedCellStyles = remapAssetPath(
       cellAssets,
       cellStyles,
-      urlFileMap
+      urlFileMap,
+      "cellStyles"
     );
 
     return {
@@ -164,5 +173,9 @@ export async function cacheAssets({
     log_warning(`cacheAssets: Error caching assets, message: ${error.message}`);
 
     return { layout, pluginConfigurations, cellStyles };
+  } finally {
+    log_verbose(
+      `cacheAssets: caching assets took ${performance.now() - time} ms`
+    );
   }
 }

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

@@ -1,7 +1,4 @@
-import {
-  useActions,
-  usePickFromState,
-} from "@applicaster/zapp-react-native-redux/hooks";
+import { useActions } from "@applicaster/zapp-react-native-redux/hooks";
 import * as R from "ramda";
 import * as React from "react";
 import axios from "axios";
@@ -28,6 +25,7 @@ import {
 } from "../../helpers";
 
 import { log_error, log_info } from "../../logger";
+import { useRivers } from "@applicaster/zapp-react-native-utils/reactHooks/state";
 
 const getFeed = (query) => ({
   content: { src: query.data_source },
@@ -60,7 +58,7 @@ export function usePresentSchemeHandler({
     feedUrl: data_source,
   });
 
-  const { rivers } = usePickFromState(["rivers"]);
+  const rivers = useRivers();
   const screenRiver = findRiver({ screen_id, rivers });
   const dispatch = useDispatch();
 

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

@@ -1,7 +1,5 @@
 import React from "react";
-import { render, waitFor, cleanup } from "@testing-library/react-native";
-
-jest.mock("react-native");
+import { cleanup, render, waitFor } from "@testing-library/react-native";
 
 const theme = {
   screen_margin_top: 0,
@@ -10,6 +8,8 @@ const theme = {
 
 const plugins = [];
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
+
 jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
   useTheme: jest.fn(() => theme),
 }));

package/App/DeepLinking/URLSchemeListener/__tests__/URLSchemeListenerTest.js

@@ -7,8 +7,6 @@ import { URLSchemeListener } from "../index";
 
 const URL = "url";
 
-jest.mock("react-native");
-
 const TestComponent = () => (
   <View>
     <Text>I'm a test component</Text>

package/App/ModalProvider/ModalBottomSheet/index.tsx

@@ -13,6 +13,7 @@ import {
   useNavigation,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
+import { ModalComponent } from "@applicaster/zapp-react-native-ui-components/Components";
 
 const styles = StyleSheet.create({
   container: {
@@ -55,7 +56,10 @@ export function ModalBottomSheet(props: Props) {
     modal_bottom_sheet_tablet_max_width: sheetTabletMaxWidth,
   } = theme;
 
-  const { ModalBottomSheetContent, modalBottomSheetContentProps } = props;
+  const {
+    ModalBottomSheetContent = ModalComponent,
+    modalBottomSheetContentProps,
+  } = props;
 
   const onLayout = useCallback(({ nativeEvent }) => {
     const calculatedHeight = nativeEvent?.layout?.height;

package/App/ModalProvider/ModalContent.tsx

@@ -17,7 +17,7 @@ const styles = StyleSheet.create({
 export function ModalContent(props: Props) {
   const { modalScreenProps } = props;
 
-  if (modalScreenProps?.screenData?.ModalBottomSheetContent) {
+  if (modalScreenProps?.screenData?.modalBottomSheetContentProps) {
     const { ModalBottomSheetContent, modalBottomSheetContentProps } =
       modalScreenProps?.screenData || {};
 

package/App/ModalProvider/index.tsx

@@ -1,16 +1,16 @@
 import * as React from "react";
 
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
-
 import { ModalPresenter } from "./ModalPresenter";
 import { ModalContent } from "./ModalContent";
 import { ModalChildrenWrapper } from "./ModalChildrenWrapper";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
 import { ScreenContextProvider } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenContext";
 import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/routeTypes";
+import { useModalStore } from "@applicaster/zapp-react-native-utils/modalState";
 
 export function ModalProvider() {
-  const { modalState } = useNavigation();
+  const { modalState } = useModalStore();
+
   const [modalVisible, setModalVisible] = React.useState(false);
   const [modalShown, setModalShown] = React.useState(false);
 

package/App/NavigationProvider/NavigationProvider.tsx

@@ -63,6 +63,10 @@ import { findParent } from "@applicaster/zapp-react-native-ui-components/Context
 import { ZappPipesEntryContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { PlayNextState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/OverlayObserver/OverlaysObserver";
 import { inflateUrl } from "@applicaster/zapp-react-native-ui-components/Components/LinkHandler/LinkHandler";
+import { useModalStore } from "@applicaster/zapp-react-native-utils/modalState";
+import { useSubscriberFor } from "@applicaster/zapp-react-native-utils/reactHooks/useSubscriberFor";
+import { QBUIComponentEvents } from "@applicaster/zapp-react-native-ui-components/events";
+import { Hook } from "@applicaster/zapp-react-native-utils/appUtils/HooksManager/Hook";
 
 const logger = coreAppLogger.addSubsystem("Navigator");
 
@@ -72,17 +76,6 @@ type Props = {
   plugins?: QuickBrickPlugin[];
 };
 
-type EntryWithParent = ZappEntry & { parent?: EntryWithParent };
-
-type SingleEntry = {
-  data: EntryWithParent;
-  route: string;
-  id: string;
-  parentId?: string;
-};
-
-type EntryContextType = { [K in string]: SingleEntry };
-
 const navigationActions = {
   [ACTIONS.PUSH]: push,
   [ACTIONS.REPLACE]: replace,
@@ -92,13 +85,6 @@ const navigationActions = {
 
 const platform = getPlatform();
 
-const initialModalState = {
-  visible: false,
-  screen: null,
-  options: {},
-  props: {},
-};
-
 export function NavigationProvider({ children }: Props) {
   const {
     appData: { layoutVersion },
@@ -126,17 +112,18 @@ export function NavigationProvider({ children }: Props) {
   const pathname = state?.location?.pathname;
   const pathnameRef = React.useRef(pathname);
 
-  const { context }: EntryContextType = React.useContext(
-    ZappPipesEntryContext.Context
-  );
+  const { context } = React.useContext(ZappPipesEntryContext.Context);
 
-  const [modalState, setModalState] =
-    React.useState<ModalState>(initialModalState);
+  const { openModal, dismissModal } = useModalStore();
 
   const playNextOverlayState = React.useRef();
 
   const online = useConnectionInfo(true);
 
+  const replaceEvent = useSubscriberFor(
+    QBUIComponentEvents.navigatorReplaceItem
+  );
+
   React.useEffect(() => {
     stateRef.current = state;
     pathnameRef.current = pathname;
@@ -153,6 +140,12 @@ export function NavigationProvider({ children }: Props) {
     [pathname, rivers]
   );
 
+  const getModalState: () => ModalState = () => {
+    const { modalState } = useModalStore.getState();
+
+    return modalState;
+  };
+
   const homeRiver = React.useMemo(
     () => homeRiverSelector({ rivers }),
     [rivers]
@@ -168,7 +161,7 @@ export function NavigationProvider({ children }: Props) {
     [rivers, homeRiver]
   );
 
-  const getStack = () => [...stateRef?.current?.stack?.mainStack];
+  const getStack = () => [...state?.stack?.mainStack];
 
   const openVideoModal = (
     item: ZappEntry,
@@ -260,6 +253,7 @@ export function NavigationProvider({ children }: Props) {
       item?.id !==
         legacyScreenData(state?.location?.state as NavigationScreenData)?.id
     ) {
+      replaceEvent();
       navigateTo(item, ACTIONS.REPLACE, options);
     }
   };
@@ -276,7 +270,7 @@ export function NavigationProvider({ children }: Props) {
         route.includes(pathname)
       );
 
-      return pathnameStackIndex > 1;
+      return pathnameStackIndex >= 1;
     }
 
     if (!Number.isNaN(filteredStack?.length)) {
@@ -374,7 +368,18 @@ export function NavigationProvider({ children }: Props) {
     }
   };
 
-  const handleHookPresent = ({ hookPlugin, route, payload }, dispose) => {
+  const handleHookPresent = (
+    {
+      hookPlugin,
+      route,
+      payload,
+    }: {
+      hookPlugin: Hook;
+      route: string;
+      payload: object;
+    },
+    dispose
+  ) => {
     if (hookPlugin?.lastHook) {
       dispose();
     }
@@ -408,9 +413,12 @@ export function NavigationProvider({ children }: Props) {
     }
   };
 
-  const handleHookCancel = ({ hookPlugin }, dispose) => {
-    if (hookPlugin?.lastHook) {
-      dispose();
+  const handleHookCancel = ({ hookPlugin, callback }, dispose) => {
+    dispose();
+    setStartUpHooks(false);
+
+    if (callback && typeof callback === "function") {
+      callback();
     }
 
     if (hookPlugin.isModalHook()) {
@@ -476,7 +484,13 @@ export function NavigationProvider({ children }: Props) {
     return false;
   }, [pluginConfigurations, plugins, rivers]);
 
-  const [startUpHooks, setStartUpHooks] = React.useState(checkStartUpHooks);
+  const [startUpHooks, _setStartUpHooks] = React.useState(checkStartUpHooks);
+  const currentStartUpHooks = React.useRef(checkStartUpHooks);
+
+  const setStartUpHooks = (value) => {
+    _setStartUpHooks(value);
+    currentStartUpHooks.current = value;
+  };
 
   const handleHookComplete =
     (navigationAction, targetRoute, { screen, options }) =>
@@ -484,7 +498,7 @@ export function NavigationProvider({ children }: Props) {
       if (hookPlugin?.lastHook) {
         dispose({ disposeAll: true });
 
-        startUpHooks && setStartUpHooks(false);
+        startUpHooks.current && setStartUpHooks(false);
       }
 
       dispatch(
@@ -593,10 +607,15 @@ export function NavigationProvider({ children }: Props) {
           targetScreen: screen,
           rivers,
           plugins,
-          startUpHooksData: { startUpHooks, setStartUpHooks },
+          startUpHooksData: {
+            startUpHooks: currentStartUpHooks.current,
+            setStartUpHooks,
+          },
         };
 
-        HooksManager(hooksOptions)
+        const hooksManager = HooksManager(hooksOptions);
+
+        hooksManager.subscriber
           .on(HOOKS_EVENTS.PRESENT_SCREEN_HOOK, handleHookPresent)
           .on(HOOKS_EVENTS.ERROR, handleHookError)
           .on(HOOKS_EVENTS.CANCEL, handleHookCancel)
@@ -607,39 +626,15 @@ export function NavigationProvider({ children }: Props) {
               screen,
               options,
             })
-          )
-          .handleHooks(legacyScreenData({ entry, screen }));
+          );
+
+        hooksManager.handleHooks(legacyScreenData({ entry, screen }));
       } else {
         dispatch(navigationAction(targetRoute, { screen, entry, options }));
       }
     },
   });
 
-  const openModal = React.useCallback(
-    ({ item, options = {}, props = {} }: OpenModalArg) => {
-      setModalState({
-        visible: true,
-        screen: item as ZappRiver,
-        options: {
-          animated: true,
-          animationType: "slide",
-          onShow: () => {},
-          presentationStyle: "overFullScreen",
-          transparent: true,
-          ...options,
-          onDismiss: () => {
-            setModalState(initialModalState);
-          },
-          onRequestClose: () => {
-            dismissModal();
-          },
-        },
-        props,
-      });
-    },
-    []
-  );
-
   const openPiP = React.useCallback(() => {
     dispatch(setVideoPiP());
   }, []);
@@ -660,10 +655,6 @@ export function NavigationProvider({ children }: Props) {
     }
   }, [state?.options?.videoModal?.previousMode]);
 
-  const dismissModal = React.useCallback(() => {
-    setModalState(() => ({ ...initialModalState }));
-  }, []);
-
   const openModalBottomSheet = React.useCallback(
     ({
       ModalBottomSheetContent,
@@ -695,15 +686,15 @@ export function NavigationProvider({ children }: Props) {
 
   // 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.
-  const getStackForPathname = React.useCallback((pathname: string):
-    | NavigationScreenState
-    | undefined => {
-    const stack = getStack();
+  const getStackForPathname = (
+    pathname: string
+  ): NavigationScreenState | undefined => {
+    const stack = [...state?.stack?.mainStack];
 
     const currentStack = stack.find(({ route }) => route === pathname);
 
     return currentStack;
-  }, []);
+  };
 
   const navigator: QuickBrickAppNavigator = React.useMemo(
     () => ({
@@ -730,7 +721,7 @@ export function NavigationProvider({ children }: Props) {
       modalData: state.stack.modal?.state ?? null,
       openModal,
       dismissModal,
-      modalState,
+      getModalState,
       openModalBottomSheet,
       closeModalBottomSheet,
       videoModalState: state.options.videoModal,
@@ -747,15 +738,9 @@ export function NavigationProvider({ children }: Props) {
       replaceTop,
       getStack,
       getStackForPathname,
+      mainStack: state.stack.mainStack,
     }),
-    [
-      rivers,
-      plugins,
-      JSON.stringify(state),
-      modalState,
-      appLaunched,
-      startUpHooks,
-    ]
+    [rivers, plugins, JSON.stringify(state), appLaunched, startUpHooks]
   );
 
   // when running the tests, we pass the dispatch function

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

@@ -11,7 +11,9 @@ Object {
     "presentationStyle": "overFullScreen",
     "transparent": true,
   },
-  "props": Object {},
+  "props": Object {
+    "screenData": Object {},
+  },
   "screen": Object {
     "id": "A1234",
     "navigations": Array [],
@@ -30,26 +32,7 @@ Object {
 }
 `;
 
-exports[`<NavigationProvider /> modal feature sets the modalState when opening a modal 1`] = `
-Object {
-  "options": Object {
-    "animated": true,
-    "animationType": "slide",
-    "onDismiss": [Function],
-    "onRequestClose": [Function],
-    "onShow": [Function],
-    "presentationStyle": "overFullScreen",
-    "transparent": true,
-  },
-  "props": Object {},
-  "screen": Object {
-    "id": "A1234",
-    "navigations": Array [],
-    "ui_components": Array [],
-  },
-  "visible": true,
-}
-`;
+exports[`<NavigationProvider /> modal feature sets the modalState when opening a modal 1`] = `undefined`;
 
 exports[`<NavigationProvider /> modal feature should reset state to initial when dismissing a modal ( closeModalBottomSheet ) opened by openModalBottomSheet 1`] = `
 Object {