@applicaster/zapp-react-native-utils 12.0.0-alpha.4201443043 → 12.0.0-alpha.4324313105

package/appUtils/focusManager/__tests__/__snapshots__/focusManager.test.js.snap

@@ -3,7 +3,9 @@
 exports[`focusManager should be defined 1`] = `
 Object {
   "blur": [Function],
+  "disableAutomaticFocus": [Function],
   "disableFocus": [Function],
+  "enableAutomaticFocus": [Function],
   "enableFocus": [Function],
   "focusableTree": Tree {
     "loadingCounter": 0,
@@ -21,7 +23,6 @@ Object {
   "getGroupById": [Function],
   "getGroupRootById": [Function],
   "invokeHandler": [Function],
-  "isCurrentFocusOnTheTopScreen": [Function],
   "isFocusDisabled": [Function],
   "isGroupItemFocused": [Function],
   "longPress": [Function],
@@ -29,11 +30,11 @@ Object {
   "on": [Function],
   "press": [Function],
   "pressOut": [Function],
-  "recoverFocus": [Function],
   "register": [Function],
   "removeHandler": [Function],
   "setFocus": [Function],
   "setInitialFocus": [Function],
+  "setupInitialFocus": [Function],
   "unregister": [Function],
 }
 `;

package/appUtils/focusManager/__tests__/focusManager.test.js

@@ -14,8 +14,10 @@ describe("focusManager", () => {
     expect(focusManager).toMatchSnapshot();
   });
 
