@applicaster/zapp-react-native-utils 16.0.0-rc.86 → 16.0.0-rc.87

package/actionsExecutor/actions/__tests__/showToast.test.ts

@@ -31,7 +31,7 @@ describe("showToastAction", () => {
         message: "Added to queue",
         extraMessage: "Extra info",
         style: undefined,
-        timeout: 1000,
+        timeout: 5000,
         source: "confirmation",
       },
     ]);
@@ -78,7 +78,7 @@ describe("showToastAction", () => {
         message: undefined,
         extraMessage: undefined,
         style: undefined,
-        timeout: 1000,
+        timeout: 5000,
         source: "confirmation",
       },
     ]);

package/actionsExecutor/actions/showToast.ts

@@ -5,7 +5,7 @@ import { postEvent } from "../../reactHooks/useSubscriberFor";
 
 export const CONFIRMATION_TOAST_SOURCE = "confirmation";
 
-export const CONFIRMATION_TOAST_DEFAULT_TIMEOUT = 1000;
+export const CONFIRMATION_TOAST_DEFAULT_TIMEOUT = 5000;
 
 /**
  * Shows a mobile confirmation toast with Theme defaults from
@@ -13,7 +13,7 @@ export const CONFIRMATION_TOAST_DEFAULT_TIMEOUT = 1000;
  *
  * This action is confirmation-only by design: it always stamps
  * `source: "confirmation"` (so Theme confirmation styles apply) and defaults
- * `timeout` to 1000 ms. Non-confirmation toasts (e.g. Offline Experience)
+ * `timeout` to 5000 ms. Non-confirmation toasts (e.g. Offline Experience)
  * must post on the shared `"showToast"` event bus directly and omit `source`.
  * Callers may override individual style fields; Theme supplies the rest.
  *

package/manifestUtils/defaultManifestConfigurations/generalContent.js

@@ -12,6 +12,12 @@ const generalContent = () => ({
         label: "Navigation Bar",
         placeholder: "Choose Nav Bar",
       },
+      {
+        key: "hide_menu",
+        type: "switch",
+        label: "Hide Menu",
+        initial_value: false,
+      },
     ],
   },
   styles: {

package/modalState/__tests__/useModalStoreState.test.ts

@@ -0,0 +1,142 @@
+import { act, renderHook } from "@testing-library/react-native";
+
+import { modalStore, useModalStoreState } from "../";
+
+const item = { id: "river-general", name: "Test Modal" };
+const props = { entry: { id: "modal-entry-1" } };
+
+const openModal = () =>
+  act(() => {
+    modalStore.getState().openModal({ item, props } as any);
+  });
+
+// Counts every render of the hook so the tests can assert on subscription
+// behaviour, not just on the returned value.
+const renderModalStoreState = (skipSubscription?: boolean) => {
+  const renders = { count: 0 };
+
+  const view = renderHook(() => {
+    renders.count += 1;
+
+    return skipSubscription === undefined
+      ? useModalStoreState()
+      : useModalStoreState(skipSubscription);
+  });
+
+  return { ...view, renders };
+};
+
+describe("useModalStoreState", () => {
+  afterEach(() => {
+    act(() => {
+      modalStore.getState().dismissModal();
+    });
+  });
+
+  describe("when subscribed (default)", () => {
+    it("returns the live modal state when called without arguments", () => {
+      const { result } = renderModalStoreState();
+
+      expect(result.current.visible).toBe(false);
+
+      openModal();
+
+      expect(result.current.visible).toBe(true);
+      expect(result.current.screen).toBe(item);
+      expect(result.current.props).toBe(props);
+    });
+
+    it("re-renders the consumer when the modal state changes", () => {
+      const { renders } = renderModalStoreState(false);
+
+      const rendersBeforeOpen = renders.count;
+
+      openModal();
+
+      expect(renders.count).toBeGreaterThan(rendersBeforeOpen);
+    });
+
+    // Counterpart to "returns a stable reference across store updates": an open
+    // modal is the one point where a live subscription and a skipped one hold
+    // different references, which is what makes that assertion meaningful.
+    it("returns a new reference while the modal is open", () => {
+      const { result } = renderModalStoreState(false);
+
+      const firstValue = result.current;
+
+      openModal();
+
+      expect(result.current).not.toBe(firstValue);
+    });
+  });
+
+  describe("when subscription is skipped", () => {
+    it("reports an empty modal state even while a modal is open", () => {
+      openModal();
+
+      expect(modalStore.getState().modalState.visible).toBe(true);
+
+      const { result } = renderModalStoreState(true);
+
+      expect(result.current).toMatchObject({
+        visible: false,
+        screen: null,
+        options: {},
+        props: {},
+      });
+    });
+
+    it("does not re-render the consumer when the modal state changes", () => {
+      const { renders } = renderModalStoreState(true);
+
+      const rendersBeforeOpen = renders.count;
+
+      openModal();
+
+      expect(renders.count).toBe(rendersBeforeOpen);
+    });
+
+    // The skipped branch has to hand back a module-level constant. Returning a
+    // fresh object would fail zustand's Object.is check and re-render on every
+    // store notification - the opposite of what skipping is for.
+    it("returns a stable reference across store updates", () => {
+      const { result } = renderModalStoreState(true);
+
+      const firstValue = result.current;
+
+      openModal();
+
+      // Asserted while the modal is open: dismissing resets the store to the
+      // very same initialModalState object, so an end-to-end round trip would
+      // hold this identity even for a live subscription.
+      expect(result.current).toBe(firstValue);
+
+      act(() => {
+        modalStore.getState().dismissModal();
+      });
+
+      expect(result.current).toBe(firstValue);
+    });
+  });
+
+  it("picks up the current modal state when it starts subscribing", () => {
+    let skipSubscription = true;
+
+    const { result, rerender } = renderHook(() =>
+      useModalStoreState(skipSubscription)
+    );
+
+    openModal();
+
+    expect(result.current.visible).toBe(false);
+
+    skipSubscription = false;
+
+    act(() => {
+      rerender(undefined);
+    });
+
+    expect(result.current.visible).toBe(true);
+    expect(result.current.screen).toBe(item);
+  });
+});

package/modalState/store.ts

@@ -98,5 +98,12 @@ export const openBottomSheetModal = ({
   });
 };
 
-export const useModalStoreState = (): ModalState =>
-  useModalStore<ModalState>((state) => state.modalState);
+/**
+ * Pass `skipSubscription` from callers that render outside of a modal: the
+ * selector then returns the stable `initialModalState` reference, so the
+ * component is never re-rendered by modal state it does not read.
+ */
+export const useModalStoreState = (skipSubscription = false): ModalState =>
+  useModalStore<ModalState>((state) =>
+    skipSubscription ? initialModalState : state.modalState
+  );

