@applicaster/quick-brick-core 13.0.0-alpha.7586259907 → 13.0.0-alpha.7620873141

package/App/ModalProvider/ModalBottomSheet/Overlay.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { StyleSheet, TouchableOpacity, Easing, View } from "react-native";
 
 import { AnimatedInOut } from "@applicaster/zapp-react-native-ui-components/Components/AnimatedInOut";
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { dismissModal } from "@applicaster/zapp-react-native-utils/modalState";
 
 type Props = {
   overlayColor: string;
@@ -35,21 +35,19 @@ const fadeInAnimation = {
   delay,
 };
 
-const animationConfig = (onAnimationEnd) => ({
+const animationConfig = {
   in: fadeInAnimation,
   out: {
     ...fadeInAnimation,
-    onAnimationEnd,
+    onAnimationEnd: dismissModal,
   },
-});
+};
 
 export function Overlay(props: Props) {
-  const navigator = useNavigation();
-
   return (
     <AnimatedInOut
       visible={props.visible}
-      animationConfig={animationConfig(navigator.closeModalBottomSheet)}
+      animationConfig={animationConfig}
       staticStyles={styles.container}
     >
       <TouchableOpacity

package/App/ModalProvider/ModalBottomSheet/index.tsx

@@ -3,7 +3,7 @@ import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { Keyboard, StyleSheet, View } from "react-native";
 
 import { Overlay } from "./Overlay";
@@ -75,13 +75,7 @@ export function ModalBottomSheet(props: Props) {
 
   const isTablet = useIsTablet();
 
-  const maxWidth = useMemo(
-    () =>
-      isTablet
-        ? Math.max(sheetTabletMaxWidth, dimensions.width)
-        : dimensions.width,
-    [isTablet]
-  );
+  const maxWidth = isTablet ? sheetTabletMaxWidth : dimensions.width;
 
   const modalVisible = visible && sheetHeight > 0;
 

package/App/ModalProvider/index.tsx

@@ -6,10 +6,10 @@ 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";
+import { useModalStoreState } from "@applicaster/zapp-react-native-utils/modalState";
 
 export function ModalProvider() {
-  const { modalState } = useModalStore();
+  const modalState = useModalStoreState();
 
   const [modalVisible, setModalVisible] = React.useState(false);
   const [modalShown, setModalShown] = React.useState(false);

package/App/NavigationProvider/NavigationProvider.tsx

@@ -58,13 +58,20 @@ import {
   legacyScreenData,
   openExternalUrl,
 } from "./utils";
-import { debounce } from "@applicaster/zapp-react-native-utils/functionUtils";
+import {
+  debounce,
+  getJsonReplacer,
+} from "@applicaster/zapp-react-native-utils/functionUtils";
 
 import { findParent } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappPipesContext/ZappPipesEntryContext";
 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 {
+  dismissModal,
+  modalStore,
+  openModal,
+} 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";
@@ -120,8 +127,6 @@ export function NavigationProvider({ children }: Props) {
 
   const { context } = React.useContext(ZappPipesEntryContext.Context);
 
-  const { openModal, dismissModal } = useModalStore();
-
   const playNextOverlayState = React.useRef();
 
   const online = useConnectionInfo(true);
@@ -147,7 +152,7 @@ export function NavigationProvider({ children }: Props) {
   );
 
   const getModalState: () => ModalState = () => {
-    const { modalState } = useModalStore.getState();
+    const { modalState } = modalStore.getState();
 
     return modalState;
   };
@@ -391,7 +396,7 @@ export function NavigationProvider({ children }: Props) {
     }
 
     if (hookPlugin.isModalHook()) {
-      navigator.openModal({
+      openModal({
         item: payload,
         props: { screenType: "hooks" },
         options: { ModalContainer: hookPlugin.getModalContainer() },
@@ -411,7 +416,7 @@ export function NavigationProvider({ children }: Props) {
     }
 
     if (hookPlugin.isModalHook()) {
-      navigator.dismissModal();
+      dismissModal();
     } else {
       goBack(true, true);
     }
@@ -433,7 +438,7 @@ export function NavigationProvider({ children }: Props) {
 
     if (!abort) {
       if (hookPlugin.isModalHook()) {
-        navigator.dismissModal();
+        dismissModal();
       } else {
         goBack(true, true);
       }
@@ -446,7 +451,7 @@ export function NavigationProvider({ children }: Props) {
     callback?.();
 
     if (hookPlugin.isModalHook()) {
-      navigator.dismissModal();
+      dismissModal();
     }
   };
 
@@ -683,33 +688,6 @@ export function NavigationProvider({ children }: Props) {
     }
   }, [state?.options?.videoModal?.previousMode]);
 
-  const openModalBottomSheet = React.useCallback(
-    ({
-      ModalBottomSheetContent,
-      modalBottomSheetContentProps,
-      props = {},
-      options = {},
-    }) => {
-      openModal({
-        item: {
-          ModalBottomSheetContent,
-          modalBottomSheetContentProps,
-        },
-        props,
-        options: {
-          animationType: "none",
-          animated: false,
-          ...options,
-        },
-      });
-    },
-    [openModal]
-  );
-
-  const closeModalBottomSheet = React.useCallback(() => {
-    dismissModal();
-  }, [dismissModal]);
-
   const getNestedEntry = () => state?.location?.state?.nested?.entry ?? null;
 
   // It will only work for the regular stack and pathname, It won't work for modals
@@ -750,8 +728,6 @@ export function NavigationProvider({ children }: Props) {
       openModal,
       dismissModal,
       getModalState,
-      openModalBottomSheet,
-      closeModalBottomSheet,
       videoModalState: state.options.videoModal,
       openVideoModal,
       closeVideoModal,
@@ -768,7 +744,15 @@ export function NavigationProvider({ children }: Props) {
       getStackForPathname,
       mainStack: state.stack.mainStack,
     }),
-    [rivers, plugins, JSON.stringify(state), appLaunched, startUpHooks]
+    [
+      rivers,
+      plugins,
+      // TODO: Compare entire screen data from state must be removed
+      // State size could be large ~150kb and take 80ms on android tv on 8 rails
+      JSON.stringify(state, getJsonReplacer()),
+      appLaunched,
+      startUpHooks,
+    ]
   );
 
   // when running the tests, we pass the dispatch function

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

@@ -461,48 +461,4 @@ describe("<NavigationProvider />", () => {
       });
     });
   });
-
-  describe("modal feature", () => {
-    it("sets the modalState when opening a modal", () => {
-      act(() => {
-        wrapper = renderContextConsumer();
-      });
-
-      const view = getByTestId(wrapper, "WrapperView");
-      act(() => view.props.navigator.openModal({ item: rivers.A1234 }));
-      expect(view.props.navigator.get).toMatchSnapshot();
-    });
-
-    it("removes the visible flag when dismissing a modal", () => {
-      act(() => {
-        wrapper = renderContextConsumer();
-      });
-
-      const view = getByTestId(wrapper, "WrapperView");
-      act(() => view.props.navigator.openModal({ item: rivers.A1234 }));
-      expect(view.props.navigator.getModalState()).toMatchSnapshot();
-      act(() => view.props.navigator.dismissModal());
-      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", () => {
-      act(() => {
-        wrapper = renderContextConsumer();
-      });
-
-      const view = getByTestId(wrapper, "WrapperView");
-
-      act(() =>
-        view.props.navigator.openModalBottomSheet({
-          ModalBottomSheetContent: rivers.A1234,
-          modalBottomSheetContentProps: { some: "props" },
-        })
-      );
-
-      expect(view.props.navigator.getModalState()).toMatchSnapshot();
-      act(() => view.props.navigator.closeModalBottomSheet());
-      expect(view.props.navigator.getModalState()).toMatchSnapshot();
-    });
-  });
 });

package/App/index.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import * as R from "ramda";
+
 import {
   initialWindowMetrics,
   SafeAreaProvider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-core",
-  "version": "13.0.0-alpha.7586259907",
+  "version": "13.0.0-alpha.7620873141",
   "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": "13.0.0-alpha.7586259907",
-    "@applicaster/quick-brick-core-plugins": "13.0.0-alpha.7586259907",
-    "@applicaster/zapp-pipes-v2-client": "13.0.0-alpha.7586259907",
-    "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.7586259907",
-    "@applicaster/zapp-react-native-redux": "13.0.0-alpha.7586259907",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.7586259907",
-    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.7586259907",
+    "@applicaster/applicaster-types": "13.0.0-alpha.7620873141",
+    "@applicaster/quick-brick-core-plugins": "13.0.0-alpha.7620873141",
+    "@applicaster/zapp-pipes-v2-client": "13.0.0-alpha.7620873141",
+    "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.7620873141",
+    "@applicaster/zapp-react-native-redux": "13.0.0-alpha.7620873141",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.7620873141",
+    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.7620873141",
     "atob": "^2.1.2",
     "axios": "^0.28.0",
     "btoa": "^1.2.1",

package/App/ModalProvider/ModalChildrenWrapper/index.web.ts

@@ -1 +0,0 @@
-export { Fragment as ModalChildrenWrapper } from "react";

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

@@ -1,68 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<NavigationProvider /> modal feature removes the visible flag when dismissing a modal 1`] = `
-{
-  "options": {
-    "animated": true,
-    "animationType": "slide",
-    "onDismiss": [Function],
-    "onRequestClose": [Function],
-    "onShow": [Function],
-    "presentationStyle": "overFullScreen",
-    "transparent": true,
-  },
-  "props": undefined,
-  "screen": {
-    "id": "A1234",
-    "navigations": [],
-    "ui_components": [],
-  },
-  "visible": true,
-}
-`;
-
-exports[`<NavigationProvider /> modal feature removes the visible flag when dismissing a modal 2`] = `
-{
-  "options": {},
-  "props": {},
-  "screen": null,
-  "visible": false,
-}
-`;
-
-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`] = `
-{
-  "options": {
-    "animated": false,
-    "animationType": "none",
-    "onDismiss": [Function],
-    "onRequestClose": [Function],
-    "onShow": [Function],
-    "presentationStyle": "overFullScreen",
-    "transparent": true,
-  },
-  "props": {},
-  "screen": {
-    "ModalBottomSheetContent": {
-      "id": "A1234",
-      "navigations": [],
-      "ui_components": [],
-    },
-    "modalBottomSheetContentProps": {
-      "some": "props",
-    },
-  },
-  "visible": true,
-}
-`;
-
-exports[`<NavigationProvider /> modal feature should reset state to initial when dismissing a modal ( closeModalBottomSheet ) opened by openModalBottomSheet 2`] = `
-{
-  "options": {},
-  "props": {},
-  "screen": null,
-  "visible": false,
-}
-`;