@applicaster/zapp-react-native-utils 13.0.0-rc.2 → 13.0.0-rc.21

package/idleUtils/withTimeout.ts

@@ -1,7 +1,20 @@
-export const withTimeout = (timeout: number) => {
-  return new Promise((resolve) => {
+import { of, Observable } from "rxjs";
+import { delay } from "rxjs/operators";
+
+export const withTimeout = (timeout: number): Promise<void> => {
+  return new Promise<void>((resolve) => {
     setTimeout(() => {
       resolve(undefined);
     }, timeout);
   });
 };
+
+/**
+ * Creates an observable that emits a single value after a specified timeout.
+ *
+ * @param timeout - The delay duration in milliseconds before emitting the value.
+ * @returns An observable that emits `undefined` after the specified timeout.
+ */
+export const withTimeout$ = (timeout: number): Observable<void> => {
+  return of(undefined).pipe(delay(timeout));
+};

package/logger/const.ts

@@ -1,6 +1,3 @@
-/* eslint-disable unused-imports/no-unused-vars */
-import * as R from "ramda";
-
 enum XRayLogLevel {
   verbose = 0,
   debug = 1,
@@ -11,51 +8,9 @@ enum XRayLogLevel {
   off = 100,
 }
 
-enum ToastLogLevel {
-  off = "off",
-  verbose = "verbose",
-  debug = "debug",
-  info = "info",
-  warning = "warning",
-  error = "error",
-}
-
-const toastLevelToLogLevel = (toastLogLevel: ToastLogLevel): XRayLogLevel => {
-  if (R.isNil(toastLogLevel)) {
-    return XRayLogLevel.off;
-  }
-
-  switch (toastLogLevel) {
-    case ToastLogLevel.verbose:
-      return XRayLogLevel.verbose;
-    case ToastLogLevel.debug:
-      return XRayLogLevel.debug;
-    case ToastLogLevel.info:
-      return XRayLogLevel.info;
-    case ToastLogLevel.error:
-      return XRayLogLevel.error;
-    default:
-      return XRayLogLevel.off;
-  }
-};
-
-const PLUGIN_IDENTIFIER = "xray_logging_plugin";
-
-const wrapInObject = (obj, name) => {};
-
-const applyConditions = (wrappedObj) => {};
-
-const sanitizeEventPayload = () => {};
+const wrapInObject = (_ctx: unknown, _key: string) => {};
 
-const __isRunningRepoTests = () => {};
-
-const isWeb = () => {};
-
-const isDOMApp = () => {};
-
-const isBrowser = () => {};
-
-const eventAllowed = () => {};
+const applyConditions = (_fn: unknown) => {};
 
 /**
  * This is the mocked version of XRayLogger
@@ -90,34 +45,21 @@ export default class XRayLogger {
     );
   };
 
-  log = (event: string | XRayEventData) => {
-    const logEvent = typeof event === "string" ? { message: event } : event;
-  };
+  log = (_event) => {};
 
-  debug = (event: string | XRayEventData) => {
-    const logEvent = typeof event === "string" ? { message: event } : event;
-  };
+  debug = (_event) => {};
 
-  info = (event: string | XRayEventData) => {
-    const logEvent = typeof event === "string" ? { message: event } : event;
-  };
+  info = (_event) => {};
 
-  warning = (event: string | XRayEventData) => {
-    const logEvent = typeof event === "string" ? { message: event } : event;
-  };
+  warning = (_event) => {};
 
-  warn = (event: string | XRayEventData) => {
+  warn = (_event) => {
     this.warning(event);
   };
 
-  error = (event: Error | XRayEventData) => {
-    const logEvent: XRayEventData =
-      event instanceof Error
-        ? { exception: event as Error, message: event.message }
-        : (event as XRayEventData);
-  };
+  error = (_event) => {};
 
-  sendEvent = (event, eventData) => {};
+  sendEvent = (_event, _eventData) => {};
 
   // To be used by QuickBrick Hook events
   sendAudienceEvent = (event, eventData = null) => {

package/manifestUtils/__tests__/createConfig.test.js

@@ -1,11 +1,9 @@
-import { createConfig } from "../createConfig";
-
-const styles = {
+const mockStyles = {
   fields: [{ key: "field_1", initial_value: 1 }],
   label: "styles",
 };
 
-const stylesWithGroup = {
+const mockStylesWithGroup = {
   fields: [
     {
       group: true,
@@ -15,26 +13,28 @@ const stylesWithGroup = {
   ],
 };
 
-const generators = {
-  styles: jest.fn(() => ({ styles })),
+const mockGenerators = {
+  styles: jest.fn(() => ({ styles: mockStyles })),
   stylesGroup: jest.fn(() => ({
-    styles: stylesWithGroup,
+    styles: mockStylesWithGroup,
   })),
-  customConfiguration: jest.fn(() => ({ custom_configuration: [styles] })),
+  customConfiguration: jest.fn(() => ({ custom_configuration: [mockStyles] })),
   customConfigurationGroup: jest.fn(() => ({
-    custom_configuration: [stylesWithGroup],
+    custom_configuration: [mockStylesWithGroup],
   })),
 };
 
-jest.mock("../defaultManifestConfigurations", () => ({
+jest.doMock("../defaultManifestConfigurations", () => ({
   defaultConfigurations: {
-    styles: generators.styles,
-    stylesGroup: generators.stylesGroup,
-    customConfiguration: generators.customConfiguration,
-    customConfigurationGroup: generators.customConfigurationGroup,
+    styles: mockGenerators.styles,
+    stylesGroup: mockGenerators.stylesGroup,
+    customConfiguration: mockGenerators.customConfiguration,
+    customConfigurationGroup: mockGenerators.customConfigurationGroup,
   },
 }));
 
+const { createConfig } = require("../createConfig");
+
 describe("createConfig", () => {
   it("should return a function", () => {
     const currentResult = createConfig(jest.fn());
@@ -78,7 +78,9 @@ describe("createConfig", () => {
       extend: "styles",
     })(props);
 
-    expect(generators.styles).toBeCalledWith(props);
+    console.log(mockGenerators.styles.mock.calls);
+
+    expect(mockGenerators.styles).toBeCalledWith(props);
   });
 
   it("should return base configuration if manifest is not provided", () => {
@@ -88,7 +90,7 @@ describe("createConfig", () => {
       extend: "styles",
     })({});
 
-    expect(currentResult).toEqual({ styles });
+    expect(currentResult).toEqual({ styles: mockStyles });
   });
 
   describe("Data merging", () => {

package/modalState/index.ts

@@ -31,11 +31,7 @@ export const useModalStore = create<ModalStore>((set) => ({
     set((state) => ({
       modalState: { ...state.modalState, ...newState },
     })),
-  openModal: ({
-    item,
-    options = {},
-    props = { screenData: {} },
-  }: OpenModalArg) =>
+  openModal: ({ item, options = {}, props }: OpenModalArg) =>
     set({
       modalState: {
         visible: true,

package/navigationUtils/__tests__/__snapshots__/navigationUtils.test.js.snap

@@ -1,19 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`getNavigationProps returns the props otherwise 1`] = `
-Object {
-  "assets": Object {
+{
+  "assets": {
     "appLogo": "appLogo.png",
   },
   "home": false,
-  "nav_items": Array [
-    Object {
+  "nav_items": [
+    {
       "type": "label",
     },
   ],
-  "rules": Object {},
+  "rules": {},
   "selected": "A1234",
-  "styles": Object {
+  "styles": {
     "style": "foo",
   },
   "title": "testTitle",

package/navigationUtils/__tests__/itemTypes.test.js

@@ -61,8 +61,8 @@ describe("getTypeMatcher", () => {
 
 describe("isItemOfType", () => {
   it("is a curried function", () => {
-    expect(itemIsOfType(river, SCREEN_TYPES.RIVER)).toBeBoolean();
-    expect(itemIsOfType(river)).toBeFunction();
+    expect(itemIsOfType(river, SCREEN_TYPES.RIVER)).toBeTruthy();
+    expect(itemIsOfType(river)).toBeInstanceOf(Function);
   });
 
   it("returns true if the item is of the given type", () => {

package/navigationUtils/__tests__/navigationUtils.test.js

@@ -243,7 +243,7 @@ describe("getTargetRoute", () => {
     it("returns a valid path when initial pathname is /", () => {
       const targetRoute = getTargetRoute(river, "/", { layoutVersion });
       expect(targetRoute).toEqual(`/river/${river.id}`);
-      expect(targetRoute).not.toInclude("//");
+      expect(targetRoute).not.toContainEntry("//");
     });
   });
 
@@ -273,7 +273,7 @@ describe("getTargetRoute", () => {
     it("returns a valid path when initial pathname is /", () => {
       const targetRoute = getTargetRoute(river, "/", { layoutVersion });
       expect(targetRoute).toEqual(`/river/${river.id}`);
-      expect(targetRoute).not.toInclude("//");
+      expect(targetRoute).not.toContainEntry("//");
     });
   });
 });

package/navigationUtils/index.ts

@@ -324,7 +324,13 @@ export function getPathAttributes({
  * @param {object} rivers
  * @returns {object}
  */
-export function getRiverFromRoute({ route, rivers }) {
+export function getRiverFromRoute({
+  route,
+  rivers,
+}: {
+  route: string;
+  rivers: Record<string, ZappRiver>;
+}) {
   if (!route) {
     return null;
   }
@@ -437,7 +443,7 @@ export const runZappHooksForEntry = async (
 
   let success;
   let payload;
-  const rivers = appStore.get("rivers");
+  const rivers: Record<string, ZappRiver> = appStore.get("rivers");
   const plugins = appStore.get("plugins");
   const appData = appStore.get("appData");
 
@@ -492,13 +498,16 @@ export const runZappHooksForEntry = async (
       payload = _payload;
     };
 
-  HooksManager(hooksOptions)
+  const hooksManager = HooksManager(hooksOptions);
+
+  hooksManager.subscriber
     .on(HOOKS_EVENTS.PRESENT_SCREEN_HOOK, handleHookPresent)
     .on(HOOKS_EVENTS.START_BACKGROUND_HOOK, handleBackgroundHook)
     .on(HOOKS_EVENTS.ERROR, onFinished(false))
     .on(HOOKS_EVENTS.CANCEL, onFinished(false))
-    .on(HOOKS_EVENTS.COMPLETE, onFinished(true))
-    .handleHooks(entry);
+    .on(HOOKS_EVENTS.COMPLETE, onFinished(true));
+
+  hooksManager.handleHooks(entry);
 
   // eslint-disable-next-line no-unmodified-loop-condition
   while (success === undefined) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "13.0.0-rc.2",
+  "version": "13.0.0-rc.21",
   "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": "13.0.0-rc.2",
+    "@applicaster/applicaster-types": "13.0.0-rc.21",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",
@@ -44,6 +44,7 @@
     "immer": "*",
     "react": "17.0.2",
     "react-native": "0.68.6",
+    "uglify-js": "*",
     "validate-color": "*",
     "zustand": "*"
   },

package/reactHooks/autoscrolling/__tests__/useTrackCurrentAutoScrollingElement.test.ts

@@ -14,7 +14,7 @@ jest.mock(
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
 
-jest.useFakeTimers();
+jest.useFakeTimers({ legacyFakeTimers: true });
 
 const {
   useTrackCurrentAutoScrollingElement,

package/reactHooks/autoscrolling/__tests__/useTrackedView.test.tsx

@@ -19,7 +19,7 @@ jest.mock(
   })
 );
 
-jest.useFakeTimers();
+jest.useFakeTimers({ legacyFakeTimers: true });
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
 

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

@@ -5,14 +5,14 @@ import { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/acti
 
 import { waitFor } from "@testing-library/react-native";
 
-const navigator = {
+const mockNavigator = {
   getPathname: () => "pathnameMock",
   push: jest.fn(),
   data: {},
 };
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
-  useNavigation: () => navigator,
+  useNavigation: () => mockNavigator,
   useRoute: () => ({ pathname: "pathnameMock" }),
   useProfilerLogging: () => {
     return jest.fn();
@@ -25,7 +25,15 @@ jest.mock("@applicaster/zapp-react-native-utils/analyticsUtils/", () => ({
   }),
 }));
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({
+  useTargetScreenData: jest.fn(() => ({})),
+  useCurrentScreenData: jest.fn(() => ({})),
+}));
+
 jest.mock("@applicaster/zapp-react-native-ui-components/Contexts", () => ({
+  ...jest.requireActual(
+    "@applicaster/zapp-react-native-ui-components/Contexts"
+  ),
   ZappPipesEntryContext: {
     useZappPipesContext: jest.fn(() => [undefined, jest.fn()]),
   },

package/reactHooks/cell-click/index.ts

@@ -16,6 +16,7 @@ import { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/acti
 import { isFunction, noop } from "../../functionUtils";
 import { useSendAnalyticsOnPress } from "../analytics";
 import { logOnPress, warnEmptyContentType } from "./helpers";
+import { useCurrentScreenData } from "../screen";
 
 /**
  * If onCellTap is defined execute the function and
@@ -44,6 +45,7 @@ export const useCellClick = ({
 
   const onCellTap: Option<Function> = React.useContext(CellTapContext);
   const actionExecutor = React.useContext(ActionExecutorContext);
+  const screenData = useCurrentScreenData();
 
   const cellSelectable = toBooleanWithDefaultTrue(
     component?.rules?.component_cells_selectable
@@ -78,7 +80,10 @@ export const useCellClick = ({
       logOnPress(selectedItem, pathname, component, onCellTap);
 
       if (selectedItem) {
-        await actionExecutor?.handleEntryActions(selectedItem);
+        await actionExecutor?.handleEntryActions(selectedItem, {
+          component,
+          screenData,
+        });
       }
 
       if (selectedItem?.type?.value === "action") {
@@ -111,6 +116,7 @@ export const useCellClick = ({
       pathname,
       push,
       sendAnalyticsOnPress,
+      screenData,
     ]
   );
 

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

@@ -7,12 +7,12 @@ const appData = {
   sdk_version: "2.0.0",
 };
 
-let INFLATED_URL;
+const mockUseInflatedUrl = jest.fn();
 
 jest.mock(
   "@applicaster/zapp-react-native-utils/reactHooks/feed/useInflatedUrl",
   () => ({
-    useInflatedUrl: () => INFLATED_URL,
+    useInflatedUrl: mockUseInflatedUrl,
   })
 );
 
@@ -20,7 +20,7 @@ const { useBuildPipesUrl } = require("../useBuildPipesUrl");
 
 describe("useBuildPipesUrl", () => {
   it("returns the proper url", async () => {
-    INFLATED_URL = "http://foo.com/show/show-1";
+    mockUseInflatedUrl.mockReturnValue("http://foo.com/show/show-1");
     const url = "http://foo.com/show/{{showId}}";
 
     const mapping = {
@@ -65,7 +65,7 @@ describe("useBuildPipesUrl", () => {
   });
 
   it("returns empty object if url is not in endpoints", async () => {
-    INFLATED_URL = "http://foobar.com/show-1";
+    mockUseInflatedUrl.mockReturnValue("http://foobar.com/show-1");
     const url = "http://foobar.com/{{showId}}";
 
     const mapping = {

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

@@ -6,42 +6,41 @@ import { Provider } from "react-redux";
 import * as React from "react";
 import configureStore from "redux-mock-store";
 import thunk from "redux-thunk";
-import * as navigationHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import * as useRouteHook from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute";
 import * as useNavigationHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
+import { useFeedLoader } from "../useFeedLoader";
 
 const mockStore = configureStore([thunk]);
 
-jest.useFakeTimers();
+jest.useFakeTimers({ legacyFakeTimers: true });
 
-const logger = {
+const mockLogger = {
   warning: jest.fn(),
   log: jest.fn(),
   info: jest.fn(),
 };
 
-const navigator = {
+const mockNavigator: any = {
   currentRoute: "/river/A1234",
   getStack: jest.fn(() => []),
 };
 
-const routeData = {
+const mockRouteData: any = {
   screenData: {},
   pathname: "/river/A1234",
 };
 
-jest.mock("../../logger", () => ({
+jest.doMock("../../logger", () => ({
   reactHooksLogger: {
-    addSubsystem: jest.fn(() => logger),
+    addSubsystem: jest.fn(() => mockLogger),
   },
 }));
 
 jest
   .spyOn(useNavigationHooks, "useNavigation")
-  .mockImplementation(() => navigator);
+  .mockImplementation(() => mockNavigator);
 
-jest.spyOn(navigationHooks, "useRoute").mockImplementation(() => routeData);
-
-const { useFeedLoader } = require("../useFeedLoader");
+jest.spyOn(useRouteHook, "useRoute").mockImplementation(() => mockRouteData);
 
 const mockZappPipesData = {
   data: {
@@ -135,7 +134,11 @@ describe("useFeedLoader", () => {
       );
 
       expect(result.current.data).toBeNull();
-      expect(loadPipesDataSpy).toBeCalledWith(feedUrl, {});
+
+      expect(loadPipesDataSpy).toBeCalledWith(feedUrl, {
+        clearCache: true,
+        riverId: undefined,
+      });
 
       const store2 = mockStore({
         plugins: [],
@@ -172,7 +175,11 @@ describe("useFeedLoader", () => {
       );
 
       expect(result.current.data).toBeNull();
-      expect(loadPipesDataSpy).toBeCalledWith(feedUrl, {});
+
+      expect(loadPipesDataSpy).toBeCalledWith(feedUrl, {
+        clearCache: true,
+        riverId: undefined,
+      });
 
       const store2 = mockStore({
         plugins: [],

package/reactHooks/feed/useFeedLoader.tsx

@@ -1,12 +1,11 @@
 import React, { useEffect } from "react";
-import { path } from "ramda";
 import { useDispatch } from "react-redux";
 
 import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
 import { useZappPipesFeed } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { reactHooksLogger } from "../logger";
-import { useIsInitialRender } from "../utils";
+import { useIsInitialRender, shouldDispatchData } from "../utils";
 import { useInflatedUrl } from "./useInflatedUrl";
 import { useRoute } from "../navigation";
 
@@ -56,8 +55,6 @@ export const useFeedLoader = ({
 
   const currentFeed = useZappPipesFeed(callableFeedUrl);
 
-  const cachedFeed = React.useMemo(() => path(["data"])(currentFeed), []);
-
   const riverId = screenData?.id;
 
   const reloadData = React.useCallback<ReloadDataFunction>(
@@ -90,13 +87,20 @@ export const useFeedLoader = ({
         );
       }
     }
-  }, [callableFeedUrl, currentFeed?.data]);
+  }, [callableFeedUrl, currentFeed?.data?.next]);
 
-  // If feed doesn't exist, load it
   useEffect(() => {
-    if (!cachedFeed || pipesOptions.clearCache) {
+    if (
+      shouldDispatchData(callableFeedUrl, currentFeed, pipesOptions.clearCache)
+    ) {
       if (callableFeedUrl) {
-        dispatch(loadPipesData(callableFeedUrl, { ...pipesOptions, riverId }));
+        dispatch(
+          loadPipesData(callableFeedUrl, {
+            ...pipesOptions,
+            clearCache: true,
+            riverId,
+          })
+        );
       } else {
         logger.info({
           message:

package/reactHooks/feed/usePipesCacheReset.ts

@@ -1,12 +1,12 @@
 import React from "react";
 import { useDispatch } from "react-redux";
-import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
-import {
-  getDatasourceUrl,
-  usePipesContexts,
-} from "@applicaster/zapp-react-native-ui-components/Decorators/RiverFeedLoader/utils";
+
+import { getDatasourceUrl } from "@applicaster/zapp-react-native-ui-components/Decorators/RiverFeedLoader/utils/getDatasourceUrl";
+import { usePipesContexts } from "@applicaster/zapp-react-native-ui-components/Decorators/RiverFeedLoader/utils/usePipesContexts";
 import { clearPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
 
+import { useRoute } from "../navigation/useRoute";
+
 /**
  * reset river components cache when screen is unmounted
  * @param {string} riverId screen id