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

package/reactHooks/feed/__tests__/{useInflatedUrl.test.ts → useInflatedUrl.test.tsx}

@@ -1,3 +1,34 @@
+import React from "react";
+
+import { WrappedWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+
+import {
+  getInflatedDataSourceUrl,
+  getSearchContext,
+  useGetUrlInflater,
+} from "../useInflatedUrl";
+
+import { reactHooksLogger } from "../../logger";
+
+jest.mock("../../navigation", () => ({
+  useRoute: () => ({ pathname: "/mock/path" }),
+}));
+
+// mock contexts hooks
+jest.mock("@applicaster/zapp-react-native-ui-components/Contexts", () => ({
+  ZappPipesEntryContext: {
+    useZappPipesContext: () => [
+      { id: "entry-1", extensions: { showId: "A123" } },
+    ],
+  },
+  ZappPipesSearchContext: {
+    useZappPipesContext: () => ["user%20query"],
+  },
+  ZappPipesScreenContext: {
+    useZappPipesContext: () => [{ id: "screen-1" }],
+  },
+}));
+
 jest.mock("../../logger", () => ({
   reactHooksLogger: {
     warning: jest.fn(),
@@ -5,13 +36,6 @@ jest.mock("../../logger", () => ({
   },
 }));
 
-const {
-  getInflatedDataSourceUrl,
-  getSearchContext,
-} = require("../useInflatedUrl");
-
-const { reactHooksLogger } = require("../../logger");
-
 let mockStore;
 
 describe("getInflatedDataSourceUrl", () => {
@@ -188,3 +212,34 @@ describe("getSearchContext", () => {
     expect(result).toHaveProperty(mapping.queryParam.property, searchContext);
   });
 });
+
+describe("useGetUrlInflater", () => {
+  const { renderHook } = require("@testing-library/react-native");
+
+  it("returns original url when mapping is not provided", () => {
+    const { result } = renderHook(() => useGetUrlInflater(), {
+      wrapper: WrappedWithProviders,
+    });
+
+    const src = "https://foo.com/feed";
+    expect(result.current(src)).toBe(src);
+  });
+
+  it("inflates url using entry/search/screen contexts when mapping provided", () => {
+    const { result } = renderHook(() => useGetUrlInflater(), {
+      wrapper: ({ children }) => (
+        <WrappedWithProviders>{children}</WrappedWithProviders>
+      ),
+    });
+
+    const source = "https://foo.com/shows/{{showId}}?q={{q}}";
+
+    const mapping = {
+      showId: { source: "entry", property: "extensions.showId" },
+      q: { source: "search", property: "q" },
+    };
+
+    const url = result.current(source, mapping);
+    expect(url).toBe("https://foo.com/shows/A123?q=user%20query");
+  });
+});

package/reactHooks/feed/useBatchLoading.ts

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

package/reactHooks/feed/useEntryScreenId.ts

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

package/reactHooks/feed/useFeedLoader.tsx

@@ -37,15 +37,6 @@ export const useFeedLoader = ({
   mapping,
   pipesOptions = {},
 }: Props): FeedLoaderResponse => {
-  useEffect(() => {
-    if (!feedUrl) {
-      logger.warning({
-        message: "Required parameter feedUrl is missing",
-        data: { feedUrl },
-      });
-    }
-  }, []);
-
   const isInitialRender = useIsInitialRender();
 
   const callableFeedUrl = useInflatedUrl({ feedUrl, mapping });

package/reactHooks/feed/useInflatedUrl.ts

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useCallback, useMemo, useRef } from "react";
 import * as R from "ramda";
 
 import {
@@ -18,6 +18,7 @@ import {
 } from "@applicaster/zapp-pipes-v2-client";
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 import { ENDPOINT_TAGS } from "../../types";
+import { isNilOrEmpty } from "../../reactUtils/helpers";
 
 /**
  * will match any occurrence in a string of one or more word characters
@@ -75,15 +76,19 @@ export const getInflatedDataSourceUrl: GetInflatedDataSourceUrl = ({
    * https://foo.com/shows/A1234
    */
 
-  if (!source) {
-    // eslint-disable-next-line no-console
-    console.error("source is empty", {
-      source,
-      contexts,
-      mapping,
-    });
+  if (!isNilOrEmpty(mapping)) {
+    if (!source) {
+      if (__DEV__) {
+        // eslint-disable-next-line no-console
+        throw new Error(
+          "getInflatedDataSourceUrl: source is empty while mapping is provided"
+        );
+      }
 
-    return null;
+      return null;
+    }
+  } else {
+    return source || null;
   }
 
   // Hack because in tv we expect to get key names instead of values from the fake entry
@@ -164,7 +169,7 @@ const encodeIfNeeded: (string) => string = R.tryCatch(
 
 export function getSearchContext(
   searchContext: string,
-  mapping: ZappTypeMapping
+  mapping: Nullable<ZappTypeMapping>
 ) {
   if (!mapping) {
     return {};
@@ -178,6 +183,45 @@ export function getSearchContext(
   return { [property]: encodeIfNeeded(searchContext) };
 }
 
+/**
+ * Hook returns a function that replace placeholders with context values
+ * @returns function that inflates urls based on contexts
+ */
+export const useGetUrlInflater = () => {
+  const { pathname } = useRoute();
+
+  const [entryContext] = ZappPipesEntryContext.useZappPipesContext(pathname);
+  const [searchContext] = ZappPipesSearchContext.useZappPipesContext();
+  const [screenContext] = ZappPipesScreenContext.useZappPipesContext();
+
+  const entryContextRef = useRef(entryContext);
+  entryContextRef.current = entryContext;
+
+  const screenContextRef = useRef(screenContext);
+  screenContextRef.current = screenContext;
+
+  const searchContextRef = useRef(searchContext);
+  searchContextRef.current = searchContext;
+
+  return useCallback(
+    (
+      feedUrl: Nullable<string>,
+      mapping?: Nullable<ZappTypeMapping>
+    ): Nullable<string> => {
+      return getInflatedDataSourceUrl({
+        source: feedUrl,
+        contexts: {
+          entry: entryContextRef.current,
+          screen: screenContextRef.current,
+          search: getSearchContext(searchContextRef.current, mapping),
+        },
+        mapping,
+      });
+    },
+    []
+  );
+};
+
 export function useInflatedUrl({
   feedUrl,
   mapping,
@@ -185,36 +229,12 @@ export function useInflatedUrl({
   feedUrl?: string;
   mapping?: ZappTypeMapping;
 }) {
-  const { pathname } = useRoute();
-
-  const [entryContext] = ZappPipesEntryContext.useZappPipesContext(pathname);
-  const [searchContext] = ZappPipesSearchContext.useZappPipesContext();
-  const [screenContext] = ZappPipesScreenContext.useZappPipesContext();
+  const urlInflater = useGetUrlInflater();
 
   const url = useMemo(
-    () =>
-      mapping
-        ? getInflatedDataSourceUrl({
-            source: feedUrl,
-            contexts: {
-              entry: entryContext,
-              screen: screenContext,
-              search: getSearchContext(searchContext, mapping),
-            },
-            mapping,
-          })
-        : feedUrl,
-    [feedUrl, mapping]
+    () => urlInflater(feedUrl, mapping),
+    [urlInflater, feedUrl, mapping]
   );
 
-  if (!feedUrl) {
-    logger.warning({
-      message: "Required parameter feedUrl is missing",
-      data: { feedUrl },
-    });
-
-    return null;
-  }
-
   return url;
 }

package/reactHooks/feed/usePipesCacheReset.ts

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

package/reactHooks/flatList/useLoadNextPageIfNeeded.ts

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

package/reactHooks/hookModal/hooks/useHookModalScreenData.ts

@@ -1,20 +1,24 @@
 import { reactHooksLogger } from "../../logger";
-import { useZappHooksModalState } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal/hooks/useZappHooksModalState";
+import { useZappHookModalStore } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext";
 
 const logger = reactHooksLogger.addSubsystem("useHookModalScreenData");
 
 type VariousScreenData = LegacyNavigationScreenData | ZappRiver | ZappEntry;
 
-export const useHookModalScreenData = (): VariousScreenData | undefined => {
-  const hookModalState = useZappHooksModalState();
+export const useHookModalScreenData = (
+  skipSubscription: boolean
+): VariousScreenData | undefined => {
+  const hookModalState = useZappHookModalStore((state) =>
+    skipSubscription ? undefined : state.state
+  );
 
-  if (!hookModalState.state?.screenData) {
+  if (!hookModalState?.screenData) {
     return;
   }
 
   try {
-    const screenData = hookModalState.state.screenData?.payload;
-    const hookPlugin = hookModalState.state.screenData.hookPlugin;
+    const screenData = hookModalState.screenData?.payload;
+    const hookPlugin = hookModalState.screenData.hookPlugin;
 
     if (hookPlugin?.screen_id) {
       return {
@@ -23,7 +27,7 @@ export const useHookModalScreenData = (): VariousScreenData | undefined => {
       };
     }
 
-    return hookModalState.state.screenData?.payload;
+    return hookModalState.screenData?.payload;
   } catch (error) {
     logger.error({
       message: "Hook modal screen data creation failed",
@@ -34,6 +38,6 @@ export const useHookModalScreenData = (): VariousScreenData | undefined => {
       jsOnly: true,
     });
 
-    return hookModalState.state.screenData?.payload;
+    return hookModalState.screenData?.payload;
   }
 };

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-hooks";
+import { cleanup, renderHook } from "@testing-library/react-native";
 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-hooks";
+import { renderHook } from "@testing-library/react-native";
 import configureStore from "redux-mock-store";
 
 const mockStore = configureStore();

package/reactHooks/layout/index.ts

@@ -44,7 +44,7 @@ export function useStatusBarHeight() {
 
   return platformSelect({
     ios: StatusBarHeight,
-    android: StatusBar.currentHeight,
+    android: StatusBar.currentHeight ?? 0,
     default: 0,
   });
 }

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

@@ -1,16 +1,10 @@
-import { renderHook } from "@testing-library/react-hooks";
+import React from "react";
+import { renderHook } from "@testing-library/react-native";
 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";
-
-jest.mock("@applicaster/zapp-react-native-redux/hooks", () => {
-  return {
-    ...jest.requireActual("@applicaster/zapp-react-native-redux/hooks"),
-    usePickFromState: jest.fn(),
-  };
-});
+import { WrappedWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 
 jest.mock(
   "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive",
@@ -42,12 +36,22 @@ 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 })
+    const { result } = renderHook(
+      () => useDimensions("window", { fullDimensions: false }),
+      {
+        wrapper: ({ children }) => (
+          <WrappedWithProviders
+            store={{
+              appData: mockAppData,
+            }}
+          >
+            {children}
+          </WrappedWithProviders>
+        ),
+      }
     );
 
     expect(result.current).toMatchObject({
@@ -56,7 +60,17 @@ describe("useDimensions", () => {
   });
 
   it("calls handler on mount", () => {
-    renderHook(() => useDimensions("window", { fullDimensions: false }));
+    renderHook(() => useDimensions("window", { fullDimensions: false }), {
+      wrapper: ({ children }) => (
+        <WrappedWithProviders
+          store={{
+            appData: mockAppData,
+          }}
+        >
+          {children}
+        </WrappedWithProviders>
+      ),
+    });
 
     expect(Dimensions.addEventListener).toHaveBeenCalledWith(
       "change",
@@ -65,12 +79,23 @@ describe("useDimensions", () => {
   });
 
   it("calls handler on isActive change", () => {
-    const { rerender } = renderHook(() =>
-      useDimensions("window", { fullDimensions: false })
+    const { rerender } = renderHook(
+      () => useDimensions("window", { fullDimensions: false }),
+      {
+        wrapper: ({ children }) => (
+          <WrappedWithProviders
+            store={{
+              appData: mockAppData,
+            }}
+          >
+            {children}
+          </WrappedWithProviders>
+        ),
+      }
     );
 
     (useIsScreenActive as jest.Mock).mockReturnValue(false);
-    rerender();
+    rerender({});
 
     expect(Dimensions.addEventListener).toHaveBeenCalledWith(
       "change",
@@ -79,8 +104,19 @@ describe("useDimensions", () => {
   });
 
   it("handles fullDimensions option", () => {
-    const { result } = renderHook(() =>
-      useDimensions("window", { fullDimensions: true })
+    const { result } = renderHook(
+      () => useDimensions("window", { fullDimensions: true }),
+      {
+        wrapper: ({ children }) => (
+          <WrappedWithProviders
+            store={{
+              appData: mockAppData,
+            }}
+          >
+            {children}
+          </WrappedWithProviders>
+        ),
+      }
     );
 
     expect(result.current).toMatchObject({
@@ -91,8 +127,19 @@ describe("useDimensions", () => {
   });
 
   it("handles excludeStatusBar option", () => {
-    const { result } = renderHook(() =>
-      useDimensions("window", { excludeStatusBar: true })
+    const { result } = renderHook(
+      () => useDimensions("window", { excludeStatusBar: true }),
+      {
+        wrapper: ({ children }) => (
+          <WrappedWithProviders
+            store={{
+              appData: mockAppData,
+            }}
+          >
+            {children}
+          </WrappedWithProviders>
+        ),
+      }
     );
 
     expect(result.current.height).toBe(
@@ -101,8 +148,19 @@ describe("useDimensions", () => {
   });
 
   it("handles rounded option", () => {
-    const { result } = renderHook(() =>
-      useDimensions("window", { rounded: true })
+    const { result } = renderHook(
+      () => useDimensions("window", { rounded: true }),
+      {
+        wrapper: ({ children }) => (
+          <WrappedWithProviders
+            store={{
+              appData: mockAppData,
+            }}
+          >
+            {children}
+          </WrappedWithProviders>
+        ),
+      }
     );
 
     expect(result.current.width).toBe(Math.ceil(mockDimensions.width));
@@ -110,8 +168,19 @@ describe("useDimensions", () => {
   });
 
   it("handles deviceInfo option", () => {
-    const { result } = renderHook(() =>
-      useDimensions("window", { deviceInfo: true })
+    const { result } = renderHook(
+      () => useDimensions("window", { deviceInfo: true }),
+      {
+        wrapper: ({ children }) => (
+          <WrappedWithProviders
+            store={{
+              appData: mockAppData,
+            }}
+          >
+            {children}
+          </WrappedWithProviders>
+        ),
+      }
     );
 
     expect(result.current.deviceInfo).toMatchObject({
@@ -121,7 +190,18 @@ describe("useDimensions", () => {
 
   it("logs deprecation warning when fullDimensions is boolean", () => {
     const consoleWarnSpy = jest.spyOn(console, "warn").mockImplementation();
-    renderHook(() => useDimensions("window", true));
+
+    renderHook(() => useDimensions("window", true), {
+      wrapper: ({ children }) => (
+        <WrappedWithProviders
+          store={{
+            appData: mockAppData,
+          }}
+        >
+          {children}
+        </WrappedWithProviders>
+      ),
+    });
 
     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 { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useAppData } 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 } = usePickFromState(["appData"]);
+  const appData = useAppData();
 
   if (typeof fullDimensions === "boolean") {
     // eslint-disable-next-line no-console