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

package/App/ActionSetters/index.ts

@@ -88,10 +88,12 @@ 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()}`,
+          }`,
         });
 
         const promiseFunc = subscription[key];
@@ -101,7 +103,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/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,20 @@ 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 +168,7 @@ 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,8 +1,6 @@
 import React from "react";
 import { render, waitFor, cleanup } from "@testing-library/react-native";
 
-jest.mock("react-native");
-
 const theme = {
   screen_margin_top: 0,
   app_background_color: "white",

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,7 @@ 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";
 
 const logger = coreAppLogger.addSubsystem("Navigator");
 
@@ -92,13 +93,6 @@ const navigationActions = {
 
 const platform = getPlatform();
 
-const initialModalState = {
-  visible: false,
-  screen: null,
-  options: {},
-  props: {},
-};
-
 export function NavigationProvider({ children }: Props) {
   const {
     appData: { layoutVersion },
@@ -130,8 +124,7 @@ export function NavigationProvider({ children }: Props) {
     ZappPipesEntryContext.Context
   );
 
-  const [modalState, setModalState] =
-    React.useState<ModalState>(initialModalState);
+  const { openModal, dismissModal } = useModalStore();
 
   const playNextOverlayState = React.useRef();
 
@@ -153,6 +146,12 @@ export function NavigationProvider({ children }: Props) {
     [pathname, rivers]
   );
 
+  const getModalState: () => ModalState = () => {
+    const { modalState } = useModalStore.getState();
+
+    return modalState;
+  };
+
   const homeRiver = React.useMemo(
     () => homeRiverSelector({ rivers }),
     [rivers]
@@ -615,31 +614,6 @@ export function NavigationProvider({ children }: Props) {
     },
   });
 
-  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 +634,6 @@ export function NavigationProvider({ children }: Props) {
     }
   }, [state?.options?.videoModal?.previousMode]);
 
-  const dismissModal = React.useCallback(() => {
-    setModalState(() => ({ ...initialModalState }));
-  }, []);
-
   const openModalBottomSheet = React.useCallback(
     ({
       ModalBottomSheetContent,
@@ -730,7 +700,7 @@ export function NavigationProvider({ children }: Props) {
       modalData: state.stack.modal?.state ?? null,
       openModal,
       dismissModal,
-      modalState,
+      getModalState,
       openModalBottomSheet,
       closeModalBottomSheet,
       videoModalState: state.options.videoModal,
@@ -748,14 +718,7 @@ export function NavigationProvider({ children }: Props) {
       getStack,
       getStackForPathname,
     }),
-    [
-      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 {

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

@@ -552,7 +552,7 @@ describe("<NavigationProvider />", () => {
 
       const view = wrapper.root.findByType(View);
       act(() => view.props.navigator.openModal({ item: rivers.A1234 }));
-      expect(view.props.navigator.modalState).toMatchSnapshot();
+      expect(view.props.navigator.get).toMatchSnapshot();
     });
 
     it("removes the visible flag when dismissing a modal", () => {
@@ -568,10 +568,10 @@ describe("<NavigationProvider />", () => {
 
       const view = wrapper.root.findByType(View);
       act(() => view.props.navigator.openModal({ item: rivers.A1234 }));
-      expect(view.props.navigator.modalState).toMatchSnapshot();
+      expect(view.props.navigator.getModalState()).toMatchSnapshot();
       act(() => view.props.navigator.dismissModal());
-      expect(view.props.navigator.modalState.visible).toBeFalsy();
-      expect(view.props.navigator.modalState).toMatchSnapshot();
+      expect(view.props.navigator.getModalState().visible).toBeFalsy();
+      expect(view.props.navigator.getModalState()).toMatchSnapshot();
     });
 
     it("should reset state to initial when dismissing a modal ( closeModalBottomSheet ) opened by openModalBottomSheet", () => {
@@ -594,9 +594,9 @@ describe("<NavigationProvider />", () => {
         })
       );
 
-      expect(view.props.navigator.modalState).toMatchSnapshot();
+      expect(view.props.navigator.getModalState()).toMatchSnapshot();
       act(() => view.props.navigator.closeModalBottomSheet());
-      expect(view.props.navigator.modalState).toMatchSnapshot();
+      expect(view.props.navigator.getModalState()).toMatchSnapshot();
     });
   });
 });

package/App/ThemeManager/index.tsx

@@ -1,8 +1,9 @@
 import * as R from "ramda";
 import * as React from "react";
 
+import { isEqual } from "@applicaster/zapp-react-native-utils/equalUtils";
 import { ThemeContext } from "@applicaster/zapp-react-native-utils/theme";
-import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import {
   mapKeys,
   partitionByKeys,
@@ -35,7 +36,7 @@ function populateTheme(plugin) {
 
 const TABLET_PREFIX = "tablet_";
 
-const prepareForTablet = (dimensions) => (themeProps) => {
+const prepareForTablet = (isTablet) => (themeProps) => {
   const [tabletThemeProps, mobileTheme] = partitionByKeys(
     R.compose(R.startsWith(TABLET_PREFIX), R.head),
     themeProps
@@ -62,12 +63,12 @@ const prepareForTablet = (dimensions) => (themeProps) => {
     R.omit(["tablet_theme"])
   )(tabletThemeProps);
 
-  return dimensions.deviceInfo.isTablet ? tabletTheme : mobileTheme;
+  return isTablet ? tabletTheme : mobileTheme;
 };
 
-const selectThemes = (dimensions, plugins) =>
+const selectThemes = (isTablet, plugins) =>
   R.compose(
-    R.map(prepareForTablet(dimensions)),
+    R.map(prepareForTablet(isTablet)),
     R.fromPairs,
     R.reject(R.isNil),
     R.map(populateTheme),
@@ -80,36 +81,38 @@ const ThemeContextProvider = ({
   setSelectedThemeId,
   children,
 }: any) => {
-  const value = React.useMemo(
-    () => ({ themes, selectedThemeId, setSelectedThemeId }),
-    [themes, selectedThemeId, setSelectedThemeId]
-  );
+  const value = { themes, selectedThemeId, setSelectedThemeId };
 
   return (
     <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
   );
 };
 
+const MemoizedThemeContextProvider = React.memo(
+  ThemeContextProvider,
+  isEqual({
+    byValue: ["selectedThemeId", "setSelectedThemeId"],
+    byReference: ["children", "themes"],
+  })
+);
+
 function ThemeManagerComponent({ children, plugins }: Props) {
-  const dimensions = useDimensions("screen", { deviceInfo: true });
-  const [themes, setThemes] = React.useState(selectThemes(dimensions, plugins));
+  const isTablet = useIsTablet();
+
+  const themes = selectThemes(isTablet, plugins);
 
   const [selectedThemeId, setSelectedThemeId] =
     React.useState(DEFAULT_THEME_ID);
 
-  React.useEffect(() => {
-    setThemes(selectThemes(dimensions, plugins));
-  }, [plugins, dimensions]);
-
   return (
-    <ThemeContextProvider
+    <MemoizedThemeContextProvider
       themes={themes}
       selectedThemeId={selectedThemeId}
       setSelectedThemeId={setSelectedThemeId}
     >
       {children}
-    </ThemeContextProvider>
+    </MemoizedThemeContextProvider>
   );
 }
 
-export const ThemeManager = React.memo<Props>(ThemeManagerComponent);
+export const ThemeManager = ThemeManagerComponent;

package/App/index.tsx

@@ -5,11 +5,6 @@ import {
   initialWindowMetrics,
 } from "react-native-safe-area-context";
 
-import type {
-  AppComponentProps,
-  ZappApp,
-} from "@applicaster/zapp-react-native-flow-types";
-
 import { ErrorBoundary } from "./ErrorBoundary";
 import { RouteManager } from "./RouteManager";
 import { withNavigationProvider } from "./NavigationProvider";

package/createZappApp/__tests__/__snapshots__/createZappApp.test.js.snap

@@ -27,6 +27,7 @@ Object {
     "AppContainer": [Function],
     "ContentScreen": [Function],
     "HookRenderer": [Function],
+    "ModalComponent": [Function],
     "PlayerContainer": Object {
       "$$typeof": Symbol(react.memo),
       "WrappedComponent": Object {

package/createZappApp/{index.js → index.tsx}

@@ -8,11 +8,6 @@ import * as React from "react";
 import * as R from "ramda";
 import { Dimensions } from "react-native";
 
-import type {
-  AppComponentProps,
-  ZappAppConfig,
-} from "@applicaster/zapp-react-native-flow-types";
-
 import {
   createZappReduxStore,
   loadAppContextData,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-core",
-  "version": "12.0.0-alpha.5035843303",
+  "version": "12.0.0-alpha.5053228432",
   "description": "Core package for Applicaster's Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -30,15 +30,15 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-alpha.5035843303",
-    "@applicaster/quick-brick-core-plugins": "12.0.0-alpha.5035843303",
-    "@applicaster/zapp-pipes-v2-client": "12.0.0-alpha.5035843303",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.5035843303",
-    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.5035843303",
-    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.5035843303",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.5035843303",
+    "@applicaster/applicaster-types": "12.0.0-alpha.5053228432",
+    "@applicaster/quick-brick-core-plugins": "12.0.0-alpha.5053228432",
+    "@applicaster/zapp-pipes-v2-client": "12.0.0-alpha.5053228432",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.5053228432",
+    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.5053228432",
+    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.5053228432",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.5053228432",
     "atob": "^2.1.2",
-    "axios": "^0.21.2",
+    "axios": "^0.28.0",
     "btoa": "^1.2.1",
     "camelize": "^1.0.0",
     "md5": "^2.3.0",
@@ -58,7 +58,6 @@
     "react-native-safe-area-context": "*"
   },
   "devDependencies": {
-    "@applicaster/zapp-react-native-flow-types": "1.5.0",
     "@types/react-native": "0.69.6",
     "@types/tizen-tv-webapis": "^2.0.1",
     "nock": "^10.0.0",