package/modalState/useBottomSheetContent.ts

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 
 import { MenuItem, modalOrchestrator } from "./ModalOrchestrator";
@@ -45,7 +45,9 @@ export const useBottomSheetContent = (props: Props): Return => {
   // Subscribe to the viewModel state changes
   useEffect(() => {
     return viewModel?.subscribe((nextState) => {
-      setState(nextState);
+      setState((state) => {
+        return state === nextState ? state : nextState;
+      });
     });
   }, [viewModel]);
 
@@ -65,16 +67,19 @@ export const useBottomSheetContent = (props: Props): Return => {
    * - If the item was a leaf action (not a submenu), triggers viewModel.refetch()
    *   so that checkmarks (isSelected) reflect the updated server state.
    */
-  const handleItemPress = async (item: MenuItem) => {
-    const actions = getMenuItemActions(item);
-    const isSubMenu = actions.some(isPresentSubMenuAction);
+  const handleItemPress = useCallback(
+    async (item: MenuItem) => {
+      const actions = getMenuItemActions(item);
+      const isSubMenu = actions.some(isPresentSubMenuAction);
 
-    await onPress(item);
+      await onPress(item);
 
-    if (!isSubMenu) {
-      await viewModel?.refetch();
-    }
-  };
+      if (!isSubMenu) {
+        await viewModel?.refetch();
+      }
+    },
+    [onPress, viewModel]
+  );
 
   const goBackOrClose = React.useCallback(() => {
     if (modalOrchestrator.canGoBack) {
@@ -82,7 +87,7 @@ export const useBottomSheetContent = (props: Props): Return => {
     } else {
       modalOrchestrator.close();
     }
-  }, [modalOrchestrator.canGoBack]);
+  }, []);
 
   return {
     items: viewModel?.editableCollection ? editableItems : state?.items,
@@ -94,7 +99,7 @@ export const useBottomSheetContent = (props: Props): Return => {
     canGoBack: modalOrchestrator.canGoBack,
     handleItemPress,
     goBackOrClose,
-    close: () => modalOrchestrator.close(),
+    close: useCallback(() => modalOrchestrator.close(), []),
     role: state?.role,
     behavior: state?.behavior,
     dynamicCollection: state?.dynamicCollection,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "16.0.0-rc.86",
+  "version": "16.0.0-rc.87",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-rc.86",
+    "@applicaster/applicaster-types": "16.0.0-rc.87",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/reactHooks/navigation/__tests__/index.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
-import { renderHook } from "@testing-library/react-native";
+import { act, render, renderHook } from "@testing-library/react-native";
 import { isNavBarVisible, useRoute } from "../";
 import { Provider } from "react-redux";
 import configureMockStore from "redux-mock-store";
@@ -181,6 +181,45 @@ const hookModalWrapper = ({ children }) => (
   </Provider>
 );
 
+// Reports every render of useRoute so the tests below can assert on route
+// transitions and on subscription behaviour, not just on a one-shot result.
+function RouteProbe({ onRender }: { onRender: (route: any) => void }) {
+  onRender(useRoute());
+
+  return null;
+}
+
+const openRiverModal = () =>
+  act(() => {
+    modalStore.getState().openModal({
+      item: rivers["river-general"] as any,
+      props: { entry: modalEntry },
+    });
+  });
+
+const renderRouteProbe = (pathname: string, onRender: (route: any) => void) => {
+  const tree = (currentPathname: string) => (
+    <Provider store={store}>
+      <ScreenDataContext.Provider value={homeStack.state}>
+        <NavigationContext.Provider value={videoModalNavigator}>
+          <PathnameContext.Provider value={currentPathname}>
+            <RouteProbe onRender={onRender} />
+          </PathnameContext.Provider>
+        </NavigationContext.Provider>
+      </ScreenDataContext.Provider>
+    </Provider>
+  );
+
+  const { rerender } = render(tree(pathname));
+
+  return {
+    navigateTo: (nextPathname: string) =>
+      act(() => {
+        rerender(tree(nextPathname));
+      }),
+  };
+};
+
 describe("navigation", () => {
   describe("useRoute", () => {
     describe("Main stack components", () => {
@@ -279,6 +318,94 @@ describe("navigation", () => {
         );
       });
     });
+
+    describe("store subscriptions", () => {
+      afterEach(() => {
+        act(() => {
+          modalStore.getState().dismissModal();
+        });
+      });
+
+      // Every hook in useRoute must run on every render. When the modal and
+      // hook-modal subscriptions lived inside the route branches, walking a
+      // single mounted component through the route types changed the hook
+      // count and React threw "Rendered more hooks than during the previous
+      // render".
+      it("keeps a stable hook order when the route type changes", () => {
+        let route: any;
+
+        const { navigateTo } = renderRouteProbe(homeStack.route, (current) => {
+          route = current;
+        });
+
+        expect(route.screenData.id).toEqual(entry.id);
+        expect(route.screenData.targetScreen.id).toEqual(screen.id);
+
+        openRiverModal();
+        navigateTo(modalPathname);
+
+        expect(route.pathname).toEqual(modalPathname);
+        expect(route.screenData.id).toEqual(modalEntry.id);
+
+        expect(route.screenData.targetScreen.id).toEqual(
+          rivers["river-general"].id
+        );
+
+        navigateTo(hooksModalPathname);
+
+        expect(route.pathname).toEqual(hooksModalPathname);
+
+        expect(route.screenData.id).toEqual(
+          hookModalContextState.state.screenData.payload.id
+        );
+
+        navigateTo(videoModalPathname);
+
+        expect(route.pathname).toEqual(videoModalPathname);
+        expect(route.screenData.id).toEqual(videoItem.id);
+
+        expect(route.screenData.targetScreen.id).toEqual(
+          rivers["river-player"].id
+        );
+
+        navigateTo(homeStack.route);
+
+        expect(route.pathname).toEqual(homeStack.route);
+        expect(route.screenData.id).toEqual(entry.id);
+      });
+
+      it("does not re-render a non-modal route when modal state changes", () => {
+        let renders = 0;
+
+        renderRouteProbe(homeStack.route, () => {
+          renders += 1;
+        });
+
+        const rendersBeforeOpen = renders;
+
+        openRiverModal();
+
+        expect(renders).toBe(rendersBeforeOpen);
+      });
+
+      it("re-renders a modal route when modal state changes", () => {
+        let route: any;
+
+        renderRouteProbe(modalPathname, (current) => {
+          route = current;
+        });
+
+        expect(route.screenData).toEqual({});
+
+        openRiverModal();
+
+        expect(route.screenData.id).toEqual(modalEntry.id);
+
+        expect(route.screenData.targetScreen.id).toEqual(
+          rivers["river-general"].id
+        );
+      });
+    });
   });
 
   describe("isNavBarVisible", () => {

package/reactHooks/navigation/useRoute.ts

@@ -50,14 +50,18 @@ export const useRoute = (
   const rivers = useRivers();
   const contentTypes = useContentTypes();
 
-  const modalState = useModalStoreState();
-
-  const modalScreenData = modalState.screen;
-
+  // useRoute runs in every cell, so both modal stores are subscribed to only on
+  // the routes that actually read them. Off those routes the selectors return a
+  // stable reference, which keeps an unrelated modal opening or closing from
+  // re-rendering the whole tree.
   const hookModalScreenData = useHookModalScreenData(
     !isHookModalPathname(pathname)
   );
 
+  const modalState = useModalStoreState(!isModalPathname(pathname));
+
+  const modalScreenData = modalState.screen;
+
   const videoModalScreenData =
     navigator?.videoModalState?.item &&
     legacyScreenData(