@applicaster/zapp-react-native-utils 14.0.0-alpha.8583696651 → 14.0.0-alpha.9203091422

package/package.json

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

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/feed/__tests__/useFeedLoader.test.tsx

@@ -138,6 +138,11 @@ describe("useFeedLoader", () => {
       expect(loadPipesDataSpy).toBeCalledWith(feedUrl, {
         clearCache: true,
         riverId: undefined,
+        resolvers: {
+          screen: {
+            screenStateStore: undefined,
+          },
+        },
       });
 
       const store2 = mockStore({
@@ -179,6 +184,11 @@ describe("useFeedLoader", () => {
       expect(loadPipesDataSpy).toBeCalledWith(feedUrl, {
         clearCache: true,
         riverId: undefined,
+        resolvers: {
+          screen: {
+            screenStateStore: undefined,
+          },
+        },
       });
 
       const store2 = mockStore({
@@ -228,6 +238,11 @@ describe("useFeedLoader", () => {
         expect(loadPipesDataSpy).toBeCalledWith(feedUrl, {
           clearCache: true,
           silentRefresh: true,
+          resolvers: {
+            screen: {
+              screenStateStore: undefined,
+            },
+          },
         });
 
         loadPipesDataSpy.mockRestore();
@@ -267,6 +282,11 @@ describe("useFeedLoader", () => {
         expect(loadPipesDataSpy).toBeCalledWith(nextUrl, {
           parentFeed: feedUrlWithNext,
           silentRefresh: true,
+          resolvers: {
+            screen: {
+              screenStateStore: undefined,
+            },
+          },
         });
 
         loadPipesDataSpy.mockRestore();

package/reactHooks/feed/useFeedLoader.tsx

@@ -8,6 +8,7 @@ import { reactHooksLogger } from "../logger";
 import { shouldDispatchData, useIsInitialRender } from "../utils";
 import { useInflatedUrl } from "./useInflatedUrl";
 import { useRoute } from "../navigation";
+import { useScreenResolvers } from "@applicaster/zapp-react-native-utils/actionsExecutor/screenResolver";
 
 const logger = reactHooksLogger.addSubsystem("useFeedLoader");
 
@@ -51,6 +52,7 @@ export const useFeedLoader = ({
   const isInitialRender = useIsInitialRender();
   const dispatch = useDispatch();
   const { screenData } = useRoute();
+  const resolvers = useScreenResolvers();
 
   const callableFeedUrl = useInflatedUrl({ feedUrl, mapping });
 
@@ -69,11 +71,12 @@ export const useFeedLoader = ({
             silentRefresh,
             callback,
             riverId,
+            resolvers,
           })
         );
       }
     },
-    [callableFeedUrl]
+    [callableFeedUrl, resolvers]
   );
 
   const loadNext: FeedLoaderResponse["loadNext"] = React.useCallback(() => {
@@ -86,11 +89,12 @@ export const useFeedLoader = ({
             silentRefresh: true,
             parentFeed: callableFeedUrl,
             riverId,
+            resolvers,
           })
         );
       }
     }
-  }, [callableFeedUrl, currentFeed?.data?.next]);
+  }, [callableFeedUrl, currentFeed?.data?.next, resolvers]);
 
   useEffect(() => {
     if (
@@ -102,6 +106,7 @@ export const useFeedLoader = ({
             ...pipesOptions,
             clearCache: true,
             riverId,
+            resolvers,
           })
         );
       } else if (!callableFeedUrl) {
@@ -126,14 +131,16 @@ export const useFeedLoader = ({
         jsOnly: true,
       });
     }
-  }, []);
+  }, [resolvers]);
 
   // Reload feed when feedUrl changes, unless skipLoading is true
   useEffect(() => {
     if (!isInitialRender && callableFeedUrl && !pipesOptions.skipLoading) {
-      dispatch(loadPipesData(callableFeedUrl, { ...pipesOptions, riverId }));
+      dispatch(
+        loadPipesData(callableFeedUrl, { ...pipesOptions, riverId, resolvers })
+      );
     }
-  }, [callableFeedUrl]);
+  }, [callableFeedUrl, resolvers]);
 
   return React.useMemo(() => {
     if (!callableFeedUrl || !feedUrl) {

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 { useRoute } from "./useRoute";
+import { useMemo } from "react";
+
+export const useScreenStateStore = () => {
+  const route = useRoute(false);
+
+  return useMemo(() => route.screenData["screenStateStore"], [route.pathname]);
+};

package/storage/ScreenSingleValueProvider.ts

@@ -0,0 +1,201 @@
+import { BehaviorSubject } from "rxjs";
+import { SingleValueProvider } from "./StorageSingleSelectProvider";
+import { createLogger } from "../logger";
+import { bridgeLogger } from "../../zapp-react-native-bridge/logger";
+
+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: ScreenStateStore
+  ): 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: ScreenStateStore
+  ) {
+    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: ScreenStateStore): 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();
+  }
+}

