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

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

@@ -1,7 +1,8 @@
-import { renderHook, waitFor } from "@testing-library/react-native";
+import { renderHook } from "@testing-library/react-hooks";
 import { allFeedsIsReady, useBatchLoading } from "../useBatchLoading";
 import { WrappedWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
+import { waitFor } from "@testing-library/react-native";
 
 jest.mock("../../navigation");
 
@@ -15,11 +16,7 @@ jest.mock(
   })
 );
 
-const getWrapper =
-  (store) =>
-  ({ children }) => (
-    <WrappedWithProviders store={store}>{children}</WrappedWithProviders>
-  );
+const wrapper = WrappedWithProviders;
 
 describe("useBatchLoading", () => {
   const data = [
@@ -66,7 +63,8 @@ describe("useBatchLoading", () => {
     const riverId = "123";
 
     renderHook(() => useBatchLoading(data, { initialBatchSize, riverId }), {
-      wrapper: getWrapper(store),
+      wrapper,
+      initialProps: { store },
     });
 
     const actions = (appStore.getStore() as any).getActions();
@@ -86,7 +84,7 @@ describe("useBatchLoading", () => {
     });
   });
 
-  it("loadPipesData start loading new feed when 1 feed is done loading and 1 is in loading state", async () => {
+  it("loadPipesData start loading new feed when 1 feed is done loading and 1 is in loading state", () => {
     const store = {
       zappPipes: {
         url1: {
@@ -112,14 +110,13 @@ describe("useBatchLoading", () => {
     const riverId = "123";
 
     renderHook(() => useBatchLoading(data, { initialBatchSize, riverId }), {
-      wrapper: getWrapper(store),
+      wrapper,
+      initialProps: { store },
     });
 
     const actions = (appStore.getStore() as any).getActions();
 
-    await waitFor(() => {
-      expect(actions).toHaveLength(1);
-    });
+    expect(actions).toHaveLength(1);
 
     expect(actions[0]).toMatchObject({
       type: "ZAPP_PIPES_REQUEST_START",
@@ -127,7 +124,7 @@ describe("useBatchLoading", () => {
     });
   });
 
-  it("loadPipesData has been called when no data cached", async () => {
+  it("loadPipesData has been called when no data cached", () => {
     const store = {
       zappPipes: {},
       test: "true",
@@ -137,17 +134,16 @@ describe("useBatchLoading", () => {
     const riverId = "123";
 
     renderHook(() => useBatchLoading(data, { initialBatchSize, riverId }), {
-      wrapper: getWrapper(store),
+      wrapper,
+      initialProps: { store },
     });
 
     const actions = (appStore.getStore() as any).getActions();
 
-    await waitFor(() => {
-      expect(actions).toHaveLength(3);
-    });
+    expect(actions).toHaveLength(3);
   });
 
-  it("initial batch ready when all initial items loaded", async () => {
+  it("initial batch ready when all initial items loaded", () => {
     const store = {
       zappPipes: {
         url1: {
@@ -173,15 +169,13 @@ describe("useBatchLoading", () => {
 
     const { result } = renderHook(
       () => useBatchLoading(data, { initialBatchSize, riverId }),
-      { wrapper: getWrapper(store) }
+      { wrapper, initialProps: { store } }
     );
 
-    await waitFor(() => {
-      expect(result.current).toBe(true);
-    });
+    expect(result.current).toBe(true);
   });
 
-  it("gallery-qb: loadPipesData should be called only once for first component in the gallery", async () => {
+  it("gallery-qb: loadPipesData should be called only once for first component in the gallery", () => {
     const store = {
       zappPipes: {},
       test: "true",
@@ -204,17 +198,16 @@ describe("useBatchLoading", () => {
     ];
 
     renderHook(() => useBatchLoading(data, { initialBatchSize, riverId }), {
-      wrapper: getWrapper(store),
+      wrapper,
+      initialProps: { store },
     });
 
     const actions = (appStore.getStore() as any).getActions();
 
-    await waitFor(() => {
-      expect(actions).toHaveLength(1);
-    });
+    expect(actions).toHaveLength(1);
   });
 
-  it("gallery-qb: initial batch ready when all initial items loaded", async () => {
+  it("gallery-qb: initial batch ready when all initial items loaded", () => {
     const store = {
       zappPipes: {
         url1: {
@@ -240,12 +233,10 @@ describe("useBatchLoading", () => {
 
     const { result } = renderHook(
       () => useBatchLoading(data, { initialBatchSize, riverId }),
-      { wrapper: getWrapper(store) }
+      { wrapper, initialProps: { store } }
     );
 
-    await waitFor(() => {
-      expect(result.current).toBe(true);
-    });
+    expect(result.current).toBe(true);
   });
 });
 

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

@@ -1,4 +1,4 @@
-import { renderHook, waitFor } from "@testing-library/react-native";
+import { renderHook } from "@testing-library/react-hooks";
 import { encodeParams } from "@applicaster/zapp-pipes-v2-client/src/utils";
 
 const appData = {
@@ -42,26 +42,26 @@ describe("useBuildPipesUrl", () => {
       build: jest.fn(() => Promise.resolve(buildResult)),
     };
 
-    const { result } = renderHook(() =>
+    const { result, waitForNextUpdate } = renderHook(() =>
       useBuildPipesUrl({ url, mapping, requestBuilder: mockedRequestBuilder })
     );
 
     expect(result.current.url).toBe("http://foo.com/show/show-1");
     expect(result.current.requestParams).toBeNull();
 
-    await waitFor(() => {
-      expect(result.current.requestParams).toEqual(
-        expect.objectContaining({
-          params: {
-            version: appData.version_name,
-            ctx: encodeParams({ platform: appData.platform }),
-          },
-          headers: {
-            SDK: appData.sdk_version,
-          },
-        })
-      );
-    });
+    await waitForNextUpdate();
+
+    expect(result.current.requestParams).toEqual(
+      expect.objectContaining({
+        params: {
+          version: appData.version_name,
+          ctx: encodeParams({ platform: appData.platform }),
+        },
+        headers: {
+          SDK: appData.sdk_version,
+        },
+      })
+    );
   });
 
   it("returns empty object if url is not in endpoints", async () => {
@@ -81,15 +81,15 @@ describe("useBuildPipesUrl", () => {
       build: jest.fn(() => Promise.resolve(buildResult)),
     };
 
-    const { result } = renderHook(() =>
+    const { result, waitForNextUpdate } = renderHook(() =>
       useBuildPipesUrl({ url, mapping, requestBuilder: mockedRequestBuilder })
     );
 
     expect(result.current.url).toBe("http://foobar.com/show-1");
     expect(result.current.requestParams).toBeNull();
 
-    await waitFor(() => {
-      expect(result.current.requestParams).toEqual({});
-    });
+    await waitForNextUpdate();
+
+    expect(result.current.requestParams).toEqual({});
   });
 });

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();