@applicaster/zapp-react-native-utils 14.0.0-alpha.4104749434 → 14.0.0-alpha.4138342511

package/reactHooks/feed/useFeedLoader.tsx

@@ -1,13 +1,11 @@
 import React, { useEffect } from "react";
-import { useDispatch } from "react-redux";
 
-import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
-import { useZappPipesFeed } from "@applicaster/zapp-react-native-redux/hooks";
+import { useZappPipesFeed } from "@applicaster/zapp-react-native-redux";
 
 import { reactHooksLogger } from "../logger";
 import { shouldDispatchData, useIsInitialRender } from "../utils";
 import { useInflatedUrl } from "./useInflatedUrl";
-import { useRoute } from "../navigation";
+import { useLoadPipesDataDispatch } from "./useLoadPipesDataDispatch";
 
 const logger = reactHooksLogger.addSubsystem("useFeedLoader");
 
@@ -49,29 +47,26 @@ export const useFeedLoader = ({
   }, []);
 
   const isInitialRender = useIsInitialRender();
-  const dispatch = useDispatch();
-  const { screenData } = useRoute();
 
   const callableFeedUrl = useInflatedUrl({ feedUrl, mapping });
 
   const currentFeed = useZappPipesFeed(callableFeedUrl);
 
-  const riverId =
-    (screenData as LegacyNavigationScreenData)?.targetScreen?.id ??
-    screenData?.id;
+  const loadPipesDataDispatcher = useLoadPipesDataDispatch();
 
   const reloadData = React.useCallback<ReloadDataFunction>(
     (silentRefresh = true, callback) => {
-      if (callableFeedUrl) {
-        dispatch(
-          loadPipesData(callableFeedUrl, {
-            clearCache: true,
-            silentRefresh,
-            callback,
-            riverId,
-          })
-        );
-      }
+      loadPipesDataDispatcher(
+        callableFeedUrl,
+        {
+          clearCache: true,
+          silentRefresh,
+          callback,
+        },
+        {
+          withResolvers: true,
+        }
+      );
     },
     [callableFeedUrl]
   );
@@ -80,15 +75,16 @@ export const useFeedLoader = ({
     if (callableFeedUrl) {
       const nextFeed = currentFeed?.data?.next;
 
-      if (nextFeed) {
-        dispatch(
-          loadPipesData(nextFeed, {
-            silentRefresh: true,
-            parentFeed: callableFeedUrl,
-            riverId,
-          })
-        );
-      }
+      loadPipesDataDispatcher(
+        nextFeed,
+        {
+          silentRefresh: true,
+          parentFeed: callableFeedUrl,
+        },
+        {
+          withResolvers: true,
+        }
+      );
     }
   }, [callableFeedUrl, currentFeed?.data?.next]);
 