package/storage/ScreenStateMultiSelectProvider.ts

@@ -0,0 +1,290 @@
+import { MultiSelectProvider } from "./StorageMultiSelectProvider";
+import { BehaviorSubject } from "rxjs";
+import { createLogger } from "../logger";
+import { bridgeLogger } from "../../zapp-react-native-bridge/logger";
+
+export const { log_debug, log_error } = createLogger({
+  category: "ScreenMultiSelectProvider",
+  subsystem: "zapp-react-native-bridge",
+  parent: bridgeLogger,
+});
+
+export class ScreenMultiSelectProvider implements MultiSelectProvider {
+  // @ts-ignore
+  private itemSubject: BehaviorSubject<string[] | null>;
+  private screenStateStoreUnsubscribe: (() => void) | null = null;
+
+  private static providers: Record<
+    string,
+    Record<string, MultiSelectProvider>
+  > = {};
+
+  public static getProvider(
+    key: string,
+    screenRoute: string,
+    screenStateStore: ScreenStateStore
+  ): MultiSelectProvider {
+    if (!key) {
+      throw new Error("ScreenMultiSelectProvider: Key is required");
+    }
+
+    if (!screenRoute) {
+      throw new Error("ScreenMultiSelectProvider: Screen route is required");
+    }
+
+    if (!screenStateStore) {
+      throw new Error(
+        "ScreenMultiSelectProvider: screen state store is required"
+      );
+    }
+
+    if (!this.providers[screenRoute]) {
+      this.providers[screenRoute] = {};
+    }
+
+    try {
+      if (!this.providers[screenRoute][key]) {
+        this.providers[screenRoute][key] = new ScreenMultiSelectProvider(
+          key,
+          screenRoute,
+          screenStateStore
+        );
+      } else {
+        (
+          this.providers[screenRoute][key] as ScreenMultiSelectProvider
+        ).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: ScreenStateStore
+  ) {
+    if (!key) {
+      throw new Error("ScreenMultiSelectProvider: Key is required");
+    }
+
+    if (!screenStateStore) {
+      throw new Error(
+        "ScreenMultiSelectProvider: screen state store is required"
+      );
+    }
+
+    this.key = key;
+    this.itemSubject = new BehaviorSubject<string[]>([]);
+
+    this.setupScreenStateSubscription();
+
+    void this.getSelectedAsync();
+
+    log_debug("ScreenMultiSelectProvider: Initializing", { key, route });
+  }
+
+  private updateStore(screenStateStore: ScreenStateStore): void {
+    if (screenStateStore === this.screenStateStore) {
+      return;
+    }
+
+    this.cleanup();
+    this.screenStateStore = screenStateStore;
+    this.setupScreenStateSubscription();
+    void this.getSelectedAsync();
+  }
+
+  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(
+            `ScreenMultiSelectProvider: Key deleted from store: ${this.key}`
+          );
+
+          // TODO: If we need to handle deletion, we can do it here
+        }
+
+        if (current.value !== previous.value) {
+          const items = this.parseStoredValue(current.value);
+          this.itemSubject.next(items);
+
+          log_debug(`ScreenMultiSelectProvider: Key updated: ${this.key}`, {
+            previous: this.parseStoredValue(previous.value),
+            current: items,
+          });
+        }
+      }
+    );
+
+    log_debug(
+      `ScreenMultiSelectProvider: screen state store subscription setup for key: ${this.key}`
+    );
+  }
+
+  private parseStoredValue(value: string): string[] {
+    if (!value) return [];
+
+    return typeof value === "string"
+      ? value.split(",").filter((item) => item.length > 0)
+      : [];
+  }
+
+  private formatValueForStorage(items: string[]): string {
+    return items.join(",");
+  }
+
+  private getCurrentItems(): Set<string> {
+    const currentValue = this.screenStateStore.getState().data[this.key];
+    const items = this.parseStoredValue(currentValue);
+
+    return new Set(items);
+  }
+
+  private updateScreenState(items: Set<string>): void {
+    const itemsArray = Array.from(items);
+    const formattedValue = this.formatValueForStorage(itemsArray);
+
+    this.screenStateStore.getState().setValue(this.key, formattedValue);
+    const itemsToUpdate = Array.from(items) || [];
+    this.itemSubject.next(itemsToUpdate);
+  }
+
+  private cleanup(): void {
+    if (this.screenStateStoreUnsubscribe) {
+      this.screenStateStoreUnsubscribe();
+      this.screenStateStoreUnsubscribe = null;
+
+      log_debug(
+        `ScreenMultiSelectProvider: Unsubscribed from screen state store for key: ${this.key}`
+      );
+    }
+  }
+
+  addItem(item: string): Promise<void> {
+    const items = this.getCurrentItems();
+    items.add(item);
+    this.updateScreenState(items);
+
+    log_debug(
+      `addItem: item added: ${item}, current items: [${Array.from(items).join(", ")}]`
+    );
+
+    return Promise.resolve();
+  }
+
+  addItems(itemsToAdd: string[]): Promise<void> {
+    const items = this.getCurrentItems();
+
+    for (const item of itemsToAdd) {
+      items.add(item);
+    }
+
+    this.updateScreenState(items);
+
+    log_debug(
+      `addItems: items added: [${itemsToAdd.join(", ")}], current items: [${Array.from(items).join(", ")}]`
+    );
+
+    return Promise.resolve();
+  }
+
+  public getObservable = (): BehaviorSubject<string[]> => this.itemSubject;
+
+  getSelectedAsync(): Promise<string[]> {
+    const currentValue = this.screenStateStore.getState().data[this.key] || [];
+    const values = this.parseStoredValue(currentValue);
+    const selected = this.getSelectedItems();
+
+    const arraysAreEqual =
+      Array.isArray(values) &&
+      Array.isArray(selected) &&
+      values.length === selected.length &&
+      values.every((val, index) => val === selected[index]);
+
+    const bothEmpty = values.length === 0 && selected.length === 0;
+
+    if (!this.itemSubject.closed && !arraysAreEqual && !bothEmpty) {
+      this.itemSubject.next(values);
+    }
+
+    return Promise.resolve(values);
+  }
+
+  getSelectedItems(): string[] {
+    return this.itemSubject.value || [];
+  }
+
+  removeAllItems(): Promise<void> {
+    this.screenStateStore.getState().removeValue(this.key);
+    this.itemSubject.next([]);
+
+    log_debug(`removeAllItems: all items removed for key: ${this.key}`);
+
+    return Promise.resolve();
+  }
+
+  removeItem(item: string): Promise<void> {
+    const items = this.getCurrentItems();
+    items.delete(item);
+
+    this.updateScreenState(items);
+
+    log_debug(
+      `removeItem: item removed: ${item}, remaining items: ${Array.from(items).join(", ")}`
+    );
+
+    return Promise.resolve();
+  }
+
+  removeItems(itemsToRemove: string[]): Promise<void> {
+    const items = this.getCurrentItems();
+
+    for (const item of itemsToRemove) {
+      items.delete(item);
+    }
+
+    this.updateScreenState(items);
+
+    log_debug(
+      `removeItems: items removed: [${itemsToRemove.join(", ")}], remaining items: [${Array.from(items).join(", ")}]`
+    );
+
+    return Promise.resolve();
+  }
+
+  setSelectedItems(items: string[]): Promise<void> {
+    this.updateScreenState(new Set(items));
+    log_debug(`setSelectedItems: items set to: [${items.join(", ")}]`);
+
+    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 ScreenMultiSelectProvider).destroy();
+      });
+
+      delete this.providers[screenRoute];
+    }
+  }
+
+  // TODO: remove if not needed
+
+  public destroy(): void {
+    this.itemSubject.complete();
+    this.cleanup();
+  }
+}