-  it("manages to land initial focus", () => {
+  it("enableAutomaticFocus should not block setting focus", () => {
     const mockSetFocus = jest.fn();
+    focusManager.setupInitialFocus("1", true);
+    focusManager.enableAutomaticFocus();
 
     focusManager.register({
       id: "1",
@@ -29,13 +31,31 @@ describe("focusManager", () => {
       },
     });
 
-    const { success } = focusManager.setInitialFocus();
-
-    expect(success).toBe(true);
     expect(mockSetFocus).toBeCalledTimes(1);
     expect(mockSetFocus).toBeCalledWith(null);
   });
 
+  it("enableAutomaticFocus should block setting focus", () => {
+    const mockSetFocus = jest.fn();
+    focusManager.setupInitialFocus("1", true);
+    focusManager.disableAutomaticFocus();
+
+    focusManager.register({
+      id: "1",
+      component: {
+        setFocus: mockSetFocus,
+        willReceiveFocus: function () {},
+        isMounted: function () {
+          return true;
+        },
+        props: { groupId: "121" },
+      },
+    });
+
+    expect(mockSetFocus).toBeCalledTimes(0);
+    expect(mockSetFocus).not.toBeCalledWith(null);
+  });
+
   describe("register", () => {});
   describe("unregister", () => {});
   describe("find", () => {});

package/appUtils/focusManager/__tests__/index.test.ts

@@ -18,6 +18,7 @@ describe("focusManager", () => {
       "on",
       "invokeHandler",
       "removeHandler",
+      "setupInitialFocus",
       "longPress",
       "pressOut",
       "enableFocus",
@@ -26,10 +27,10 @@ describe("focusManager", () => {
       "isFocusDisabled",
       "getCurrentFocusNode",
       "focusableTree",
+      "disableAutomaticFocus",
+      "enableAutomaticFocus",
       "getGroupRootById",
       "isGroupItemFocused",
-      "recoverFocus",
-      "isCurrentFocusOnTheTopScreen",
     ];
 
     expectedMethods.forEach((method) => {

package/appUtils/focusManager/index.ts

@@ -1,15 +1,6 @@
 import * as R from "ramda";
-import {
-  isNilOrEmpty,
-  isNotNil,
-} from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
-
 import { Tree } from "./treeDataStructure/Tree";
-import {
-  findFocusableNode,
-  findPriorityItem,
-  haveSameParentBeforeRoot,
-} from "./treeDataStructure/Utils";
+import { findFocusableNode, findPriorityItem } from "./treeDataStructure/Utils";
 import { subscriber } from "../../functionUtils";
 import * as FOCUS_EVENTS from "./events";
 import { coreLogger } from "../../logger";
@@ -53,9 +44,21 @@ export const focusManager = (function () {
   // focusable node which currently holds the focus
   let currentFocusNode = null;
   let lastFocusedId = null;
+  let initialFocusOnContent = null;
   let focusDisabled = false;
+  let focusAutoEnabled = true;
   const eventHandler = subscriber();
 
+  function disableAutomaticFocus() {
+    logger.log({ message: "disableAutomaticFocus" });
+    focusAutoEnabled = false;
+  }
+
+  function enableAutomaticFocus() {
+    logger.log({ message: "focusManager: enableAutomaticFocus" });
+    focusAutoEnabled = true;
+  }
+
   function enableFocus() {
     focusDisabled = false;
   }
@@ -90,7 +93,7 @@ export const focusManager = (function () {
       !currentFocusable.isGroup &&
       currentFocusable.isMounted()
     ) {
-      currentFocusable.blur(direction);
+      currentFocusable.blur(currentFocusable, direction);
       currentFocusable.hasLostFocus(getCurrentFocus(), direction);
     }
   }
@@ -223,52 +226,32 @@ export const focusManager = (function () {
 
     logger.log({ message: "setInitialFocus", data: { preferredFocus } });
 
-    if (isNilOrEmpty(preferredFocus)) {
-      return { success: false };
-    }
-
-    const focusCandidate = preferredFocus[0];
-    const focusableItem = focusCandidate.component;
-
-    const currentFocusedId = R.path(["props", "id"], getCurrentFocus());
-    const nextFocusedId = R.path(["props", "id"], focusableItem);
-
-    if (
-      isNotNil(currentFocusedId) &&
-      isNotNil(nextFocusedId) &&
-      currentFocusedId === nextFocusedId
-    ) {
-      // we are going to move focus to the same node(already focused) -> nothing to do
-      return { success: true };
-    }
-
-    if (focusableItem?.isGroup) {
-      // focusCandidate is a FocusableGroup, we are not able to land focus on group(only on Focusable)
-      return { success: false };
-    }
-
-    if (
-      focusableItem &&
-      !focusableItem.isGroup &&
-      isFocusEnabled(focusableItem)
-    ) {
-      blur();
-
-      logger.log({
-        message: "setInitialFocus – currentFocusNode",
-        data: {
-          focusableItem,
-        },
-      });
+    if (preferredFocus && preferredFocus.length > 0) {
+      const focusCandidate = preferredFocus[0];
+      const focusableItem = focusCandidate.component;
+
+      if (
+        focusableItem &&
+        !focusableItem.isGroup &&
+        isFocusEnabled(focusableItem)
+      ) {
+        if (initialFocusOnContent) {
+          blur();
+          initialFocusOnContent = false;
+        }
 
-      currentFocusNode = focusCandidate;
-      focusableItem.willReceiveFocus(focusableItem, null);
-      focusableItem && setFocus(focusCandidate.id, null);
+        logger.log({
+          message: "setInitialFocus – currentFocusNode",
+          data: {
+            focusableItem,
+          },
+        });
 
-      return { success: true };
+        currentFocusNode = focusCandidate;
+        focusableItem.willReceiveFocus(focusableItem, null);
+        focusableItem && setFocus(focusCandidate.id, null);
+      }
     }
-
-    return { success: false };
   }
 
   function treeLoaded(val, node) {
@@ -278,8 +261,17 @@ export const focusManager = (function () {
         val,
         node,
         currentFocusNode,
+        initialFocusOnContent,
       },
     });
+
+    if ((val && !currentFocusNode) || initialFocusOnContent) {
+      logger.log({ message: `focusAutoEnabled ${focusAutoEnabled}` });
+
+      if (focusAutoEnabled) {
+        setInitialFocus(initialFocusOnContent ? node : undefined);
+      }
+    }
   }
 
   /**
@@ -410,21 +402,11 @@ export const focusManager = (function () {
     group ? unregisterGroup(id) : unregisterItem(id);
   }
 
-  function isCurrentFocusOnTheTopScreen() {
-    const routes = R.pathOr([], ["root", "children"], focusableTree);
-
-    if (routes.length <= 1) {
-      // there is only one or zero routes
-      return true;
-    }
-
-    return haveSameParentBeforeRoot(currentFocusNode, R.last(routes));
-  }
-
-  function recoverFocus() {
-    if (!isCurrentFocusOnTheTopScreen()) {
-      // We've failed to set focused node on the new screen => run focus recovery
-      setInitialFocus();
+  function setupInitialFocus(id: string, focusOnContent?: boolean) {
+    if (focusOnContent) {
+      initialFocusOnContent = focusOnContent;
+    } else {
+      setFocus(id);
     }
   }
 
@@ -434,11 +416,6 @@ export const focusManager = (function () {
    * @param {Object} direction of the scroll
    */
   function moveFocus(direction) {
-    if (!isCurrentFocusOnTheTopScreen()) {
-      // We are opening new screen. We need to ignore movement of focus.
-      return false;
-    }
-
     if (focusDisabled) return false;
 
     if (currentFocusNode) {
@@ -467,6 +444,8 @@ export const focusManager = (function () {
       } else {
         currentFocusNode.component.failedLostFocus(currentFocusNode, direction);
       }
+    } else {
+      setInitialFocus();
     }
   }
 
@@ -526,6 +505,7 @@ export const focusManager = (function () {
     on,
     invokeHandler,
     removeHandler,
+    setupInitialFocus,
     longPress,
     pressOut,
     enableFocus,
@@ -534,9 +514,9 @@ export const focusManager = (function () {
     isFocusDisabled,
     getCurrentFocusNode,
     focusableTree,
+    disableAutomaticFocus,
+    enableAutomaticFocus,
     getGroupRootById,
     isGroupItemFocused,
-    recoverFocus,
-    isCurrentFocusOnTheTopScreen,
   };
 })();

package/appUtils/focusManager/treeDataStructure/Utils/index.js

@@ -1,7 +1,5 @@
-import { allPass, pathOr, startsWith, isNil } from "ramda";
+import * as R from "ramda";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
-import { isZero } from "@applicaster/zapp-react-native-utils/numberUtils";
-import { QUICK_BRICK_NAVBAR } from "@applicaster/quick-brick-core/const";
 
 import { rejectItemByPath } from "../../../../objectUtils";
 import {
@@ -145,47 +143,7 @@ const hasChildren = (target) =>
 
 const hasComponent = (target) => !!target?.component;
 
-const hasComponentAndChildren = allPass([hasComponent, hasChildren]);
-
-const positiveOrZero = (value) => value > 0 || isZero(value);
-
-const excludeFromFocusSearching = pathOr(false, [
-  "component",
-  "props",
-  "excludeFromFocusSearching",
-]);
-
-const isNavBar = (target) => startsWith(QUICK_BRICK_NAVBAR, target?.id);
-
-const ignoreMenuIfMultipleTargets = (nodes) => {
-  if (nodes.length > 1) {
-    return nodes.filter((n) => !isNavBar(n?.target));
-  }
-
-  return nodes;
-};
-
-const toDistance = ({ target, direction, comparisonRect }) => {
-  const componentRect = target.component?.getRect();
-
-  const orientationDistance = measureDistance(
-    direction,
-    comparisonRect,
-    componentRect
-  );
-
-  if (orientationDistance === -1) {
-    // ignores offscreen targets when moving up/down
-    return null;
-  }
-
-  const euclidDistance = measureEuclidianDistanceToCenter(
-    comparisonRect,
-    componentRect
-  );
-
-  return orientationDistance > 0 ? euclidDistance : orientationDistance;
-};
+const hasComponentAndChildren = R.allPass([hasComponent, hasChildren]);
 
 /**
  * Get target in shortest distance in specified direction
@@ -215,18 +173,52 @@ export function getTargetInDirection(
 
   const distances = targets
     .filter(hasComponentAndChildren)
-    .filter((target) => !excludeFromFocusSearching(target))
-    .map((target) => ({
-      distance: toDistance({ target, direction, comparisonRect }),
-      target,
-    }))
-    .filter(({ distance }) => positiveOrZero(distance));
+    .map((target) => {
+      const componentRect = target.component?.getRect();
+
+      const distance = measureDistance(
+        direction,
+        comparisonRect,
+        componentRect
+      );
+
+      if (distance === -1) {
+        // ignores offscreen targets when moving up/down
+        return null;
+      }
+
+      const orientationDistance = measureDistance(
+        direction,
+        comparisonRect,
+        componentRect
+      );
+
+      const euclidDistance = measureEuclidianDistanceToCenter(
+        comparisonRect,
+        componentRect
+      );
+
+      return {
+        distance:
+          orientationDistance > 0 ? euclidDistance : orientationDistance,
+        target,
+      };
+    })
+    .filter((obj) => obj && obj.distance >= 0);
 
   const match = distances
     .sort((a, b) => a.distance - b.distance) // sorts the distances
     .filter(ignoreMenuIfMultipleTargets)[0]; // filters out multiple targets if necessary // gets the first element
 
-  return match?.target;
+  return distances && distances.length > 0 ? match.target : null;
+}
+
+function ignoreMenuIfMultipleTargets(nodes) {
+  if (nodes.length > 1 && nodes.map((n) => n?.target?.id).includes("navbar")) {
+    return nodes.filter((n) => n?.target?.id !== "navbar");
+  }
+
+  return nodes;
 }
 
 /**
@@ -317,26 +309,3 @@ export function hasPriorityInDirection(direction, component) {
 
   return (prioritiseFocusOn & mappedDirection) > 0;
 }
-
-export const getNodeBeforeRoot = (node) => {
-  if (isNil(node)) {
-    return undefined;
-  }
-
-  if (isNil(node.parent)) {
-    return undefined;
-  }
-
-  if (node.parent.id === "root") {
-    return node;
-  }
-
-  return getNodeBeforeRoot(node.parent);
-};
-
-export const haveSameParentBeforeRoot = (currentNode, nextNode) => {
-  const routeForCurrentNode = getNodeBeforeRoot(currentNode);
-  const routeForNextNode = getNodeBeforeRoot(nextNode);
-
-  return routeForCurrentNode?.id === routeForNextNode?.id;
-};

package/arrayUtils/index.ts

@@ -95,8 +95,3 @@ export const makeListOfIndexes = (size: number): number[] =>
 export const makeListOf = (value: unknown, size: number): number[] => {
   return Array(size).fill(value);
 };
-
-/** Checks if a value is a non-empty array */
-export function isFilledArray(value: unknown): boolean {
-  return R.is(Array, value) && R.length(value) > 0;
-}

package/numberUtils/__tests__/isLikeNumber.test.ts

@@ -7,24 +7,12 @@ 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 = "";
 
@@ -66,10 +54,4 @@ 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,14 +50,27 @@ export const toFiniteNumberWithDefault = (
   return possibleNumber;
 };
 
-export const isLikeNumber = (value: unknown): boolean => {
-  const possibleNumber = toNumber(value);
-
-  if (R.isNil(possibleNumber)) {
+export const isLikeNumber = (value: any): boolean => {
+  if (R.isEmpty(value)) {
     return false;
   }
 
-  return true;
+  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("");
+
+    return value === onlyDigit;
+  }
+
+  return false;
 };
 
 export const isZero = (value: unknown): boolean =>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "12.0.0-alpha.4201443043",
+  "version": "12.0.0-alpha.4324313105",
   "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.4201443043",
+    "@applicaster/applicaster-types": "12.0.0-alpha.4324313105",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",

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

@@ -1,8 +1,6 @@
 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 = {
@@ -31,6 +29,10 @@ jest.mock("@applicaster/zapp-react-native-ui-components/Contexts", () => ({
   },
 }));
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({
+  useScreenContext: jest.fn(() => navigator.data),
+}));
+
 const { useCellClick } = require("../");
 
 const mockProps = {
@@ -45,15 +47,9 @@ const mockProps = {
 
 const onCellTap = jest.fn();
 
-const actionExecutor = {
-  handleEntryActions: jest.fn(() => Promise.resolve()),
-};
-
 const wrapper = ({ children }) => (
   <CellTapContext.Provider value={onCellTap}>
-    <ActionExecutorContext.Provider value={actionExecutor}>
-      {children}
-    </ActionExecutorContext.Provider>
+    {children}
   </CellTapContext.Provider>
 );
 

package/reactHooks/cell-click/index.ts

@@ -1,6 +1,7 @@
 /// <reference types="@applicaster/applicaster-types" />
 
 import * as React from "react";
+import { useContext } from "react";
 import * as R from "ramda";
 import { handleActionSchemeUrl } from "@applicaster/quick-brick-core/App/DeepLinking/URLSchemeHandler/SchemeHandlerHooks/useUrlSchemeHandler";
 import { CellTapContext } from "@applicaster/zapp-react-native-ui-components/Contexts/CellTapContext";
@@ -11,9 +12,8 @@ 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 { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutorContext";
-
-import { isFunction, noop } from "../../functionUtils";
+import { noop } from "../../functionUtils";
+import { ActionExecutorContext } from "../../actionsExecutor/ActionExecutorContext";
 import { useSendAnalyticsOnPress } from "../analytics";
 import { logOnPress, warnEmptyContentType } from "./helpers";
 
@@ -30,12 +30,12 @@ type Props = {
   zappPipesData?: ZappPipesData;
 };
 
-export const useCellClick = ({ component, zappPipesData, item }: Props) => {
+export const useCellClick = (props: Props) => {
+  const { component, zappPipesData } = props;
   const { push, currentRoute } = useNavigation();
   const { pathname } = useRoute();
-
-  const onCellTap: Option<Function> = React.useContext(CellTapContext);
-  const actionExecutor = React.useContext(ActionExecutorContext);
+  const onCellTap = React.useContext(CellTapContext);
+  const actionExecutor = useContext(ActionExecutorContext);
 
   const cellSelectable = toBooleanWithDefaultTrue(
     component?.rules?.component_cells_selectable
@@ -47,7 +47,7 @@ export const useCellClick = ({ component, zappPipesData, item }: Props) => {
   const logTimestamp = useProfilerLogging();
 
   const sendAnalyticsOnPress = useSendAnalyticsOnPress(
-    item,
+    props.item,
     component,
     zappPipesData
   );
@@ -56,7 +56,7 @@ export const useCellClick = ({ component, zappPipesData, item }: 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 : item;
+      const selectedItem = isZappEntry ? _item : props.item;
       setEntryContext?.(selectedItem);
 
       if (!selectedItem?.type?.value) {
@@ -80,8 +80,8 @@ export const useCellClick = ({ component, zappPipesData, item }: Props) => {
           });
         }
       } else {
-        if (isFunction(onCellTap)) {
-          onCellTap?.(selectedItem, _index);
+        if (typeof onCellTap === "function") {
+          onCellTap(selectedItem, _index);
         } else {
           if (currentRoute === pathname || pathname.includes("video-modal")) {
             const targetScreen = component?.data?.target;

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

@@ -1,26 +1,77 @@
+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",
 };
 
-let INFLATED_URL;
+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,
+});
 
-jest.mock(
-  "@applicaster/zapp-react-native-utils/reactHooks/feed/useInflatedUrl",
-  () => ({
-    useInflatedUrl: () => INFLATED_URL,
-  })
+const wrapper: React.FC<any> = ({ children, store }) => (
+  <Provider store={store}>{children}</Provider>
 );
 
+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 = {
@@ -30,20 +81,12 @@ describe("useBuildPipesUrl", () => {
       },
     };
 
-    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 })
+    const { result, waitForNextUpdate } = renderHook(
+      () => useBuildPipesUrl({ url, mapping }),
+      {
+        wrapper,
+        initialProps: { store: defaultStore },
+      }
     );
 
     expect(result.current.url).toBe("http://foo.com/show/show-1");
@@ -65,7 +108,6 @@ 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 = {
@@ -75,14 +117,12 @@ describe("useBuildPipesUrl", () => {
       },
     };
 
-    const buildResult = {};
-
-    const mockedRequestBuilder = {
-      build: jest.fn(() => Promise.resolve(buildResult)),
-    };
-
-    const { result, waitForNextUpdate } = renderHook(() =>
-      useBuildPipesUrl({ url, mapping, requestBuilder: mockedRequestBuilder })
+    const { result, waitForNextUpdate } = renderHook(
+      () => useBuildPipesUrl({ url, mapping }),
+      {
+        wrapper,
+        initialProps: { store: defaultStore },
+      }
     );
 
     expect(result.current.url).toBe("http://foobar.com/show-1");

package/reactHooks/feed/useBuildPipesUrl.ts

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

package/reactHooks/navigation/index.ts

@@ -13,11 +13,7 @@ import {
 import { HooksManager } from "@applicaster/zapp-react-native-utils/appUtils/HooksManager";
 
 import { legacyScreenData } from "@applicaster/quick-brick-core/App/NavigationProvider/utils";
-import {
-  LONG_KEY_PRESS_TIMEOUT,
-  QUICK_BRICK_NAVBAR,
-  QUICK_BRICK_CONTENT,
-} from "@applicaster/quick-brick-core/const";
+import { LONG_KEY_PRESS_TIMEOUT } from "@applicaster/quick-brick-core/const";
 import { useZappHooksModalState } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal/ZappHooksModal";
 import { ZappHookModalContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
@@ -456,30 +452,3 @@ export const useIsScreenActive = () => {
 
   return pathname === currentRoute;
 };
-
-type Return = (prefix: string) => string;
-
-export const useUniqueRouteSuffix = (): Return => {
-  const pathname = usePathname();
-  const { currentRoute } = useNavigation();
-
-  const suffix = `currentRoute:${currentRoute}_pathname:${pathname}`;
-
-  const withUniqueRouteSuffix = React.useCallback((prefix: string) => {
-    return `${prefix}___${suffix}`;
-  }, []);
-
-  return withUniqueRouteSuffix;
-};
-
-export const useNavbarId = () => {
-  const withUniqueRouteSuffix = useUniqueRouteSuffix();
-
-  return withUniqueRouteSuffix(QUICK_BRICK_NAVBAR);
-};
-
-export const useContentId = () => {
-  const withUniqueRouteSuffix = useUniqueRouteSuffix();
-
-  return withUniqueRouteSuffix(QUICK_BRICK_CONTENT);
-};

package/reactHooks/screen/__tests__/useCurrentScreenData.test.tsx

@@ -3,28 +3,23 @@ import { Provider } from "react-redux";
 import { renderHook } from "@testing-library/react-hooks";
 import configureStore from "redux-mock-store";
 import thunk from "redux-thunk";
+import { NavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NavigationContext";
 
 const mockStore = configureStore([thunk]);
 
-const river_id_2: ZappRiver = {
-  name: "River 2",
-  id: "A1234",
-  home: false,
-  home_offline: false,
-  supports_offline: false,
-  navigations: [],
-  hooks: { preload_plugins: [] },
-};
-
-jest.mock("../useScreenContext", () => ({
-  useScreenContext: () => ({
-    screen: river_id_2,
-  }),
-}));
-
-const { useCurrentScreenData } = require("../useCurrentScreenData");
-
-describe("useScreenData", () => {
+import { useCurrentScreenData } from "../useCurrentScreenData";
+
+describe("useScreenData", function () {
+  const river_id_2: ZappRiver = {
+    name: "River 2",
+    id: "A1234",
+    home: false,
+    home_offline: false,
+    supports_offline: false,
+    navigations: [],
+    hooks: { preload_plugins: [] },
+  };
+
   const river_id_1 = { id: "B5678" };
 
   const store = mockStore({
@@ -32,10 +27,17 @@ describe("useScreenData", () => {
   });
 
   const wrapper: React.FC<any> = ({ children }) => (
-    <Provider store={store}>{children}</Provider>
+    <NavigationContext.Provider
+      value={{
+        currentRoute: "/river/river_id_1/river/river_id_2",
+        data: { screen: river_id_2 },
+      }}
+    >
+      <Provider store={store}>{children}</Provider>
+    </NavigationContext.Provider>
   );
 
-  it("should return river data for the current screen/route", () => {
+  it("should return river data for the current screen/route", function () {
     const { result } = renderHook(() => useCurrentScreenData(), { wrapper });
 
     expect(result.current).toBe(river_id_2);

package/reactHooks/screen/index.ts

@@ -10,5 +10,3 @@ export {
   useNavbarState,
   useSetNavbarState,
 } from "./useScreenContext";
-
-export { useScreenBackgroundColor } from "./useScreenBackgroundColor";

package/reactHooks/screen/useScreenContext.ts

@@ -45,7 +45,8 @@ export function useSetNavbarState() {
 
 export function useScreenContext(): NavigationScreenData {
   const navigator = useNavigation();
-  const screenData = useContext(ScreenDataContext);
+  // Cover cases where screenContext is used before navigation is initialized
+  const screenData = useContext(ScreenDataContext) || navigator.data;
 
   const modalScreenData = navigator?.modalData;
 

package/appUtils/focusManager/utils/index.ts

@@ -1,100 +0,0 @@
-import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
-import { find, last, startsWith, pathOr } from "ramda";
-import {
-  QUICK_BRICK_NAVBAR,
-  QUICK_BRICK_CONTENT,
-} from "@applicaster/quick-brick-core/const";
-
-// run check each 300 ms
-// run this check too often could lead to performance penalty on low-end devices
-const HOW_OFTEN_TO_CHECK_CONDITION = 300; // ms
-
-type Props = {
-  maxTimeout: number;
-  conditionFn: () => boolean;
-};
-
-export const waitUntil = ({ maxTimeout, conditionFn }: Props) => {
-  let interval;
-  let timeout;
-
-  return new Promise((resolve, reject) => {
-    // run interval check
-    interval = setInterval(() => {
-      if (conditionFn()) {
-        clearInterval(interval);
-        clearTimeout(timeout);
-
-        resolve(undefined);
-      }
-    }, HOW_OFTEN_TO_CHECK_CONDITION);
-
-    // max timeout when we need to stop interval check
-    timeout = setTimeout(() => {
-      clearInterval(interval);
-      clearTimeout(timeout);
-
-      const error = Error(
-        "Failed to wait satisfy condition. Max timeout is reached."
-      );
-
-      reject(error);
-    }, maxTimeout);
-  });
-};
-
-export const waitForActiveScreen = (currentRoute: string, focusableTree) => {
-  const isActiveScreenAvailableToFocus = (): boolean => {
-    const routes = focusableTree.root.children;
-
-    const route = find((route) => route.id === currentRoute, routes);
-
-    return isNotNil(route);
-  };
-
-  return waitUntil({
-    maxTimeout: HOW_OFTEN_TO_CHECK_CONDITION * 10, // ms
-    conditionFn: isActiveScreenAvailableToFocus,
-  });
-};
-
-const getActiveScreenChildren = (focusableTree) => {
-  return pathOr([], ["children"], last(focusableTree.root.children));
-};
-
-export const getContentNode = (focusableTree) => {
-  const content = find(
-    (child) =>
-      startsWith(QUICK_BRICK_CONTENT, child.id) ||
-      startsWith("player", child.id),
-    getActiveScreenChildren(focusableTree)
-  );
-
-  return content;
-};
-
-export const getNavbarNode = (focusableTree) => {
-  const navbar = find(
-    (child) => startsWith(QUICK_BRICK_NAVBAR, child.id),
-    getActiveScreenChildren(focusableTree)
-  );
-
-  return navbar;
-};
-
-export const waitForContent = (focusableTree) => {
-  const contentHasAnyChildren = (): boolean => {
-    const countOfChildren = pathOr(
-      0,
-      ["children", "length"],
-      getContentNode(focusableTree)
-    );
-
-    return countOfChildren > 0;
-  };
-
-  return waitUntil({
-    maxTimeout: HOW_OFTEN_TO_CHECK_CONDITION * 10, // ms
-    conditionFn: contentHasAnyChildren,
-  });
-};

package/appUtils/focusManagerAux/index.ts

@@ -1,76 +0,0 @@
-import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
-import { find, path } from "ramda";
-
-import {
-  waitForActiveScreen,
-  waitForContent,
-  getContentNode,
-  getNavbarNode,
-} from "./utils";
-
-import { coreLogger } from "../../logger";
-
-const logger = coreLogger.addSubsystem("focusManagerAux");
-
-export async function setFocusOnMenu(currentRoute: string) {
-  const { setFocus, focusableTree } = focusManager;
-
-  try {
-    await waitForActiveScreen(currentRoute, focusableTree);
-
-    const navbar = getNavbarNode(focusableTree);
-
-    const selectedMenuItemId = find(
-      (child) => child.component.props.selected,
-      navbar.children
-    )?.id;
-
-    if (selectedMenuItemId) {
-      // set focus on selected menu item
-      setFocus(selectedMenuItemId);
-
-      return;
-    }
-
-    const firstMenuItemId = path(["children", 0, "id"], navbar);
-
-    if (firstMenuItemId) {
-      // set focus on first menu item
-      setFocus(firstMenuItemId);
-    }
-  } catch (error) {
-    logger.log({
-      message: "setFocusOnMenu – failed to put focus on top-menu",
-      data: {
-        currentRoute,
-        error,
-      },
-    });
-  }
-}
-
-export async function setFocusOnContent(currentRoute: string) {
-  // we need to put focus on content here
-  // For doing it we have to wait registration of first focusable node into focusableTree
-  // we wait until content node starts having children
-
-  const { setInitialFocus, focusableTree } = focusManager;
-
-  try {
-    await waitForActiveScreen(currentRoute, focusableTree);
-    await waitForContent(focusableTree);
-
-    const content = getContentNode(focusableTree);
-
-    const { success } = setInitialFocus(content);
-
-    if (!success) {
-      // we've failed to put initial focus on content, re-run "setFocusOnContent" again as a fallback
-      throw Error(
-        "we've failed to put initial focus on content, re-run 'setFocusOnContent' again as a fallback"
-      );
-    }
-  } catch (error) {
-    setFocusOnContent(currentRoute);
-  }
-}

package/appUtils/focusManagerAux/utils/index.ts

@@ -1,100 +0,0 @@
-import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
-import { find, last, startsWith, pathOr } from "ramda";
-import {
-  QUICK_BRICK_NAVBAR,
-  QUICK_BRICK_CONTENT,
-} from "@applicaster/quick-brick-core/const";
-
-// run check each 300 ms
-// run this check too often could lead to performance penalty on low-end devices
-const HOW_OFTEN_TO_CHECK_CONDITION = 300; // ms
-
-type Props = {
-  maxTimeout: number;
-  conditionFn: () => boolean;
-};
-
-export const waitUntil = ({ maxTimeout, conditionFn }: Props) => {
-  let interval;
-  let timeout;
-
-  return new Promise((resolve, reject) => {
-    // run interval check
-    interval = setInterval(() => {
-      if (conditionFn()) {
-        clearInterval(interval);
-        clearTimeout(timeout);
-
-        resolve(undefined);
-      }
-    }, HOW_OFTEN_TO_CHECK_CONDITION);
-
-    // max timeout when we need to stop interval check
-    timeout = setTimeout(() => {
-      clearInterval(interval);
-      clearTimeout(timeout);
-
-      const error = Error(
-        "Failed to wait satisfy condition. Max timeout is reached."
-      );
-
-      reject(error);
-    }, maxTimeout);
-  });
-};
-
-export const waitForActiveScreen = (currentRoute: string, focusableTree) => {
-  const isActiveScreenAvailableToFocus = (): boolean => {
-    const routes = focusableTree.root.children;
-
-    const route = find((route) => route.id === currentRoute, routes);
-
-    return isNotNil(route);
-  };
-
-  return waitUntil({
-    maxTimeout: HOW_OFTEN_TO_CHECK_CONDITION * 10, // ms
-    conditionFn: isActiveScreenAvailableToFocus,
-  });
-};
-
-const getActiveScreenChildren = (focusableTree) => {
-  return pathOr([], ["children"], last(focusableTree.root.children));
-};
-
-export const getContentNode = (focusableTree) => {
-  const content = find(
-    (child) =>
-      startsWith(QUICK_BRICK_CONTENT, child.id) ||
-      startsWith("player", child.id),
-    getActiveScreenChildren(focusableTree)
-  );
-
-  return content;
-};
-
-export const getNavbarNode = (focusableTree) => {
-  const navbar = find(
-    (child) => startsWith(QUICK_BRICK_NAVBAR, child.id),
-    getActiveScreenChildren(focusableTree)
-  );
-
-  return navbar;
-};
-
-export const waitForContent = (focusableTree) => {
-  const contentHasAnyChildren = (): boolean => {
-    const countOfChildren = pathOr(
-      0,
-      ["children", "length"],
-      getContentNode(focusableTree)
-    );
-
-    return countOfChildren > 0;
-  };
-
-  return waitUntil({
-    maxTimeout: HOW_OFTEN_TO_CHECK_CONDITION * 10, // ms
-    conditionFn: contentHasAnyChildren,
-  });
-};

package/arrayUtils/__tests__/isFilledArray.test.ts

@@ -1,63 +0,0 @@
-import { isFilledArray } from "..";
-
-describe("isFilledArray", () => {
-  it("non-empty array is not empty", () => {
-    const value = [1, 2, 3];
-
-    expect(isFilledArray(value)).toBe(true);
-  });
-
-  it("empty array is empty", () => {
-    const value = [];
-
-    expect(isFilledArray(value)).toBe(false);
-  });
-
-  it("number is not array", () => {
-    const value = 123;
-
-    expect(isFilledArray(value)).toBe(false);
-  });
-
-  it("string is not array", () => {
-    const value = "vfnjdk";
-
-    expect(isFilledArray(value)).toBe(false);
-  });
-
-  it("empty string is not array", () => {
-    const value = "";
-
-    expect(isFilledArray(value)).toBe(false);
-  });
-
-  it("NaN is not array", () => {
-    const value = "";
-
-    expect(isFilledArray(value)).toBe(false);
-  });
-
-  it("object is not array", () => {
-    const value = { test: 1 };
-
-    expect(isFilledArray(value)).toBe(false);
-  });
-
-  it("empty object is not array", () => {
-    const value = {};
-
-    expect(isFilledArray(value)).toBe(false);
-  });
-
-  it("undefined is not array", () => {
-    const value = undefined;
-
-    expect(isFilledArray(value)).toBe(false);
-  });
-
-  it("null is not array", () => {
-    const value = null;
-
-    expect(isFilledArray(value)).toBe(false);
-  });
-});

package/reactHooks/screen/useScreenBackgroundColor.ts

@@ -1,23 +0,0 @@
-import * as React from "react";
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import { useScreenConfiguration } from "@applicaster/zapp-react-native-ui-components/Components/River/useScreenConfiguration";
-import { ifEmptyUseFallback } from "@applicaster/zapp-react-native-utils/cellUtils";
-
-export const useScreenBackgroundColor = (screenId: string): string => {
-  const { backgroundColor: screenBackgroundColor } =
-    useScreenConfiguration(screenId);
-
-  const theme = useTheme();
-
-  const themeBackgroundColor = React.useMemo(
-    () => theme.app_background_color,
-    [theme.app_background_color]
-  );
-
-  const backgroundColor = ifEmptyUseFallback(
-    screenBackgroundColor,
-    themeBackgroundColor
-  );
-
-  return backgroundColor;
-};