@applicaster/zapp-react-native-utils 12.0.0-alpha.5227180498 → 12.0.0-alpha.5347482137

package/booleanUtils/index.ts

@@ -1,7 +1,7 @@
-import * as R from "ramda";
+import { is, toLower } from "ramda";
 
 export const toBoolean = (value: any): boolean | undefined => {
-  if (R.is(Boolean, value)) {
+  if (is(Boolean, value)) {
     return value;
   }
 
@@ -17,12 +17,12 @@ export const toBooleanWithDefaultTrue = toBooleanWithDefault(true);
 
 export const toBooleanWithDefaultFalse = toBooleanWithDefault(false);
 
-export const isTrue = (value: any): boolean => {
+export const isTrue = (value: unknown): boolean => {
   if (value === true) {
     return true;
   }
 
-  if (R.is(String, value) && value.toLowerCase() === "true") {
+  if (is(String, value) && toLower(value) === "true") {
     return true;
   }
 

package/numberUtils/__tests__/isLikeNumber.test.ts

@@ -7,12 +7,24 @@ describe("isLikeNumber", () => {
     expect(isLikeNumber(value)).toBe(true);
   });
 
+  it("value is a number", () => {
+    const value = 123.45;
+
+    expect(isLikeNumber(value)).toBe(true);
+  });
+
   it("value is a string as number", () => {
     const value = "123";
 
     expect(isLikeNumber(value)).toBe(true);
   });
 
+  it("value is a string as number", () => {
+    const value = "123.45";
+
+    expect(isLikeNumber(value)).toBe(true);
+  });
+
   it("value is empty string", () => {
     const value = "";
 
@@ -54,4 +66,10 @@ describe("isLikeNumber", () => {
 
     expect(isLikeNumber(value)).toBe(false);
   });
+
+  it("NaN is not a number", () => {
+    const value = NaN;
+
+    expect(isLikeNumber(value)).toBe(false);
+  });
 });

package/numberUtils/index.ts

@@ -50,27 +50,14 @@ export const toFiniteNumberWithDefault = (
   return possibleNumber;
 };
 
-export const isLikeNumber = (value: any): boolean => {
-  if (R.isEmpty(value)) {
-    return false;
-  }
-
-  if (R.is(Number, value)) {
-    return true;
-  }
-
-  if (R.is(String, value)) {
-    const onlyDigit = value
-      .split("")
-      .filter((char) =>
-        ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"].includes(char)
-      )
-      .join("");
+export const isLikeNumber = (value: unknown): boolean => {
+  const possibleNumber = toNumber(value);
 
-    return value === onlyDigit;
+  if (R.isNil(possibleNumber)) {
+    return false;
   }
 
-  return false;
+  return true;
 };
 
 export const isZero = (value: unknown): boolean =>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "12.0.0-alpha.5227180498",
+  "version": "12.0.0-alpha.5347482137",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-alpha.5227180498",
+    "@applicaster/applicaster-types": "12.0.0-alpha.5347482137",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",

package/reactHooks/cell-click/__tests__/index.test.js

@@ -1,11 +1,14 @@
 import * as React from "react";
 import { cleanup, renderHook } from "@testing-library/react-hooks";
 import { CellTapContext } from "@applicaster/zapp-react-native-ui-components/Contexts/CellTapContext";
+import { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutorContext";
+
 import { waitFor } from "@testing-library/react-native";
 
 const navigator = {
   getPathname: () => "pathnameMock",
   push: jest.fn(),
+  data: {},
 };
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
@@ -42,9 +45,15 @@ const mockProps = {
 
 const onCellTap = jest.fn();
 
+const actionExecutor = {
+  handleEntryActions: jest.fn(() => Promise.resolve()),
+};
+
 const wrapper = ({ children }) => (
   <CellTapContext.Provider value={onCellTap}>
-    {children}
+    <ActionExecutorContext.Provider value={actionExecutor}>
+      {children}
+    </ActionExecutorContext.Provider>
   </CellTapContext.Provider>
 );
 

package/reactHooks/cell-click/index.ts

@@ -11,9 +11,9 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { ZappPipesEntryContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { toBooleanWithDefaultTrue } from "@applicaster/zapp-react-native-utils/booleanUtils";
-import { noop } from "../../functionUtils";
-import { useContext } from "react";
-import { ActionExecutorContext } from "../../actionsExecutor/ActionExecutorContext";
+import { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutorContext";
+
+import { isFunction, noop } from "../../functionUtils";
 import { useSendAnalyticsOnPress } from "../analytics";
 import { logOnPress, warnEmptyContentType } from "./helpers";
 
@@ -30,12 +30,12 @@ type Props = {
   zappPipesData?: ZappPipesData;
 };
 
-export const useCellClick = (props: Props) => {
-  const { component, zappPipesData } = props;
+export const useCellClick = ({ component, zappPipesData, item }: Props) => {
   const { push, currentRoute } = useNavigation();
   const { pathname } = useRoute();
-  const onCellTap = React.useContext(CellTapContext);
-  const actionExecutor = useContext(ActionExecutorContext);
+
+  const onCellTap: Option<Function> = React.useContext(CellTapContext);
+  const actionExecutor = React.useContext(ActionExecutorContext);
 
   const cellSelectable = toBooleanWithDefaultTrue(
     component?.rules?.component_cells_selectable
@@ -47,7 +47,7 @@ export const useCellClick = (props: Props) => {
   const logTimestamp = useProfilerLogging();
 
   const sendAnalyticsOnPress = useSendAnalyticsOnPress(
-    props.item,
+    item,
     component,
     zappPipesData
   );
@@ -56,7 +56,7 @@ export const useCellClick = (props: Props) => {
     async (_item?: ZappEntry | any, _index?: number) => {
       // Making sure we are not getting GestureResponderEvent in here.
       const isZappEntry = _item?.id && _item?.type;
-      const selectedItem = isZappEntry ? _item : props.item;
+      const selectedItem = isZappEntry ? _item : item;
       setEntryContext?.(selectedItem);
 
       if (!selectedItem?.type?.value) {
@@ -80,10 +80,10 @@ export const useCellClick = (props: Props) => {
           });
         }
       } else {
-        if (typeof onCellTap === "function") {
-          onCellTap(selectedItem, _index);
+        if (isFunction(onCellTap)) {
+          onCellTap?.(selectedItem, _index);
         } else {
-          if (currentRoute === pathname || pathname === "videoModal") {
+          if (currentRoute === pathname || pathname.includes("video-modal")) {
             const targetScreen = component?.data?.target;
 
             push(

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

@@ -1,77 +1,26 @@
-import React from "react";
 import { renderHook } from "@testing-library/react-hooks";
-import configureStore from "redux-mock-store";
-import thunk from "redux-thunk";
-import { Provider } from "react-redux";
-
 import { encodeParams } from "@applicaster/zapp-pipes-v2-client/src/utils";
 
-const mockStore = configureStore([thunk]);
-
-jest.useFakeTimers();
-
 const appData = {
   platform: "foo",
   version_name: "1.2.0",
   sdk_version: "2.0.0",
 };
 
-const pipesEndpoints = {
-  "http://foo.com/show": {
-    context_obj: [
-      { type: "ctx", key: "platform" },
-      { type: "query", mapper: "version", key: "appVersion" },
-      { type: "header", mapper: "SDK", key: "sdkVersion" },
-    ],
-  },
-};
-
-const store_mock = { appData, pipesEndpoints };
-
-const defaultStore = mockStore({
-  pipesEndpoints,
-  appData,
-});
+let INFLATED_URL;
 
-const wrapper: React.FC<any> = ({ children, store }) => (
-  <Provider store={store}>{children}</Provider>
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/feed/useInflatedUrl",
+  () => ({
+    useInflatedUrl: () => INFLATED_URL,
+  })
 );
 
-const navigator = {
-  currentRoute: "/river/A1234",
-};
-
-jest.mock("../../navigation", () => ({
-  useNavigation: jest.fn(() => navigator),
-  useRoute: jest.fn(() => ({})),
-}));
-
-const contexts = {
-  entry: { id: "show-1" },
-  search: {},
-  screen: {},
-};
-
-const contextMock = (type) => ({
-  useZappPipesContext: () => [contexts[type] || {}],
-});
-
-jest.mock("@applicaster/zapp-react-native-ui-components/Contexts", () => ({
-  ZappPipesEntryContext: contextMock("entry"),
-  ZappPipesSearchContext: contextMock("search"),
-  ZappPipesScreenContext: contextMock("screen"),
-}));
-
-jest.mock("@applicaster/zapp-react-native-redux/AppStore", () => ({
-  appStore: {
-    get: jest.fn((prop) => store_mock[prop]),
-  },
-}));
-
 const { useBuildPipesUrl } = require("../useBuildPipesUrl");
 
 describe("useBuildPipesUrl", () => {
   it("returns the proper url", async () => {
+    INFLATED_URL = "http://foo.com/show/show-1";
     const url = "http://foo.com/show/{{showId}}";
 
     const mapping = {
@@ -81,12 +30,20 @@ describe("useBuildPipesUrl", () => {
       },
     };
 
-    const { result, waitForNextUpdate } = renderHook(
-      () => useBuildPipesUrl({ url, mapping }),
-      {
-        wrapper,
-        initialProps: { store: defaultStore },
-      }
+    const buildResult = {
+      params: {
+        ctx: encodeParams({ platform: appData.platform }),
+        version: appData.version_name,
+      },
+      headers: { SDK: appData.sdk_version },
+    };
+
+    const mockedRequestBuilder = {
+      build: jest.fn(() => Promise.resolve(buildResult)),
+    };
+
+    const { result, waitForNextUpdate } = renderHook(() =>
+      useBuildPipesUrl({ url, mapping, requestBuilder: mockedRequestBuilder })
     );
 
     expect(result.current.url).toBe("http://foo.com/show/show-1");
@@ -108,6 +65,7 @@ describe("useBuildPipesUrl", () => {
   });
 
   it("returns empty object if url is not in endpoints", async () => {
+    INFLATED_URL = "http://foobar.com/show-1";
     const url = "http://foobar.com/{{showId}}";
 
     const mapping = {
@@ -117,12 +75,14 @@ describe("useBuildPipesUrl", () => {
       },
     };
 
-    const { result, waitForNextUpdate } = renderHook(
-      () => useBuildPipesUrl({ url, mapping }),
-      {
-        wrapper,
-        initialProps: { store: defaultStore },
-      }
+    const buildResult = {};
+
+    const mockedRequestBuilder = {
+      build: jest.fn(() => Promise.resolve(buildResult)),
+    };
+
+    const { result, waitForNextUpdate } = renderHook(() =>
+      useBuildPipesUrl({ url, mapping, requestBuilder: mockedRequestBuilder })
     );
 
     expect(result.current.url).toBe("http://foobar.com/show-1");

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

@@ -1,9 +1,13 @@
 import { renderHook } from "@testing-library/react-hooks";
 
-import { useFeedRefresh, feedRefreshLogger } from "../";
-
 jest.useFakeTimers();
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
+  useIsScreenActive: () => true,
+}));
+
+const { useFeedRefresh, feedRefreshLogger } = require("..");
+
 describe("useFeedRefresh", () => {
   const reloadData = jest.fn();
 

package/reactHooks/feed/useBuildPipesUrl.ts

@@ -1,7 +1,6 @@
-// @ts-ignore
 import { RequestBuilder } from "@applicaster/zapp-pipes-v2-client";
-import { useEffect, useState } from "react";
-import { useInflatedUrl } from "./useInflatedUrl";
+import * as React from "react";
+import { useInflatedUrl } from "@applicaster/zapp-react-native-utils/reactHooks/feed/useInflatedUrl";
 import { reactHooksLogger } from "../logger";
 
 export const logger = reactHooksLogger.addSubsystem("build-pipes-url");
@@ -15,18 +14,16 @@ type PipesBuildRequestObject = {
 export function useBuildPipesUrl({
   url,
   mapping = {},
+  requestBuilder = new RequestBuilder(),
 }): PipesBuildRequestObject {
-  const [requestParams, setRequestParams] = useState<object | null>(null);
-  const [error, setError] = useState(null);
+  const [requestParams, setRequestParams] = React.useState<object | null>(null);
 
+  const [error, setError] = React.useState(null);
   const inflatedUrl = useInflatedUrl({ feedUrl: url, mapping });
 
-  const requestBuilder = new RequestBuilder();
-
   const buildRequest = async (_url) => {
     try {
       const result = await requestBuilder.build(_url);
-
       setRequestParams(result);
     } catch (e) {
       setError(e);
@@ -34,7 +31,7 @@ export function useBuildPipesUrl({
     }
   };
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (inflatedUrl && !requestParams) {
       buildRequest(inflatedUrl);
     }
@@ -42,7 +39,7 @@ export function useBuildPipesUrl({
 
   return {
     url: inflatedUrl || "",
-    requestParams: requestParams, // TODO should it be: || {} ?
+    requestParams, // TODO should it be: || {} ?
     error: error || undefined,
   };
 }

package/reactHooks/feed/useFeedRefresh.tsx

@@ -1,7 +1,8 @@
 import * as React from "react";
-import * as R from "ramda";
+import { path, max } from "ramda";
 import { isTrue } from "@applicaster/zapp-react-native-utils/booleanUtils";
 import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
+import { useIsScreenActive } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 
 import { reactHooksLogger } from "../logger";
 import { ReloadDataFunction } from "./useFeedLoader";
@@ -18,9 +19,8 @@ const minimumRefreshingInterval = 5;
 const defaultRefreshInterval = 60;
 
 export const useFeedRefresh = ({ reloadData, component }: Props): void => {
-  const enable_data_refreshing = R.path(
-    ["rules", "enable_data_refreshing"],
-    component
+  const isDataRefreshingEnabled = isTrue(
+    path(["rules", "enable_data_refreshing"], component)
   );
 
   const refreshing_interval = toNumberWithDefault(
@@ -29,10 +29,12 @@ export const useFeedRefresh = ({ reloadData, component }: Props): void => {
   );
 
   const refreshingIntervalInMilliseconds =
-    R.max(refreshing_interval, minimumRefreshingInterval) * 1000;
+    max(refreshing_interval, minimumRefreshingInterval) * 1000;
+
+  const isScreenActive = useIsScreenActive();
 
   React.useEffect(() => {
-    if (isTrue(enable_data_refreshing) && refreshing_interval) {
+    if (isDataRefreshingEnabled && refreshing_interval && isScreenActive) {
       if (refreshing_interval < minimumRefreshingInterval) {
         feedRefreshLogger.warning({
           message: `You set your feed refresh interval to ${refreshing_interval} when minimum value is ${minimumRefreshingInterval}seconds.Your feed will refresh after ${minimumRefreshingInterval}seconds.`,
@@ -59,5 +61,5 @@ export const useFeedRefresh = ({ reloadData, component }: Props): void => {
         clearInterval(refreshInterval);
       };
     }
-  }, [reloadData]);
+  }, [reloadData, isScreenActive]);
 };

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

@@ -1,12 +1,13 @@
 import React from "react";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
 import { renderHook } from "@testing-library/react-hooks";
-import { useRoute, isNavBarVisible } from "../";
+import { isNavBarVisible, useRoute } from "../";
 import { Provider } from "react-redux";
 import configureMockStore from "redux-mock-store";
 import { NavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NavigationContext";
 import { ZappHookModalContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/routeTypes";
+import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 
 const plugins = [];
 
@@ -100,13 +101,15 @@ const mainStackWrapper = ({
   pathname = homeStack.route,
 }) => (
   <Provider store={store}>
-    <NavigationContext.Provider
-      value={{ ...mainStackNavigator, ...navigator, currentRoute: pathname }}
-    >
-      <PathnameContext.Provider value={pathname}>
-        {children}
-      </PathnameContext.Provider>
-    </NavigationContext.Provider>
+    <ScreenDataContext.Provider value={homeStack.state}>
+      <NavigationContext.Provider
+        value={{ ...mainStackNavigator, ...navigator, currentRoute: pathname }}
+      >
+        <PathnameContext.Provider value={pathname}>
+          {children}
+        </PathnameContext.Provider>
+      </NavigationContext.Provider>
+    </ScreenDataContext.Provider>
   </Provider>
 );