@@ -97,12 +93,16 @@ export const useFeedLoader = ({
       shouldDispatchData(callableFeedUrl, currentFeed, pipesOptions.clearCache)
     ) {
       if (callableFeedUrl && !pipesOptions.skipLoading) {
-        dispatch(
-          loadPipesData(callableFeedUrl, {
+        loadPipesDataDispatcher(
+          callableFeedUrl,
+          {
             ...pipesOptions,
             clearCache: true,
-            riverId,
-          })
+          },
+          {
+            withResolvers: true,
+            withScreenRouteMapping: true,
+          }
         );
       } else if (!callableFeedUrl) {
         logger.info({
@@ -131,9 +131,11 @@ export const useFeedLoader = ({
   // Reload feed when feedUrl changes, unless skipLoading is true
   useEffect(() => {
     if (!isInitialRender && callableFeedUrl && !pipesOptions.skipLoading) {
-      dispatch(loadPipesData(callableFeedUrl, { ...pipesOptions, riverId }));
+      loadPipesDataDispatcher(callableFeedUrl, pipesOptions, {
+        withResolvers: true,
+      });
     }
-  }, [callableFeedUrl]);
+  }, [callableFeedUrl, isInitialRender, pipesOptions.skipLoading]);
 
   return React.useMemo(() => {
     if (!callableFeedUrl || !feedUrl) {

package/reactHooks/feed/useLoadPipesDataDispatch.ts

@@ -0,0 +1,57 @@
+import {
+  useAppDispatch,
+  ZappPipes,
+} from "@applicaster/zapp-react-native-redux";
+import { applyScreenRouteDefaults } from "@applicaster/zapp-react-native-redux/ZappPipes/feedProcessor";
+import React from "react";
+import { useScreenResolvers } from "../../actionsExecutor/screenResolver";
+import { useRoute } from "../navigation";
+import { useScreenStateStore } from "../navigation/useScreenStateStore";
+
+export const useLoadPipesDataDispatch = () => {
+  const screenStateStore = useScreenStateStore();
+  const resolvers = useScreenResolvers();
+  const dispatch = useAppDispatch();
+
+  const { pathname, screenData } = useRoute();
+
+  const riverId =
+    (screenData as LegacyNavigationScreenData)?.targetScreen?.id ??
+    screenData?.id;
+
+  const onLoadCB = (options) => (data, _err) => {
+    options?.callback?.();
+
+    if (data) {
+      applyScreenRouteDefaults(data, screenStateStore, pathname);
+    }
+  };
+
+  return React.useCallback(
+    (
+      url: string,
+      options = {},
+      {
+        withResolvers = false,
+        withScreenRouteMapping = false,
+      }: {
+        withResolvers?: boolean;
+        withScreenRouteMapping?: boolean;
+      } = {}
+    ) => {
+      if (url) {
+        dispatch(
+          ZappPipes.loadPipesData(url, {
+            riverId,
+            resolvers: withResolvers ? resolvers : undefined,
+            ...options,
+            callback: withScreenRouteMapping
+              ? onLoadCB(options)
+              : options?.callback,
+          })
+        );
+      }
+    },
+    []
+  );
+};

package/reactHooks/feed/usePipesCacheReset.ts

@@ -1,11 +1,11 @@
 import React from "react";
-import { useDispatch } from "react-redux";
 
 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";
+import { useAppDispatch } from "@applicaster/zapp-react-native-redux";
 
 /**
  * reset river components cache when screen is unmounted
@@ -13,7 +13,7 @@ import { useRoute } from "../navigation";
  * @param {Array} riverComponents list of UI components
  */
 export const usePipesCacheReset = (riverId, riverComponents) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const { screenData, pathname } = useRoute();
   const pipesContexts = usePipesContexts(riverId, pathname);
 

package/reactHooks/flatList/useSequentialRenderItem.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as R from "ramda";
-import { View } from "react-native";
+import { View, ViewStyle } from "react-native";
 
 import { platformSelect } from "../../reactUtils";
 
@@ -49,13 +49,13 @@ export const useSequentialRenderItem = (data: Data) => {
         const readyToDisplay =
           index === 0 ? true : arePreviousComponentsReady(index);
 
-        const displayStyle = {
+        const displayStyle: ViewStyle = {
           display: readyToDisplay ? "flex" : "none",
         };
 
         const readyStyle = {
           visibility: readyToDisplay ? "visible" : "hidden",
-        };
+        } as ViewStyle;
 
         const style = platformSelect({
           tvos: readyStyle,

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

@@ -42,15 +42,17 @@ jest.mock("react-native-safe-area-context", () => ({
 }));
 
 jest.mock("../../../reactUtils", () => ({
+  ...jest.requireActual("../../../reactUtils"),
   platformSelect: jest.fn((specs) => specs[platform] || specs.default),
   isTV: jest.fn(() => mock_tv_flag),
 }));
 
 jest.mock("../../navigation", () => ({
-  useNavigation: () => null,
   useIsScreenActive: () => true,
 }));
 
+jest.mock("../../navigation/useNavigation");
+
 const { Dimensions } = require("react-native");
 const { useDimensions } = require("..");
 

package/reactHooks/layout/useDimensions/__tests__/useDimensions.test.ts

@@ -1,46 +1,48 @@
 import { renderHook } from "@testing-library/react-hooks";
 import { Dimensions, StatusBar } from "react-native";
+import { useDimensions } from "../useDimensions";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux";
 
-const mockUsePickFromState = jest.fn();
-const mockUseIsScreenActive = jest.fn();
-const mockGetInitialDimensions = jest.fn();
-const mockGetDeviceInfo = jest.fn();
+import { useIsScreenActive } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive";
 
-jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
-  ...(jest.requireActual("@applicaster/zapp-react-native-redux/hooks") as {}),
-  usePickFromState: mockUsePickFromState,
-}));
-
-jest.mock("../../../navigation", () => ({
-  useIsScreenActive: mockUseIsScreenActive,
-}));
+jest.mock("@applicaster/zapp-react-native-redux/hooks", () => {
+  return {
+    ...jest.requireActual("@applicaster/zapp-react-native-redux/hooks"),
+    usePickFromState: jest.fn(),
+  };
+});
 
-jest.mock("../helpers", () => ({
-  getInitialDimensions: mockGetInitialDimensions,
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive",
+  () => ({
+    useIsScreenActive: jest.fn().mockReturnValue(true),
+  })
+);
+
+jest.doMock("../helpers", () => ({
+  getInitialDimensions: jest
+    .fn()
+    .mockReturnValue({ width: 100, height: 200, scale: 1, fontScale: 1 }),
 }));
 
 jest.mock("../../getDeviceInfo", () => ({
-  getDeviceInfo: mockGetDeviceInfo,
+  getDeviceInfo: jest.fn().mockReturnValue({ deviceInfo: "testDeviceInfo" }),
 }));
 
-const { useDimensions } = require("../useDimensions");
+const mockDimensions = { width: 100, height: 200, scale: 1, fontScale: 1 };
+
+Dimensions.get = jest.fn().mockReturnValue(mockDimensions);
+
+Dimensions.addEventListener = jest.fn().mockReturnValue({
+  remove: jest.fn(),
+});
 
 describe("useDimensions", () => {
-  const mockDimensions = { width: 100, height: 200, scale: 1, fontScale: 1 };
   const mockAppData = { someData: "test" };
 
   beforeEach(() => {
-    jest.clearAllMocks();
-    Dimensions.get = jest.fn().mockReturnValue(mockDimensions);
-
-    Dimensions.addEventListener = jest.fn().mockReturnValue({
-      remove: jest.fn(),
-    });
-
-    mockUsePickFromState.mockReturnValue({ appData: mockAppData });
-    mockUseIsScreenActive.mockReturnValue(true);
-    mockGetInitialDimensions.mockReturnValue(mockDimensions);
-    mockGetDeviceInfo.mockReturnValue({ deviceInfo: "testDeviceInfo" });
+    StatusBar.currentHeight = 20;
+    (usePickFromState as jest.Mock).mockReturnValue({ appData: mockAppData });
   });
 
   it("returns correct initial dimensions", () => {
@@ -48,12 +50,9 @@ describe("useDimensions", () => {
       useDimensions("window", { fullDimensions: false })
     );
 
-    expect(result.current).toEqual({
-      ...mockDimensions,
+    expect(result.current).toMatchObject({
       statusBarHeight: StatusBar.currentHeight,
     });
-
-    expect(mockGetInitialDimensions).toHaveBeenCalledWith("window");
   });
 
   it("calls handler on mount", () => {
@@ -70,7 +69,7 @@ describe("useDimensions", () => {
       useDimensions("window", { fullDimensions: false })
     );
 
-    mockUseIsScreenActive.mockReturnValue(false);
+    (useIsScreenActive as jest.Mock).mockReturnValue(false);
     rerender();
 
     expect(Dimensions.addEventListener).toHaveBeenCalledWith(
@@ -84,8 +83,7 @@ describe("useDimensions", () => {
       useDimensions("window", { fullDimensions: true })
     );
 
-    expect(result.current).toEqual({
-      ...mockDimensions,
+    expect(result.current).toMatchObject({
       scale: 1,
       fontScale: 1,
       statusBarHeight: StatusBar.currentHeight,
@@ -98,7 +96,7 @@ describe("useDimensions", () => {
     );
 
     expect(result.current.height).toBe(
-      mockDimensions.height - StatusBar.currentHeight ?? 0
+      mockDimensions.height - (StatusBar?.currentHeight ?? 0)
     );
   });
 

package/reactHooks/layout/useDimensions/useDimensions.ts

@@ -10,7 +10,7 @@ import { isTV } from "../../../reactUtils";
 import { Options, UseDimensions } from "../types";
 import { getDeviceInfo } from "../getDeviceInfo";
 import { getInitialDimensions } from "./helpers";
-import { useIsScreenActive } from "../../navigation";
+import { useIsScreenActive } from "../../navigation/useIsScreenActive";
 
 function compensateForScaleIfNeeded(context) {
   return function () {
@@ -24,8 +24,6 @@ const applyScaleToDimensions = R.unless(R.propEq("scale", 1), (dimensions) => ({
   scale: 1,
 }));
 
-const statusBarHeight = StatusBar?.currentHeight;
-
 /**
  * Returns React-native Dimensions object and updates it on any dimension change
  * @param {('screen'|'window')} [context=window] - Dimensions context passed to Dimensions.get method
@@ -37,6 +35,7 @@ export const useDimensions: UseDimensions = (
   context = "window",
   fullDimensions = { fullDimensions: false, updateForInactiveScreens: true }
 ) => {
+  const statusBarHeight = StatusBar?.currentHeight;
   const isActive = useIsScreenActive();
   const { appData } = usePickFromState(["appData"]);
 

package/reactHooks/layout/useLayoutVersion.ts

@@ -1,6 +1,8 @@
 /* eslint-disable no-redeclare */
-import { useSelector } from "react-redux";
-import * as R from "ramda";
+import {
+  useAppSelector,
+  selectLayoutVersion,
+} from "@applicaster/zapp-react-native-redux";
 
 export function useLayoutVersion(): ZappLayoutVersions;
 
@@ -23,9 +25,7 @@ export function useLayoutVersion({
   isV2?: boolean;
   isV1?: boolean;
 } = {}): boolean | ZappLayoutVersions {
-  const layoutVersion = useSelector<any, ZappLayoutVersions>(
-    R.path(["appData", "layoutVersion"])
-  );
+  const layoutVersion = useAppSelector(selectLayoutVersion);
 
   if (isV2) {
     return layoutVersion === "v2";

package/reactHooks/navigation/useRoute.ts

@@ -28,14 +28,19 @@ const isHookPathname = (pathname: string) => /^\/hooks\//.test(pathname);
 
 type VariousScreenData = LegacyNavigationScreenData | ZappRiver | ZappEntry;
 
-export const useRoute = (): {
+export const useRoute = (
+  useLegacy = true
+): {
   screenData: VariousScreenData;
   pathname: string;
 } => {
   const pathname = usePathname() || "";
   const navigator = useNavigation();
+  const screenContext = useContext(ScreenDataContext);
 
-  const screenDataContext = legacyScreenData(useContext(ScreenDataContext));
+  const screenDataContext = useLegacy
+    ? legacyScreenData(screenContext)
+    : screenContext;
 
   const { plugins, contentTypes, rivers } = usePickFromState([
     "plugins",

package/reactHooks/navigation/useScreenStateStore.ts

@@ -0,0 +1,8 @@
+import { useScreenContextV2 } from "../screen/useScreenContext";
+import { useMemo } from "react";
+
+export const useScreenStateStore = () => {
+  const _stateStore = useScreenContextV2()._stateStore;
+
+  return useMemo(() => _stateStore, []);
+};

package/reactHooks/resolvers/__tests__/useCellResolver.test.tsx

@@ -14,6 +14,10 @@ jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
 
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation"
+);
+
 const { useCellResolver } = require("../useCellResolver");
 
 describe("cellResolver", () => {

package/reactHooks/state/useRivers.ts

@@ -1,9 +1,8 @@
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import {
+  useAppSelector,
+  selectRivers,
+} from "@applicaster/zapp-react-native-redux";
 
-const riversSelector = ["rivers"];
-
-export const useRivers = () => {
-  const { rivers } = usePickFromState(riversSelector as any);
-
-  return rivers;
-};
+export function useRivers(): Record<string, ZappRiver> {
+  return useAppSelector(selectRivers);
+}

package/storage/ScreenSingleValueProvider.ts

@@ -0,0 +1,204 @@
+import { BehaviorSubject } from "rxjs";
+import { SingleValueProvider } from "./StorageSingleSelectProvider";
+import { createLogger } from "../logger";
+import { bridgeLogger } from "../../zapp-react-native-bridge/logger";
+import { useScreenStateStore } from "../reactHooks/navigation/useScreenStateStore";
+
+export const { log_debug, log_error } = createLogger({
+  category: "ScreenSingleValueProvider",
+  subsystem: "zapp-react-native-bridge",
+  parent: bridgeLogger,
+});
+
+export class ScreenSingleValueProvider implements SingleValueProvider {
+  // @ts-ignore
+  private valueSubject: BehaviorSubject<string | null>;
+  private screenStateStoreUnsubscribe: (() => void) | null = null;
+
+  private static providers: Record<
+    string,
+    Record<string, SingleValueProvider>
+  > = {};
+
+  public static getProvider(
+    key: string,
+    screenRoute: string,
+    screenStateStore: ReturnType<typeof useScreenStateStore>
+  ): SingleValueProvider {
+    if (!key) {
+      throw new Error("ScreenSingleValueProvider: Key is required");
+    }
+
+    if (!screenRoute) {
+      throw new Error("ScreenSingleValueProvider: Screen route is required");
+    }
+
+    if (!screenStateStore) {
+      throw new Error(
+        "ScreenSingleValueProvider: screen state store is required"
+      );
+    }
+
+    if (!this.providers[screenRoute]) {
+      this.providers[screenRoute] = {};
+    }
+
+    try {
+      if (!this.providers[screenRoute][key]) {
+        this.providers[screenRoute][key] = new ScreenSingleValueProvider(
+          key,
+          screenRoute,
+          screenStateStore
+        );
+      } else {
+        (
+          this.providers[screenRoute][key] as ScreenSingleValueProvider
+        ).updateStore(screenStateStore);
+      }
+    } catch (error) {
+      log_error("Failed to create provider", { key, screenRoute, error });
+      throw error;
+    }
+
+    return this.providers[screenRoute][key];
+  }
+
+  // @ts-ignore
+  private constructor(
+    private key: string,
+    route: string,
+    private screenStateStore: ReturnType<typeof useScreenStateStore>
+  ) {
+    if (!key) {
+      throw new Error("ScreenSingleValueProvider: Key is required");
+    }
+
+    if (!screenStateStore) {
+      throw new Error(
+        "ScreenSingleValueProvider: screen state store is required"
+      );
+    }
+
+    this.key = key;
+    this.valueSubject = new BehaviorSubject<string | null>(null);
+
+    this.setupScreenStateSubscription();
+
+    void this.getValueAsync();
+
+    log_debug("ScreenSingleValueProvider: Initializing", { key, route });
+  }
+
+  private updateStore(
+    screenStateStore: ReturnType<typeof useScreenStateStore>
+  ): void {
+    this.cleanup();
+    this.screenStateStore = screenStateStore;
+    this.setupScreenStateSubscription();
+    void this.getValueAsync();
+  }
+
+  private setupScreenStateSubscription(): void {
+    this.screenStateStoreUnsubscribe = this.screenStateStore.subscribe(
+      (state) => ({
+        value: state.data[this.key],
+        exists: this.key in state.data,
+      })
+      // (current, previous) => {
+      //   if (!current.exists && previous.exists) {
+      //     log_debug(
+      //       `ScreenSingleValueProvider: Key deleted from store: ${this.key}`
+      //     );
+
+      //     // TODO: If we need to handle deletion, we can do it here
+      //   }
+
+      //   if (current.value !== previous.value) {
+      //     this.valueSubject.next(current.value || null);
+
+      //     log_debug(`ScreenSingleValueProvider: Key updated: ${this.key}`, {
+      //       previous: previous.value,
+      //       current: current.value,
+      //     });
+      //   }
+      // }
+    );
+
+    log_debug(
+      `ScreenSingleValueProvider: screen state store subscription setup for key: ${this.key}`
+    );
+  }
+
+  private cleanup(): void {
+    if (this.screenStateStoreUnsubscribe) {
+      this.screenStateStoreUnsubscribe();
+      this.screenStateStoreUnsubscribe = null;
+
+      log_debug(
+        `ScreenSingleValueProvider: Unsubscribed from screen state store for key: ${this.key}`
+      );
+    }
+  }
+
+  clearValue(): Promise<void> {
+    this.screenStateStore.getState().removeValue(this.key);
+    this.valueSubject.next(null);
+
+    log_debug(`clearValue: value cleared for key: ${this.key}`);
+
+    return Promise.resolve();
+  }
+
+  getObservable(): BehaviorSubject<string | null> {
+    return this.valueSubject;
+  }
+
+  getValue(): string | null {
+    return this.valueSubject.value;
+  }
+
+  getValueAsync(): Promise<string | null> {
+    const currentValue = this.screenStateStore.getState().data[this.key];
+    const value = currentValue || null;
+    const selected = this.getValue();
+    const valuesAreEqual = value === selected;
+
+    const bothEmpty =
+      (value === null || value === "") &&
+      (selected === null || selected === "");
+
+    if (!this.valueSubject.closed && !valuesAreEqual && !bothEmpty) {
+      this.valueSubject.next(value);
+    }
+
+    return Promise.resolve(value);
+  }
+
+  setValue(value: string): Promise<void> {
+    this.screenStateStore.getState().setValue(this.key, value);
+    this.valueSubject.next(value);
+
+    log_debug(`setValue: value set for key: ${this.key}`, { value });
+
+    return Promise.resolve();
+  }
+
+  // TODO: remove if not needed
+
+  public static cleanupRoute(screenRoute: string): void {
+    if (this.providers[screenRoute]) {
+      Object.values(this.providers[screenRoute]).forEach((provider) => {
+        (provider as ScreenSingleValueProvider).destroy();
+      });
+
+      delete this.providers[screenRoute];
+    }
+  }
+
+  // TODO: remove if not needed
+
+  public destroy(): void {
+    this.valueSubject.complete();
+    this.cleanup();
+  }
+}