@applicaster/zapp-react-native-utils 14.0.0-alpha.5243406255 → 14.0.0-alpha.5351122050

package/appUtils/contextKeysManager/contextResolver.ts

@@ -1,10 +1,13 @@
 import { ContextKeysManager } from "./index";
 import * as R from "ramda";
+import * as _ from "lodash";
+import { useScreenStateStore } from "../../reactHooks/navigation/useScreenStateStore";
 
-interface IResolver {
+export interface IResolver {
   resolve: (string) => Promise<string | number | object>;
 }
 
+// TODO: Rename to ObjectKeyResolver or similar
 export class EntryResolver implements IResolver {
   entry: ZappEntry;
 
@@ -21,6 +24,28 @@ export class EntryResolver implements IResolver {
   }
 }
 
+// TODO: Move to proper place
+
+export class ScreenStateResolver implements IResolver {
+  constructor(
+    private screenStateStore: ReturnType<typeof useScreenStateStore>
+  ) {}
+
+  async resolve(key: string) {
+    const screenState = this.screenStateStore.getState().data;
+
+    if (!key || key.length === 0) {
+      return screenState;
+    }
+
+    if (key.includes(".")) {
+      return R.view(R.lensPath(key.split(".")), screenState);
+    }
+
+    return screenState?.[key];
+  }
+}
+
 export class ContextResolver implements IResolver {
   resolve = async (compositeKey: string) =>
     ContextKeysManager.instance.getKey(compositeKey);
@@ -64,3 +89,19 @@ export const resolveObjectValues = async (
 
   return Object.fromEntries(resolvedEntries);
 };
+
+export const extractAtValues = _.memoize((input: any): string[] => {
+  return _.flatMapDeep(input, (value: any) => {
+    if (_.isString(value)) {
+      const matches = value.match(/@\{([^}]*)\}/g);
+
+      return matches ? matches.map((match) => match.slice(2, -1)) : [];
+    }
+
+    if (_.isObject(value)) {
+      return extractAtValues(_.values(value));
+    }
+
+    return [];
+  });
+});

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

@@ -25,10 +25,10 @@ exports[`focusManager should be defined 1`] = `
   "invokeHandler": [Function],
   "isCurrentFocusOnTheTopScreen": [Function],
   "isFocusDisabled": [Function],
+  "isFocusOn": [Function],
   "isFocusOnContent": [Function],
   "isFocusOnMenu": [Function],
   "isGroupItemFocused": [Function],
-  "isOnRootScreen": [Function],
   "longPress": [Function],
   "moveFocus": [Function],
   "on": [Function],
@@ -67,6 +67,7 @@ exports[`focusManagerIOS should be defined 1`] = `
   "getGroupRootById": [Function],
   "getPreferredFocusChild": [Function],
   "invokeHandler": [Function],
+  "isFocusOn": [Function],
   "isGroupItemFocused": [Function],
   "moveFocus": [Function],
   "on": [Function],

package/appUtils/focusManager/index.ios.ts

@@ -1,6 +1,7 @@
 import { NativeModules } from "react-native";
 import * as R from "ramda";
 
+import { isCurrentFocusOn } from "../focusManagerAux/utils";
 import { Tree } from "./treeDataStructure/Tree";
 import { findFocusableNode } from "./treeDataStructure/Utils";
 import { subscriber } from "../../functionUtils";
@@ -391,6 +392,14 @@ export const focusManager = (function () {
     return node;
   }
 
+  function isFocusOn(id): boolean {
+    const currentFocusNode = focusableTree.findInTree(
+      getCurrentFocus()?.props?.id
+    );
+
+    return id && isCurrentFocusOn(id, currentFocusNode);
+  }
+
   return {
     on,
     invokeHandler,
@@ -412,5 +421,6 @@ export const focusManager = (function () {
     getGroupRootById,
     isGroupItemFocused,
     getPreferredFocusChild,
+    isFocusOn,
   };
 })();

package/appUtils/focusManager/index.ts

@@ -15,12 +15,12 @@ import { coreLogger } from "../../logger";
 import { ACTION } from "./utils/enums";
 
 import {
-  isTabsScreen,
   findSelectedTabId,
   findSelectedMenuId,
-  isTabsMenuFocused,
+  isTabsScreenContentFocused,
   isCurrentFocusOnContent,
   isCurrentFocusOnMenu,
+  isCurrentFocusOn,
 } from "../focusManagerAux/utils";
 
 const logger = coreLogger.addSubsystem("focusManager");
@@ -300,48 +300,46 @@ export const focusManager = (function () {
     return isCurrentFocusOnMenu(currentFocusNode);
   }
 
-  function landFocusTo(id) {
-    if (id) {
-      // set focus on selected menu item
-      const direction = undefined;
+  // Move focus to appropriate top navigation tab with context
+  function focusTopNavigation(isTabsScreen: boolean, item: ZappEntry) {
+    const landFocusTo = (id) => {
+      if (id) {
+        // set focus on selected menu item
+        const direction = undefined;
 
-      const context: FocusManager.FocusContext = {
-        source: "back",
-        preserveScroll: true,
-      };
+        const context: FocusManager.FocusContext = {
+          source: "back",
+          preserveScroll: true,
+        };
 
-      blur(direction);
-      setFocus(id, direction, context);
-    }
-  }
+        logger.log({ message: "landFocusTo", data: { id } });
 
-  // Move focus to appropriate top navigation tab with context
-  function focusTopNavigation() {
-    // Store current focus for restoration
-    // this.storeFocusState();
-
-    if (isTabsScreen(focusableTree) && !isTabsMenuFocused(currentFocusNode)) {
-      const selectedTabId = findSelectedTabId(focusableTree);
+        blur(direction);
+        setFocus(id, direction, context);
+      }
+    };
 
-      console.log("debug_2", "FM - moveFocusToSelectedTab", { selectedTabId });
+    if (isTabsScreen && isTabsScreenContentFocused(currentFocusNode)) {
+      const selectedTabId = findSelectedTabId(item);
 
+      // Set focus with back button context to tabs-menu
       landFocusTo(selectedTabId);
 
       return;
     }
 
-    // Set focus with back button context
     const selectedMenuItemId = findSelectedMenuId(focusableTree);
-
-    console.log("debug_2", "IM - moveFocusToTopMenu", { selectedMenuItemId });
-
+    // Set focus with back button context to top-menu
     landFocusTo(selectedMenuItemId);
   }
 
   /**
    * sets the initial focus when the screen loads, or when focus is lost
    */
-  function setInitialFocus(lastAddedParentNode?: any) {
+  function setInitialFocus(
+    lastAddedParentNode?: any,
+    context?: FocusManager.FocusContext
+  ) {
     const preferredFocus = findPriorityItem(
       lastAddedParentNode?.children || focusableTree.root.children
     );
@@ -387,7 +385,7 @@ export const focusManager = (function () {
         },
       });
 
-      focusableItem && setFocus(focusCandidate.id, null);
+      focusableItem && setFocus(focusCandidate.id, null, context);
 
       return { success: true };
     }
@@ -544,12 +542,6 @@ export const focusManager = (function () {
     return haveSameParentBeforeRoot(currentFocusNode, R.last(routes));
   }
 
-  function isOnRootScreen() {
-    const routes = R.pathOr([], ["root", "children"], focusableTree);
-
-    return routes.length <= 1;
-  }
-
   function recoverFocus() {
     if (!isCurrentFocusOnTheTopScreen()) {
       // We've failed to set focused node on the new screen => run focus recovery
@@ -613,6 +605,14 @@ export const focusManager = (function () {
     return preferredFocus[0];
   }
 
+  function isFocusOn(id): boolean {
+    return (
+      id &&
+      isCurrentFocusOnTheTopScreen() &&
+      isCurrentFocusOn(id, currentFocusNode)
+    );
+  }
+
   /**
    * this is the list of the functions available externally
    * when importing the focus manager
@@ -643,10 +643,9 @@ export const focusManager = (function () {
     recoverFocus,
     isCurrentFocusOnTheTopScreen,
     findPreferredFocusChild,
-
     focusTopNavigation,
     isFocusOnContent,
     isFocusOnMenu,
-    isOnRootScreen,
+    isFocusOn,
   };
 })();

package/appUtils/focusManagerAux/utils/index.ts

@@ -1,15 +1,30 @@
-import { isNil } from "@applicaster/zapp-react-native-utils/utils";
-import { find, last, pathOr, startsWith } from "ramda";
+import {
+  isNil,
+  last,
+  startsWith,
+  find,
+  pathOr,
+} from "@applicaster/zapp-react-native-utils/utils";
+
 import {
   QUICK_BRICK_CONTENT,
   QUICK_BRICK_NAVBAR,
 } from "@applicaster/quick-brick-core/const";
 
+import {
+  getFocusableId,
+  SCREEN_PICKER_CONTAINER,
+} from "@applicaster/zapp-react-native-utils/screenPickerUtils";
+
 // 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
 
-const TABS_GROUP_ID = "PickerSelector.sp-river";
+const isTopMenu = (node) => startsWith(QUICK_BRICK_NAVBAR, node?.id);
+const isContent = (node) => startsWith(QUICK_BRICK_CONTENT, node?.id);
+const isRoot = (node) => node?.id === "root";
+
+const isScrenPicker = (node) => startsWith(SCREEN_PICKER_CONTAINER, node?.id);
 
 type Props = {
   maxTimeout: number;
@@ -102,19 +117,8 @@ export const waitForContent = (focusableTree) => {
   });
 };
 
-export function isTabsScreen(focusableTree) {
-  const tabsGroup = focusableTree.findInTree(TABS_GROUP_ID);
-
-  return !!tabsGroup;
-}
-
-export const findSelectedTabId = (focusableTree) => {
-  // FIXME - find elegant way how to get ID of selected tab
-  const tabsGroup = focusableTree.findInTree(TABS_GROUP_ID);
-
-  const selectedTabId = tabsGroup.children.find(
-    (child) => child.component.props.preferredFocus // ?? selected
-  )?.id;
+export const findSelectedTabId = (item: ZappEntry): string => {
+  const selectedTabId = getFocusableId(item.id);
 
   return selectedTabId;
 };
@@ -131,17 +135,70 @@ export const findSelectedMenuId = (focusableTree) => {
   return selectedMenuItemId;
 };
 
-export const isTabsMenuFocused = (node) => {
-  // FIXME - find elegant way how to get ID of selected tab
-  return node.parent.id === TABS_GROUP_ID;
+export const isTabsScreenContentFocused = (node) => {
+  if (isRoot(node)) {
+    return false;
+  }
+
+  if (isTopMenu(node)) {
+    return false;
+  }
+
+  if (isContent(node)) {
+    return false;
+  }
+
+  if (isScrenPicker(node)) {
+    return true;
+  }
+
+  return isTabsScreenContentFocused(node.parent);
 };
 
 export const isCurrentFocusOnMenu = (node) => {
-  // FIXME
-  return node.parent.id.startsWith(QUICK_BRICK_NAVBAR);
+  if (isRoot(node)) {
+    return false;
+  }
+
+  if (isTopMenu(node)) {
+    return true;
+  }
+
+  if (isContent(node)) {
+    return false;
+  }
+
+  return isCurrentFocusOnMenu(node.parent);
 };
 
 export const isCurrentFocusOnContent = (node) => {
-  // FIXME
-  return !isCurrentFocusOnMenu(node);
+  if (isRoot(node)) {
+    return false;
+  }
+
+  if (isTopMenu(node)) {
+    return false;
+  }
+
+  if (isContent(node)) {
+    return true;
+  }
+
+  return isCurrentFocusOnContent(node.parent);
+};
+
+export const isCurrentFocusOn = (id, node) => {
+  if (!node) {
+    return false;
+  }
+
+  if (isRoot(node)) {
+    return false;
+  }
+
+  if (node?.id === id) {
+    return true;
+  }
+
+  return isCurrentFocusOn(id, node.parent);
 };

package/configurationUtils/__tests__/manifestKeyParser.test.ts

@@ -1,6 +1,5 @@
 import { getAllSpecificStyles } from "../manifestKeyParser";
 
-// Mock the dependencies
 jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
   platformSelect: jest.fn((platforms) => platforms.samsung_tv), // Default to samsung for tests
 }));

package/navigationUtils/index.ts

@@ -42,7 +42,7 @@ export function getNavigationType(
     R.unless(R.isNil, R.prop("navigation_type")),
     R.defaultTo(undefined),
     R.find(R.propEq("category", category))
-  )(navigations);
+  )(navigations || []);
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "14.0.0-alpha.5243406255",
+  "version": "14.0.0-alpha.5351122050",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "14.0.0-alpha.5243406255",
+    "@applicaster/applicaster-types": "14.0.0-alpha.5351122050",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",
@@ -38,7 +38,6 @@
   "peerDependencies": {
     "@applicaster/zapp-pipes-v2-client": "*",
     "@react-native-community/netinfo": "*",
-    "immer": "*",
     "react": "*",
     "react-native": "*",
     "uglify-js": "*",

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

@@ -26,6 +26,9 @@ jest.mock("@applicaster/zapp-react-native-utils/analyticsUtils/", () => ({
 }));
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({
+  ...jest.requireActual(
+    "@applicaster/zapp-react-native-utils/reactHooks/screen"
+  ),
   useTargetScreenData: jest.fn(() => ({})),
   useCurrentScreenData: jest.fn(() => ({})),
 }));

package/reactHooks/cell-click/index.ts

@@ -16,7 +16,8 @@ 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";
+import { useCurrentScreenData, useScreenContext } from "../screen";
+import { useScreenStateStore } from "../navigation/useScreenStateStore";
 
 /**
  * If onCellTap is defined execute the function and
@@ -42,10 +43,12 @@ export const useCellClick = ({
 }: Props): onPressReturnFn => {
   const { push, currentRoute } = useNavigation();
   const { pathname } = useRoute();
+  const screenStateStore = useScreenStateStore();
 
   const onCellTap: Option<Function> = React.useContext(CellTapContext);
   const actionExecutor = React.useContext(ActionExecutorContext);
   const screenData = useCurrentScreenData();
+  const screenState = useScreenContext()?.options;
 
   const cellSelectable = toBooleanWithDefaultTrue(
     component?.rules?.component_cells_selectable
@@ -83,6 +86,9 @@ export const useCellClick = ({
         await actionExecutor?.handleEntryActions(selectedItem, {
           component,
           screenData,
+          screenState,
+          screenRoute: pathname,
+          screenStateStore,
         });
       }
 
@@ -117,6 +123,7 @@ export const useCellClick = ({
       push,
       sendAnalyticsOnPress,
       screenData,
+      screenState,
     ]
   );
 

package/reactHooks/debugging/__tests__/index.test.js

@@ -12,7 +12,6 @@ describe("Debug utils", () => {
     // Clear the timers object
     Object.keys(timers).forEach((key) => delete timers[key]);
 
-    // Mock performance.now()
     // eslint-disable-next-line no-undef
     performanceNowMock = jest.spyOn(performance, "now");
     performanceNowMock.mockReturnValue(0); // Initial value

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

@@ -2,12 +2,16 @@ import { renderHook } from "@testing-library/react-hooks";
 import { allFeedsIsReady, useBatchLoading } from "../useBatchLoading";
 import { WrappedWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
+import { waitFor } from "@testing-library/react-native";
 
 jest.mock("../../navigation");
 
 jest.mock(
   "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext",
   () => ({
+    ...jest.requireActual(
+      "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext"
+    ),
     useScreenContext: jest.fn().mockReturnValue({ screen: {}, entry: {} }),
   })
 );
@@ -33,7 +37,7 @@ describe("useBatchLoading", () => {
     jest.clearAllMocks();
   });
 
-  it("loadPipesData start loading not started requests", () => {
+  it("loadPipesData start loading not started requests", async () => {
     const store = {
       zappPipes: {
         url1: {
@@ -65,7 +69,9 @@ describe("useBatchLoading", () => {
 
     const actions = (appStore.getStore() as any).getActions();
 
-    expect(actions).toHaveLength(2);
+    await waitFor(() => {
+      expect(actions).toHaveLength(2);
+    });
 
     expect(actions[0]).toMatchObject({
       type: "ZAPP_PIPES_REQUEST_START",