@applicaster/zapp-react-native-app 12.0.0-alpha.7539319320 → 12.0.0-alpha.8235014824

package/App/InteractionManager/index.js

@@ -8,7 +8,7 @@ import {
 } from "@applicaster/zapp-react-native-bridge/QuickBrick";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { useAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useRivers } from "@applicaster/zapp-react-native-utils/reactHooks/state";
 
 type Props = {
   children: React.CElement,
@@ -19,7 +19,7 @@ const getHome = R.compose(R.find(R.propEq("home", true)), R.values);
 const InteractionManagerComponent = (props: Props) => {
   const { children } = props;
   const { sendHardwareBackButtonClickEvent } = useAnalytics();
-  const { rivers } = usePickFromState(["rivers"]);
+  const rivers = useRivers();
   const navigator = useNavigation();
 
   const isHomeScreen = () => {

package/App/Layout/__tests__/index.test.ts

@@ -0,0 +1,7 @@
+describe("Layout", () => {
+  it.todo("should match snapshot when appReady is true");
+  it.todo("should not render transitioner with screen when appReady is false");
+  it.todo("should render menu when showMenu is true");
+  it.todo("should render VideoModal when visible & VideoModal is true");
+  it.todo("should render ZappHooksModal");
+});

package/App/Layout/index.tsx

@@ -8,7 +8,7 @@ import {
   useGetBottomTabBarHeight,
   useNavigation,
   useDimensions,
-  useIsNavBarVisible,
+  useNavbarState,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { Transitioner } from "@applicaster/zapp-react-native-ui-components/Components/Transitioner";
 import { transitionConfig } from "@applicaster/zapp-react-native-ui-components/Components/Transitioner/config";
@@ -23,11 +23,15 @@ import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { MenuToggleContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { VideoModal } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal";
 import { withDimensionsProvider } from "@applicaster/zapp-react-native-utils/dimensionsProvider";
+import { withModalAnimationProvider } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 import { ZappHooksModal } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal";
-import { useNavbarState } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 import { useListenEventBusEvent } from "@applicaster/zapp-react-native-utils/reactHooks/useListenEventBusEvent";
-import { PushTopicManager, PushTopicManagerConsts, PushTopicManagerEvents } from "@applicaster/zapp-react-native-bridge/PushNotifications/PushTopicManager";
+import {
+  PushTopicManager,
+  PushTopicManagerConsts,
+  PushTopicManagerEvents,
+} from "@applicaster/zapp-react-native-bridge/PushNotifications/PushTopicManager";
 
 type Props = {
   children: React.ReactNode;
@@ -61,29 +65,21 @@ const LayoutWithMenu = (props: Props) => {
 
   const dimensions = useDimensions("screen", { fullDimensions: true });
   const isRTL = useIsRTL();
-
   const navigator = useNavigation();
   const bottomTabBarHeight = useGetBottomTabBarHeight();
-
-  const {
-    activeRiver,
-    currentRoute,
-    screenData,
-    videoModalState,
-    isVideoModalDocked,
-    videoModalState: { visible },
-  } = navigator;
-
-  const isNavBarVisible = useIsNavBarVisible();
   const { title } = useNavbarState();
 
-  const NavBar = React.useMemo(
-    () => getNavigationPluginModule("nav_bar", activeRiver, plugins),
-    []
-  );
+  const { activeRiver, videoModalState, isVideoModalDocked } = navigator;
 
   const Menu = React.useMemo(
-    () => getNavigationPluginModule("menu", activeRiver, plugins),
+    () =>
+      getNavigationPluginModule(
+        "menu",
+        activeRiver,
+        plugins
+      ) as React.ComponentType<
+        MobileNavBarPluginProps & { navigator: ZappNavigation }
+      >,
     []
   );
 
@@ -96,8 +92,8 @@ const LayoutWithMenu = (props: Props) => {
     () => ({
       ...(showMenu
         ? {
-          paddingBottom: bottomTabBarHeight,
-        }
+            paddingBottom: bottomTabBarHeight,
+          }
         : {}),
       ...containerStyle,
       opacity: videoModalState.visible && !isVideoModalDocked ? 0 : 1,
@@ -105,20 +101,6 @@ const LayoutWithMenu = (props: Props) => {
     [bottomTabBarHeight, videoModalState.visible, isVideoModalDocked, showMenu]
   );
 
-  const navBarProps = React.useMemo(
-    () => ({
-      setToggleMenu,
-      toggleMenu,
-      openMenu,
-      setOpenMenu,
-      closeMenu,
-      setCloseMenu,
-      navigator,
-      ...getNavigationProps({ navigator, title, category: "nav_bar" }),
-    }),
-    [navigator.currentRoute]
-  );
-
   const menuProps = {
     setToggleMenu: setToggleMenu,
     toggleMenu: toggleMenu,
@@ -127,7 +109,7 @@ const LayoutWithMenu = (props: Props) => {
     closeMenu: closeMenu,
     setCloseMenu: setCloseMenu,
     dimensions: { window: dimensions },
-    navigator: navigator,
+    navigator,
     ...getNavigationProps({
       navigator,
       title,
@@ -158,22 +140,20 @@ const LayoutWithMenu = (props: Props) => {
             contentStyle={showMenu ? contentStyle : {}}
             isRTL={isRTL}
           >
+            {/* has pathname context */}
             <Screen
               key={navigator.currentRoute}
-              NavBar={NavBar}
-              navBarProps={navBarProps}
-              Menu={Menu}
-              menuProps={menuProps}
-              pathname={currentRoute}
-              screenData={screenData}
-              isNavBarVisible={isNavBarVisible}
+              pathname={navigator.currentRoute} // required by TransitionerComponent
+              screenData={navigator.screenData} // required by TransitionerComponent
+              setToggleMenu={setToggleMenu}
+              setCloseMenu={setCloseMenu}
             />
           </Transitioner>
         </View>
       ) : null}
-      {showMenu && <Menu {...menuProps} />}
-      {VideoModal && visible && <VideoModal />}
-
+      {showMenu && <Menu {...{ ...menuProps, id: navigator.currentRoute }} />}
+      {/* depends on active river. @TODO move below screen context */}
+      {VideoModal && videoModalState.visible && <VideoModal />}
       <ZappHooksModal />
     </>
   );
@@ -181,5 +161,6 @@ const LayoutWithMenu = (props: Props) => {
 
 export const Layout = R.compose(
   MenuToggleContext.withConsumer,
-  withDimensionsProvider
+  withDimensionsProvider,
+  withModalAnimationProvider
 )(LayoutWithMenu);

package/App/__tests__/app.test.js

@@ -54,6 +54,11 @@ jest.mock(
   () => () => null
 );
 
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation",
+  () => ({ withModalAnimationProvider: () => null })
+);
+
 jest.mock("react-native-safe-area-context", () => ({
   SafeAreaProvider: jest.fn(
     () =>

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@applicaster/zapp-react-native-app",
-  "version": "12.0.0-alpha.7539319320",
+  "version": "12.0.0-alpha.8235014824",
   "description": "Zapp App Component for Applicaster's Quick Brick React Native App",
   "main": "index.js",
   "scripts": {
     "test": "jest -w=2",
+    "build": "echo 'skipping ts build for core packages'",
     "flow-types": "node_modules/.bin/flow-copy-source -v -i '**/__tests__**' . ."
   },
   "repository": {
@@ -28,12 +29,12 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-core": "12.0.0-alpha.7539319320",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.7539319320",
-    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.7539319320",
-    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.7539319320",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.7539319320",
-    "axios": "^0.21.2",
+    "@applicaster/quick-brick-core": "12.0.0-alpha.8235014824",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.8235014824",
+    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.8235014824",
+    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.8235014824",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.8235014824",
+    "axios": "^0.28.0",
     "camelize": "^1.0.0",
     "query-string": "7.1.3",
     "react-router-native": "5.1.2",
@@ -44,7 +45,6 @@
     "react-native": "0.68.6"
   },
   "devDependencies": {
-    "@applicaster/zapp-react-native-flow-types": "1.5.0",
     "nock": "^10.0.0",
     "redux-mock-store": "^1.5.3"
   },

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base.json",
+
+  "compilerOptions": {
+    "outDir": "./lib",
+    "rootDir": "./src"
+  },
+
+  "include": ["src/**/*"],
+  "exclude": ["src/**/*.test.ts", "src/**/*.test.tsx"]
+}