@applicaster/zapp-react-native-utils 13.0.0-alpha.2545325570 → 13.0.0-alpha.2614386581

package/actionsExecutor/ActionExecutorContext.tsx

@@ -1,6 +1,6 @@
 /// <reference types="@applicaster/applicaster-types" />
 import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
-import React, { createContext, useMemo } from "react";
+import React, { createContext, useEffect, useMemo } from "react";
 import {
   actionExecutor as _actionExecutor,
   ActionResult,
@@ -19,8 +19,15 @@ import {
   EntryResolver,
   resolveObjectValues,
 } from "../appUtils/contextKeysManager/contextResolver";
+import { useNavigation } from "../reactHooks";
+import { get } from "lodash";
 
-const { log_error, log_info } = createLogger({
+import {
+  useContentTypes,
+  usePickFromState,
+} from "@applicaster/zapp-react-native-redux/hooks";
+
+export const { log_error, log_info, log_debug } = createLogger({
   subsystem: "ActionExecutorContext",
   category: "General",
 });
@@ -51,6 +58,22 @@ type Props = {
   children: React.ReactNode;
 };
 
+function findParentComponent(
+  childId: string,
+  parent: ZappRiver | ZappUIComponent
+): ZappRiver | ZappUIComponent | null {
+  for (const child of parent.ui_components) {
+    if (child.id === childId) return parent;
+
+    if (child.ui_components) {
+      const found = findParentComponent(childId, child);
+      if (found) return found;
+    }
+  }
+
+  return null;
+}
+
 const prepareDefaultActions = (actionExecutor) => {
   actionExecutor.registerAction("localStorageSet", async (action) => {
     const namespaces = action.options.content;
@@ -65,11 +88,13 @@ const prepareDefaultActions = (actionExecutor) => {
     async (_action, context) => {
       const dispatch = appStore.getDispatch();
 
-      log_info("handleAction: refreshComponent event");
+      const dataSource =
+        context?.component?.data?.source ||
+        findParentComponent(context?.component.id, context?.screenData)?.data
+          ?.source;
 
-      const dataSource = context?.component?.data?.source;
+      log_info(`handleAction: refreshComponent for dataSource:${dataSource}`);
 
-      // TODO: Later we can pass component ids to do refresh instead of current one
       // TODO: In theory we should wait callback to complete, before completing the action, but now it's not needed
       // TODO: handle focused item removal
       dispatch(
@@ -169,8 +194,29 @@ const prepareDefaultActions = (actionExecutor) => {
       action: ActionType,
       context?: Record<string, any>
     ): Promise<ActionResult> => {
+      if (!context) {
+        log_error(
+          "handleAction: localStorageToggleFlag action missing context"
+        );
+
+        return ActionResult.Error;
+      }
+
+      const entry = context?.entry as ZappEntry;
+
+      if (!entry) {
+        log_error(
+          "handleAction: localStorageToggleFlag action missing entry. Entry is required to get the tag."
+        );
+
+        return ActionResult.Error;
+      }
+
+      const tag = action.options?.selector
+        ? get(entry, action.options.selector)
+        : (entry.extensions?.tag ?? entry.id);
+
       const keyNamespace = action.options?.key;
-      const tag = context?.entry?.extensions?.tag;
 
       if (keyNamespace && tag) {
         const multiSelectProvider =
@@ -211,6 +257,10 @@ export function withActionExecutor(Component) {
   prepareDefaultActions(_actionExecutor);
 
   return function ActionExecutorComponent(props: Props) {
+    const navigator = useNavigation();
+    const { rivers } = usePickFromState(["rivers"]);
+    const contentTypes = useContentTypes();
+
     const handlers = useMemo(() => {
       return {
         unregisterAction: _actionExecutor.unregisterAction,
@@ -221,6 +271,44 @@ export function withActionExecutor(Component) {
       };
     }, []);
 
+    useEffect(() => {
+      return _actionExecutor.registerAction(
+        "navigateToScreen",
+        async (action: ActionType, context?: Record<string, any>) => {
+          const screenType = action.options?.typeMapping;
+
+          if (!screenType) {
+            log_error("navigateToScreen: typeMapping option is missing");
+
+            return ActionResult.Error;
+          }
+
+          const screenId = contentTypes?.[screenType]?.screen_id || null;
+
+          if (!screenId) {
+            log_error(
+              `navigateToScreen: can not resolve screen type mapping: ${screenType}`
+            );
+
+            return ActionResult.Error;
+          }
+
+          const river = rivers[screenId];
+
+          if (!river) {
+            log_error("navigateToScreen: can not resolve river");
+
+            return ActionResult.Error;
+          }
+
+          context?.callback?.({ success: false, error: null, abort: true });
+          navigator.replace(river);
+
+          return ActionResult.Success;
+        }
+      );
+    }, [navigator, rivers, contentTypes]);
+
     return (
       <ActionExecutorContext.Provider value={handlers}>
         <Component {...props} />

package/appUtils/HooksManager/Hook.ts

@@ -65,6 +65,10 @@ export class Hook implements HookInterface {
     event: (typeof HOOKS_EVENTS)[keyof typeof HOOKS_EVENTS],
     ...args
   ) {
+    if (this.state === hookState(HOOKS_EVENTS.CANCEL)) {
+      return;
+    }
+
     this.state = hookState(event);
     this.manager.subscriber.invokeHandler(event, ...args);
   }

package/appUtils/HooksManager/index.ts

@@ -269,6 +269,7 @@ export function HooksManager({
       payload = initialPayload,
       callback: callbackArg,
       cancelled,
+      abort,
     }) {
       let callback = callbackArg;
 
@@ -308,6 +309,7 @@ export function HooksManager({
         hookPlugin.setStateAndNotify(HOOKS_EVENTS.CANCEL, {
           hookPlugin,
           payload,
+          abort,
         });
 
         const isHookInHomescreen = payload?.home;

package/appUtils/contextKeysManager/contextResolver.ts

@@ -1,12 +1,6 @@
-import { createLogger } from "../../logger";
 import { ContextKeysManager } from "./index";
 import * as R from "ramda";
 
-const { log_error } = createLogger({
-  subsystem: "contextResolver",
-  category: "General",
-});
-
 interface IResolver {
   resolve: (string) => Promise<string | number | object>;
 }
@@ -64,12 +58,7 @@ export const resolveObjectValues = async (
         return [key, resolvedValue];
       }
 
-      log_error("resolveObjectValues: invalid context string", {
-        key,
-        value,
-      });
-
-      return [key, null];
+      return [key, value];
     })
   );
 

package/dateUtils/index.ts

@@ -2,10 +2,12 @@ import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import timezone from "dayjs/plugin/timezone";
 import isoWeek from "dayjs/plugin/isoWeek";
+import duration from "dayjs/plugin/duration";
 
 // Extend dayjs with plugins
 dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(isoWeek);
+dayjs.extend(duration);
 
 export { dayjs };

package/focusManager/FocusManager.ts

@@ -227,7 +227,9 @@ class FocusManager {
 
       const nextNextFocus = FocusManager.getNextFocusable(direction, nextFocus);
 
-      FocusManager.instance.setFocus(nextNextFocus, options);
+      if (nextNextFocus) {
+        FocusManager.instance.setFocus(nextNextFocus, options);
+      }
     } else {
       FocusManager.instance.setFocusLocal(nextFocus);
 

package/focusManager/index.ts

@@ -8,8 +8,6 @@ import { isNilOrEmpty } from "../reactUtils/helpers";
 import { isAndroidTVPlatform } from "../reactUtils";
 import { noop } from "../functionUtils";
 
-const EMPTY_GROUP_COMPONENT = "empty_group_component";
-
 export function useFocusManager() {
   return focusManager;
 }
@@ -76,14 +74,6 @@ export function useFocusEffect(onFocus, focusWatcher) {
   }, focusWatcher);
 }
 
-export function shouldShowEmptyGroup(component) {
-  return (
-    component?.ui_components?.filter(
-      ({ component_type }) => component_type === EMPTY_GROUP_COMPONENT
-    )?.length > 0
-  );
-}
-
 export const isFocusable = (component: ZappEntry | ZappUIComponent | any) =>
   R.tryCatch(
     R.compose(
@@ -101,6 +91,7 @@ type Props = {
 
 export const useIsFocusable = (props: Props): void => {
   const { component, zappPipesData } = props;
+
   const { setIsFocusable } = useFocusable();
 
   const componentCellsFocusable = toBooleanWithDefaultTrue(
@@ -117,33 +108,18 @@ export const useIsFocusable = (props: Props): void => {
     isNilOrEmpty(zappPipesData?.data) ||
     isNilOrEmpty(zappPipesData?.data?.entry);
 
-  const hasNoUIComponents = isNilOrEmpty(component?.ui_components);
-
   const hasDataError = !!zappPipesData?.error;
 
-  const hasEmptyGroup = shouldShowEmptyGroup(component);
-
-  const isGallery = component?.component_type === "gallery-qb";
-
-  const isGroup = component?.component_type === "group-qb";
-
-  const isHiddenDueToEmptyData =
-    !isLoadingData && hasNoData && hideIfDataEmpty && !hasEmptyGroup;
-
-  const isEmptyGroup = isGroup && hasNoUIComponents;
+  const isHiddenDueToEmptyData = !isLoadingData && hasNoData && hideIfDataEmpty;
 
   const defaultFocusableLogic =
-    componentCellsFocusable &&
-    (!hasNoData || !hideIfDataEmpty) &&
-    !isEmptyGroup;
+    componentCellsFocusable && (!hasNoData || !hideIfDataEmpty);
 
   React.useEffect(() => {
     if (isAndroidTVPlatform()) {
       let isFocusableNew = false;
 
-      if (isGallery) {
-        isFocusableNew = true;
-      } else if (isFocusable(component)) {
+      if (isFocusable(component)) {
         isFocusableNew = defaultFocusableLogic;
       }
 
@@ -152,9 +128,7 @@ export const useIsFocusable = (props: Props): void => {
   }, [
     defaultFocusableLogic,
     isHiddenDueToEmptyData,
-    isGallery,
     setIsFocusable,
     hasDataError,
-    hasEmptyGroup,
   ]);
 };

package/index.d.ts

@@ -105,18 +105,6 @@ declare type NavBarState = {
   title: string;
 };
 
-declare type StorageValuesToAdd = Record<string, NamespaceValues>;
-
-declare type StorageValuesToRemove = {
-  string?: string[];
-};
-
-declare type StorageOwnedValues = {
-  string?: string[];
-};
-
-declare type NamespaceValues = Record<string, string>;
-
 declare type RefreshProps = {
   forceRefresh?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "13.0.0-alpha.2545325570",
+  "version": "13.0.0-alpha.2614386581",
   "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": "13.0.0-alpha.2545325570",
+    "@applicaster/applicaster-types": "13.0.0-alpha.2614386581",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/reactHooks/feed/useFeedLoader.tsx

@@ -5,7 +5,7 @@ import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
 import { useZappPipesFeed } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { reactHooksLogger } from "../logger";
-import { useIsInitialRender, shouldDispatchData } from "../utils";
+import { shouldDispatchData, useIsInitialRender } from "../utils";
 import { useInflatedUrl } from "./useInflatedUrl";
 import { useRoute } from "../navigation";
 
@@ -55,7 +55,9 @@ export const useFeedLoader = ({
 
   const currentFeed = useZappPipesFeed(callableFeedUrl);
 
-  const riverId = screenData?.id;
+  const riverId =
+    (screenData as LegacyNavigationScreenData)?.targetScreen?.id ??
+    screenData?.id;
 
   const reloadData = React.useCallback<ReloadDataFunction>(
     (silentRefresh = true, callback) => {

package/reactHooks/hookModal/hooks/useHookModalScreenData.ts

@@ -0,0 +1,39 @@
+import { reactHooksLogger } from "../../logger";
+import { useZappHooksModalState } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal/hooks/useZappHooksModalState";
+
+const logger = reactHooksLogger.addSubsystem("useHookModalScreenData");
+
+type VariousScreenData = LegacyNavigationScreenData | ZappRiver | ZappEntry;
+
+export const useHookModalScreenData = (): VariousScreenData | undefined => {
+  const hookModalState = useZappHooksModalState();
+
+  if (!hookModalState.state?.screenData) {
+    return;
+  }
+
+  try {
+    const screenData = hookModalState.state.screenData?.payload;
+    const hookPlugin = hookModalState.state.screenData.hookPlugin;
+
+    if (hookPlugin?.screen_id) {
+      return {
+        ...screenData,
+        targetScreen: hookPlugin,
+      };
+    }
+
+    return hookModalState.state.screenData?.payload;
+  } catch (error) {
+    logger.error({
+      message: "Hook modal screen data creation failed",
+      data: {
+        error,
+        hookModalState,
+      },
+      jsOnly: true,
+    });
+
+    return hookModalState.state.screenData?.payload;
+  }
+};

package/reactHooks/navigation/useRoute.ts

@@ -7,9 +7,8 @@ import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { legacyScreenData } from "@applicaster/quick-brick-core/App/NavigationProvider/utils";
 
-import { useZappHooksModalState } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal/hooks/useZappHooksModalState";
-
 import { getTargetScreenData } from "../screen/useTargetScreenData";
+import { useHookModalScreenData } from "../hookModal/hooks/useHookModalScreenData";
 
 import { useNavigation } from "./useNavigation";
 import { useModalStore } from "../../modalState";
@@ -45,11 +44,10 @@ export const useRoute = (): {
   ]);
 
   const { modalState } = useModalStore();
-  const hookModalState = useZappHooksModalState();
 
   const modalScreenData = modalState.screen;
 
-  const hookModalScreenData = hookModalState.state.screenData?.payload;
+  const hookModalScreenData = useHookModalScreenData();
 
   const videoModalScreenData =
     navigator?.videoModalState?.item &&

package/utils/README.md

@@ -0,0 +1,30 @@
+### ramda replacement utils
+
+See contribution guide below
+
+## Reference
+
+Prefer non-fp variant as it more performant - if refactoring assumes you need more efforts rewrite ramda sample to lodash and it can be easily replaced with lodash-fp - use lodash-fp.
+
+### Ramda alternatives:
+
+Custom
+- `splitEvery` => `chunk`
+- `times` => `times`
+
+From `lodash`
+- `clone` => `clone`
+- `flatten` => `flatten`
+- `drop` => `drop`
+- `length` => `size`
+
+
+## Contribution
+
+To add new helper function as ramda replacement
+
+1. Search for replacement ( you can use lodash or pure JS solution), arguments should match with Ramda definition (for easier transition).
+2. Add new file if needed, add test, update exports in index file. 2.1. Make sure it's well-typed.
+3. If the function can-be reexported from other 3rd party lib - update index.ts to re-export it.
+4. Make sure README is updated and contains reference for newly added function.
+5. You can use AI's help. Use query like 'lodash & lodash/fp equivalent of Ramda's R.clone function' to get an options you can use.

package/utils/chunk.ts

@@ -0,0 +1,5 @@
+import { chunk as _chunk } from "lodash";
+
+export const chunk = <T>(size: number, array: T[]): T[][] => {
+  return _chunk(array, size);
+};

package/utils/index.ts

@@ -0,0 +1,5 @@
+export { chunk } from "./chunk";
+
+export { times } from "./times";
+
+export { cloneDeep as clone, flatten, drop, size } from "lodash";

package/utils/times.ts

@@ -0,0 +1,5 @@
+import { times as _times } from "lodash";
+
+export const times = <T>(iteratee: (index: number) => T, n: number) => {
+  return _times(n, iteratee);
+};

package/zappFrameworkUtils/localStorageHelper.ts

@@ -1,6 +1,12 @@
 import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
 import { isNilOrEmpty } from "../reactUtils/helpers";
 import { parseJsonIfNeeded } from "@applicaster/zapp-react-native-utils/functionUtils";
+import {
+  StorageOwnedValues,
+  NamespaceValues,
+  StorageValuesToRemove,
+  StorageValuesToAdd,
+} from "./types";
 
 const defaultOwnedKey = "owned_keys";
 const DEFAULT_NAMESPACE = "applicaster.v2";

package/zappFrameworkUtils/loginPluginUtils.ts

@@ -89,11 +89,15 @@ const runInBackground = async ({
     const shouldPresent = await hookPresentPolicy.shouldPresentScreen();
 
     if (!shouldPresent) {
+      const isRefreshed = await checkUserAuthenticated();
+
       log_info(
-        "runInBackground: Background mode finished, hook plugin will be skipped"
+        `runInBackground: Background mode finished, ${isRefreshed ? "finish hook with completion true" : "refresh failed will presentUI"}`
       );
 
-      await checkUserAuthenticated();
+      isRefreshed
+        ? callback({ success: isRefreshed, payload: item })
+        : presentUI();
 
       return;
     }

package/zappFrameworkUtils/types.ts

@@ -0,0 +1,11 @@
+export type StorageValuesToAdd = Record<string, NamespaceValues>;
+
+export type StorageValuesToRemove = {
+  string?: string[];
+};
+
+export type StorageOwnedValues = {
+  string?: string[];
+};
+
+export type NamespaceValues = Record<string, string>;