@applicaster/zapp-react-native-utils 15.0.0-rc.98 → 15.1.0-alpha.1852552014

package/reactHooks/feed/__tests__/useEntryScreenId.test.tsx

@@ -1,6 +1,6 @@
 import * as R from "ramda";
 import React from "react";
-import { renderHook } from "@testing-library/react-native";
+import { renderHook } from "@testing-library/react-hooks";
 import { Provider } from "react-redux";
 import { createStore } from "redux";
 
@@ -10,9 +10,6 @@ describe("useEntryScreenId", () => {
   const mappedScreenId = "mapped-id";
 
   const initialState = {
-    rivers: {
-      [mappedScreenId]: { id: mappedScreenId, type: "any" },
-    },
     contentTypes: { mappedEntry: { screen_id: mappedScreenId } },
   };
 

package/reactHooks/feed/__tests__/useFeedLoader.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-native";
+import { renderHook } from "@testing-library/react-hooks";
 import * as R from "ramda";
 import * as zappPipesModule from "@applicaster/zapp-react-native-redux/ZappPipes";
 import * as reactReduxModules from "react-redux";
@@ -50,16 +50,6 @@ const mockZappPipesData = {
   url: "test://testfakeurl",
 };
 
-const createWrapper = (
-  getStore: () => any
-): React.FC<{ children: React.ReactNode }> => {
-  const Wrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-    <WrappedWithProviders store={getStore()}>{children}</WrappedWithProviders>
-  );
-
-  return Wrapper;
-};
-
 describe("useFeedLoader", () => {
   describe("with cached feed url", () => {
     const store = {
@@ -67,7 +57,11 @@ describe("useFeedLoader", () => {
       zappPipes: { "test://testfakeurl": mockZappPipesData },
     };
 
-    const wrapper = createWrapper(() => store);
+    const wrapper: React.FC<any> = ({ children, ...props }) => (
+      <WrappedWithProviders store={props.store || store}>
+        {children}
+      </WrappedWithProviders>
+    );
 
     it("returns cached feed", () => {
       const { result } = renderHook(
@@ -115,6 +109,12 @@ describe("useFeedLoader", () => {
   describe("without cached feeds", () => {
     const feedUrl = "test://testfakeurl2";
 
+    const wrapper: React.FC<any> = ({ children, ...props }) => (
+      <WrappedWithProviders store={props.store}>
+        {children}
+      </WrappedWithProviders>
+    );
+
     it("It loads data for new url and returns it", () => {
       const useDispatchSpy = jest
         .spyOn(reactReduxModules, "useDispatch")
@@ -129,12 +129,9 @@ describe("useFeedLoader", () => {
         zappPipes: { "test://testfakeurl": "foobar" },
       };
 
-      let store = initialStore;
-      const wrapper = createWrapper(() => store);
-
       const { result, rerender } = renderHook(
-        ({ feedUrl: url }) => useFeedLoader({ feedUrl: url }),
-        { wrapper, initialProps: { feedUrl } }
+        () => useFeedLoader({ feedUrl: "test://testfakeurl2" }),
+        { wrapper, initialProps: { store: initialStore } }
       );
 
       expect(result.current.data).toBeNull();
@@ -153,8 +150,7 @@ describe("useFeedLoader", () => {
         zappPipes: { "test://testfakeurl2": mockZappPipesData },
       };
 
-      store = store2;
-      rerender({ feedUrl });
+      rerender({ store: store2 });
 
       expect(R.omit(["reloadData", "loadNext"], result.current)).toEqual(
         mockZappPipesData
@@ -178,12 +174,9 @@ describe("useFeedLoader", () => {
         zappPipes: { "test://testfakeurl": "foobar" },
       };
 
-      let store = initialStore;
-      const wrapper = createWrapper(() => store);
-
       const { result, rerender } = renderHook(
-        ({ feedUrl: url }) => useFeedLoader({ feedUrl: url }),
-        { wrapper, initialProps: { feedUrl } }
+        () => useFeedLoader({ feedUrl: "test://testfakeurl2" }),
+        { wrapper, initialProps: { store: initialStore } }
       );
 
       expect(result.current.data).toBeNull();
@@ -205,8 +198,7 @@ describe("useFeedLoader", () => {
         zappPipes: { "test://testfakeurl2": mockZappPipesData },
       };
 
-      store = store2;
-      rerender({ feedUrl });
+      rerender({ store: store2 });
 
       loadPipesDataSpy.mockRestore();
       useDispatchSpy.mockRestore();
@@ -217,6 +209,12 @@ describe("useFeedLoader", () => {
     const feedUrl = "test://testfakeurl";
     const feedUrlWithNext = "test://withnexttestfakeurl";
 
+    const wrapper: React.FC<any> = ({ children, ...props }) => (
+      <WrappedWithProviders store={props.store || {}}>
+        {children}
+      </WrappedWithProviders>
+    );
+
     describe("reloadData", () => {
       it("Tries to reload data in the redux store", () => {
         const loadPipesDataSpy = jest
@@ -232,17 +230,10 @@ describe("useFeedLoader", () => {
           zappPipes: { [feedUrl]: "foobar" },
         };
 
-        const store = initialStore;
-
-        const wrapper = createWrapper(() => store);
-
-        const { result } = renderHook(
-          ({ feedUrl: url }) => useFeedLoader({ feedUrl: url }),
-          {
-            wrapper,
-            initialProps: { feedUrl },
-          }
-        );
+        const { result } = renderHook(() => useFeedLoader({ feedUrl }), {
+          wrapper,
+          initialProps: { store: initialStore },
+        });
 
         const { reloadData } = result.current;
 
@@ -288,14 +279,11 @@ describe("useFeedLoader", () => {
           zappPipes: { [feedUrlWithNext]: { data: { next: nextUrl } } },
         };
 
-        const store = initialStore;
-        const wrapper = createWrapper(() => store);
-
         const { result } = renderHook(
-          ({ feedUrl: url }) => useFeedLoader({ feedUrl: url }),
+          () => useFeedLoader({ feedUrl: feedUrlWithNext }),
           {
             wrapper,
-            initialProps: { feedUrl: feedUrlWithNext },
+            initialProps: { store: initialStore },
           }
         );
 

package/reactHooks/feed/__tests__/useFeedRefresh.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-native";
+import { renderHook } from "@testing-library/react-hooks";
 
 jest.useFakeTimers();
 

package/reactHooks/feed/__tests__/useInflatedUrl.test.tsx

@@ -214,7 +214,7 @@ describe("getSearchContext", () => {
 });
 
 describe("useGetUrlInflater", () => {
-  const { renderHook } = require("@testing-library/react-native");
+  const { renderHook } = require("@testing-library/react-hooks");
 
   it("returns original url when mapping is not provided", () => {
     const { result } = renderHook(() => useGetUrlInflater(), {

package/reactHooks/feed/useBatchLoading.ts

@@ -151,13 +151,7 @@ export const useBatchLoading = (
         }
       }
     });
-  }, [
-    batchComponents,
-    feeds,
-    getUrl,
-    loadPipesDataDispatcher,
-    options.riverId,
-  ]);
+  }, [feedUrls, feeds, loadPipesDataDispatcher]);
 
   React.useEffect(() => {
     runBatchLoading();

package/reactHooks/feed/useEntryScreenId.ts

@@ -1,7 +1,7 @@
-import { useContentTypes } from "@applicaster/zapp-react-native-redux";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 export const useEntryScreenId = (entry?: ZappEntry): string | undefined => {
-  const contentTypes = useContentTypes();
+  const { contentTypes } = usePickFromState("contentTypes");
 
   if (!entry) {
     return;

package/reactHooks/feed/useInflatedUrl.ts

@@ -45,7 +45,7 @@ interface GetInflatedDataSourceUrl {
   (properties: {
     source?: string;
     contexts: {
-      entry?: ZappEntry;
+      entry?: ZappEntry & { parent?: ZappEntry };
       screen?: ZappRiver;
       search?: object | string;
     };

package/reactHooks/feed/usePipesCacheReset.ts

@@ -34,9 +34,7 @@ export const usePipesCacheReset = (riverId, riverComponents) => {
             component
           );
 
-          if (url) {
-            dispatch(clearPipesData(url, { riverId }));
-          }
+          dispatch(clearPipesData(url, { riverId }));
         }
       });
     };

package/reactHooks/flatList/useLoadNextPageIfNeeded.ts

@@ -1,8 +1,10 @@
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import React from "react";
 
+type Return = (index: number) => void;
+
 type Predicate = (
-  entryLength: number,
+  entry: ZappUIComponentProps["zappPipesData"]["data"]["entry"],
   index: number,
   numberOfColumns: number
 ) => boolean;
@@ -10,15 +12,19 @@ type Predicate = (
 type Props = {
   ifNeeded: Predicate;
   loadNextData: () => void;
-  entryLength: number;
+  entry: ZappUIComponentProps["zappPipesData"]["data"]["entry"];
   numberOfColumns?: number;
 };
 
 const handleLoadNextPage =
   (
-    ifNeeded: Predicate,
+    ifNeeded: (
+      entry: ZappEntry[],
+      index: number,
+      numberOfColumns?: number
+    ) => boolean,
     loadNextData: () => void,
-    entryLength: number,
+    entry: ZappEntry[],
     numberOfColumns
   ) =>
   (index: number) => {
@@ -26,7 +32,7 @@ const handleLoadNextPage =
      * Lazy-Loading, invoke nextLoadData if we reach the end of the List
      */
 
-    if (ifNeeded(entryLength, index, numberOfColumns)) {
+    if (ifNeeded(entry, index, numberOfColumns)) {
       loadNextData();
     }
   };
@@ -34,14 +40,11 @@ const handleLoadNextPage =
 export const useLoadNextPageIfNeeded = ({
   ifNeeded,
   loadNextData = noop,
-  entryLength,
+  entry,
   numberOfColumns = 0,
-}: Props) => {
-  const memoFn = React.useMemo(
-    () =>
-      handleLoadNextPage(ifNeeded, loadNextData, entryLength, numberOfColumns),
-    [ifNeeded, loadNextData, entryLength, numberOfColumns]
+}: Props): Return => {
+  return React.useCallback(
+    handleLoadNextPage(ifNeeded, loadNextData, entry, numberOfColumns),
+    [ifNeeded, loadNextData, entry, numberOfColumns]
   );
-
-  return memoFn;
 };

package/reactHooks/index.ts

@@ -15,3 +15,5 @@ export * from "./device";
 export * from "./screen";
 
 export * from "./state";
+
+export * from "./events";

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

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { cleanup, renderHook } from "@testing-library/react-native";
+import { cleanup, renderHook } from "@testing-library/react-hooks";
 import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
 

package/reactHooks/layout/__tests__/useLayoutVersion.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-native";
+import { renderHook } from "@testing-library/react-hooks";
 import configureStore from "redux-mock-store";
 
 const mockStore = configureStore();

package/reactHooks/layout/useDimensions/__tests__/{useDimensions.test.tsx → useDimensions.test.ts}

@@ -1,10 +1,16 @@
-import React from "react";
-import { renderHook } from "@testing-library/react-native";
+import { renderHook } from "@testing-library/react-hooks";
 import { Dimensions, StatusBar } from "react-native";
 import { useDimensions } from "../useDimensions";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux";
 
 import { useIsScreenActive } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive";
-import { WrappedWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+
+jest.mock("@applicaster/zapp-react-native-redux/hooks", () => {
+  return {
+    ...jest.requireActual("@applicaster/zapp-react-native-redux/hooks"),
+    usePickFromState: jest.fn(),
+  };
+});
 
 jest.mock(
   "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive",
@@ -36,22 +42,12 @@ describe("useDimensions", () => {
 
   beforeEach(() => {
     StatusBar.currentHeight = 20;
+    (usePickFromState as jest.Mock).mockReturnValue({ appData: mockAppData });
   });
 
   it("returns correct initial dimensions", () => {
-    const { result } = renderHook(
-      () => useDimensions("window", { fullDimensions: false }),
-      {
-        wrapper: ({ children }) => (
-          <WrappedWithProviders
-            store={{
-              appData: mockAppData,
-            }}
-          >
-            {children}
-          </WrappedWithProviders>
-        ),
-      }
+    const { result } = renderHook(() =>
+      useDimensions("window", { fullDimensions: false })
     );
 
     expect(result.current).toMatchObject({
@@ -60,17 +56,7 @@ describe("useDimensions", () => {
   });
 
   it("calls handler on mount", () => {
-    renderHook(() => useDimensions("window", { fullDimensions: false }), {
-      wrapper: ({ children }) => (
-        <WrappedWithProviders
-          store={{
-            appData: mockAppData,
-          }}
-        >
-          {children}
-        </WrappedWithProviders>
-      ),
-    });
+    renderHook(() => useDimensions("window", { fullDimensions: false }));
 
     expect(Dimensions.addEventListener).toHaveBeenCalledWith(
       "change",
@@ -79,23 +65,12 @@ describe("useDimensions", () => {
   });
 
   it("calls handler on isActive change", () => {
-    const { rerender } = renderHook(
-      () => useDimensions("window", { fullDimensions: false }),
-      {
-        wrapper: ({ children }) => (
-          <WrappedWithProviders
-            store={{
-              appData: mockAppData,
-            }}
-          >
-            {children}
-          </WrappedWithProviders>
-        ),
-      }
+    const { rerender } = renderHook(() =>
+      useDimensions("window", { fullDimensions: false })
     );
 
     (useIsScreenActive as jest.Mock).mockReturnValue(false);
-    rerender({});
+    rerender();
 
     expect(Dimensions.addEventListener).toHaveBeenCalledWith(
       "change",
@@ -104,19 +79,8 @@ describe("useDimensions", () => {
   });
 
   it("handles fullDimensions option", () => {
-    const { result } = renderHook(
-      () => useDimensions("window", { fullDimensions: true }),
-      {
-        wrapper: ({ children }) => (
-          <WrappedWithProviders
-            store={{
-              appData: mockAppData,
-            }}
-          >
-            {children}
-          </WrappedWithProviders>
-        ),
-      }
+    const { result } = renderHook(() =>
+      useDimensions("window", { fullDimensions: true })
     );
 
     expect(result.current).toMatchObject({
@@ -127,19 +91,8 @@ describe("useDimensions", () => {
   });
 
   it("handles excludeStatusBar option", () => {
-    const { result } = renderHook(
-      () => useDimensions("window", { excludeStatusBar: true }),
-      {
-        wrapper: ({ children }) => (
-          <WrappedWithProviders
-            store={{
-              appData: mockAppData,
-            }}
-          >
-            {children}
-          </WrappedWithProviders>
-        ),
-      }
+    const { result } = renderHook(() =>
+      useDimensions("window", { excludeStatusBar: true })
     );
 
     expect(result.current.height).toBe(
@@ -148,19 +101,8 @@ describe("useDimensions", () => {
   });
 
   it("handles rounded option", () => {
-    const { result } = renderHook(
-      () => useDimensions("window", { rounded: true }),
-      {
-        wrapper: ({ children }) => (
-          <WrappedWithProviders
-            store={{
-              appData: mockAppData,
-            }}
-          >
-            {children}
-          </WrappedWithProviders>
-        ),
-      }
+    const { result } = renderHook(() =>
+      useDimensions("window", { rounded: true })
     );
 
     expect(result.current.width).toBe(Math.ceil(mockDimensions.width));
@@ -168,19 +110,8 @@ describe("useDimensions", () => {
   });
 
   it("handles deviceInfo option", () => {
-    const { result } = renderHook(
-      () => useDimensions("window", { deviceInfo: true }),
-      {
-        wrapper: ({ children }) => (
-          <WrappedWithProviders
-            store={{
-              appData: mockAppData,
-            }}
-          >
-            {children}
-          </WrappedWithProviders>
-        ),
-      }
+    const { result } = renderHook(() =>
+      useDimensions("window", { deviceInfo: true })
     );
 
     expect(result.current.deviceInfo).toMatchObject({
@@ -190,18 +121,7 @@ describe("useDimensions", () => {
 
   it("logs deprecation warning when fullDimensions is boolean", () => {
     const consoleWarnSpy = jest.spyOn(console, "warn").mockImplementation();
-
-    renderHook(() => useDimensions("window", true), {
-      wrapper: ({ children }) => (
-        <WrappedWithProviders
-          store={{
-            appData: mockAppData,
-          }}
-        >
-          {children}
-        </WrappedWithProviders>
-      ),
-    });
+    renderHook(() => useDimensions("window", true));
 
     expect(consoleWarnSpy).toHaveBeenCalledWith(
       "Deprecation Warning\nSecond argument is now the options object. {fullDimensions: boolean, ...}"

package/reactHooks/layout/useDimensions/useDimensions.ts

@@ -3,7 +3,7 @@ import { useLayoutEffect, useMemo, useRef, useState } from "react";
 import * as R from "ramda";
 
 import { Dimensions, Platform, StatusBar } from "react-native";
-import { useAppData } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { isTV } from "../../../reactUtils";
 
@@ -37,7 +37,7 @@ export const useDimensions: UseDimensions = (
 ) => {
   const statusBarHeight = StatusBar?.currentHeight;
   const isActive = useIsScreenActive();
-  const appData = useAppData();
+  const { appData } = usePickFromState(["appData"]);
 
   if (typeof fullDimensions === "boolean") {
     // eslint-disable-next-line no-console

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 { renderHook } from "@testing-library/react-hooks";
 import { isNavBarVisible, useRoute } from "../";
 import { Provider } from "react-redux";
 import configureMockStore from "redux-mock-store";
@@ -86,11 +86,11 @@ const hookModalContextState = {
 };
 
 const hooksModalPathname = `${ROUTE_TYPES.HOOKS_MODAL}/${hookModalContextState.state.screenData.payload.id}`;
-const videoModalPathname = `${ROUTE_TYPES.VIDEO_MODAL}/${videoModalNavigator.videoModalState.item.id}`;
 
 jest.mock(
   "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext",
   () => {
+    // Define state inside mock factory to avoid hoisting issues
     const mockState = {
       isRunningInBackground: false,
       setIsRunningInBackground: jest.fn(),
@@ -111,6 +111,7 @@ jest.mock(
       return selector ? selector(mockState) : mockState;
     }) as jest.MockedFunction<any> & { getState: () => typeof mockState };
 
+    // Add getState method to the mock hook (Zustand stores have this)
     mockHook.getState = jest.fn(() => mockState);
 
     return {
@@ -120,6 +121,7 @@ jest.mock(
   }
 );
 
+const videoModalPathname = `${ROUTE_TYPES.VIDEO_MODAL}/${videoModalNavigator.videoModalState.item.id}`;
 const mockStore = configureMockStore();
 
 const store = mockStore({

package/reactHooks/navigation/index.ts

@@ -4,7 +4,7 @@ import { shallow } from "zustand/shallow";
 
 import {
   useContentTypes,
-  usePlugins,
+  usePickFromState,
 } from "@applicaster/zapp-react-native-redux/hooks";
 import { HooksManager } from "@applicaster/zapp-react-native-utils/appUtils/HooksManager";
 
@@ -17,8 +17,6 @@ import { useConnectionInfo } from "../connection";
 import { isTV, isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { pick } from "@applicaster/zapp-react-native-utils/utils";
 import { useNavbarState } from "../screen";
-import { useRivers } from "../state";
-import { useLayoutVersion } from "../layout";
 
 export { useNavigation } from "./useNavigation";
 
@@ -181,10 +179,11 @@ export const useZappHooksForEntry = (
     shallow
   );
 
-  const plugins = usePlugins();
-  const rivers = useRivers();
-
-  const layoutVersion = useLayoutVersion();
+  const {
+    appData: { layoutVersion },
+    rivers,
+    plugins,
+  } = usePickFromState(["appData", "rivers", "plugins"]);
 
   const contentTypes = useContentTypes();
 

package/reactHooks/navigation/useRoute.ts

@@ -3,10 +3,7 @@
 
 import { useContext } from "react";
 
-import {
-  useContentTypes,
-  usePlugins,
-} from "@applicaster/zapp-react-native-redux/hooks";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { legacyScreenData } from "@applicaster/quick-brick-core/App/NavigationProvider/utils";
 
@@ -17,7 +14,6 @@ import { useNavigation } from "./useNavigation";
 import { useModalStoreState } from "../../modalState";
 import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 import { usePathname } from "./usePathname";
-import { useRivers } from "../state";
 
 // starts with modal/
 const isModalPathname = (pathname: string) => /^modal\//.test(pathname);
@@ -46,9 +42,11 @@ export const useRoute = (
     ? legacyScreenData(screenContext)
     : screenContext;
 
-  const plugins = usePlugins();
-  const rivers = useRivers();
-  const contentTypes = useContentTypes();
+  const { plugins, contentTypes, rivers } = usePickFromState([
+    "plugins",
+    "rivers",
+    "contentTypes",
+  ]);
 
   const modalState = useModalStoreState();