@applicaster/zapp-react-native-utils 14.0.0-alpha.1661204539 → 14.0.0-alpha.1740013076

package/storage/ScreenSingleValueProvider.ts

@@ -1,22 +1,29 @@
 import { BehaviorSubject } from "rxjs";
-import { log_debug, SingleValueProvider } from "./StorageSingleSelectProvider";
+import { SingleValueProvider } from "./StorageSingleSelectProvider";
+import { createLogger } from "../logger";
+import { bridgeLogger } from "../../zapp-react-native-bridge/logger";
+import { useScreenStateStore } from "../reactHooks/navigation/useScreenStateStore";
 
-export const screenStates: Record<string, Record<string, string>> = {};
+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>
   > = {};
 
-  // TODO: Screen State should be stored outside of this class and should be shared with screen multi-select provider
-  public static getState(screenRoute: string): Record<string, string> {
-    return screenStates[screenRoute] || {};
-  }
-
   public static getProvider(
     key: string,
-    screenRoute: string
+    screenRoute: string,
+    screenStateStore: ReturnType<typeof useScreenStateStore>
   ): SingleValueProvider {
     if (!key) {
       throw new Error("ScreenSingleValueProvider: Key is required");
@@ -26,48 +33,119 @@ export class ScreenSingleValueProvider implements SingleValueProvider {
       throw new Error("ScreenSingleValueProvider: Screen route is required");
     }
 
-    if (!this.providers[screenRoute]) {
-      this.providers[screenRoute] = {};
+    if (!screenStateStore) {
+      throw new Error(
+        "ScreenSingleValueProvider: screen state store is required"
+      );
     }
 
-    if (!this.providers[screenRoute][key]) {
-      this.providers[screenRoute][key] = new ScreenSingleValueProvider(
-        key,
-        screenRoute
-      );
+    if (!this.providers[screenRoute]) {
+      this.providers[screenRoute] = {};
     }
 
-    if (!screenStates[screenRoute]) {
-      screenStates[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 valueSubject: BehaviorSubject<string | null>;
-  p;
   // @ts-ignore
   private constructor(
     private key: string,
-    private route: string
+    route: string,
+    private screenStateStore: ReturnType<typeof useScreenStateStore>
   ) {
     if (!key) {
       throw new Error("ScreenSingleValueProvider: Key is required");
     }
 
-    // localStorage.addListener?.({ key, namespace }, this.reloadValue);
+    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");
+
+    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> {
-    delete [this.route][this.key];
+    this.screenStateStore.getState().removeValue(this.key);
     this.valueSubject.next(null);
 
+    log_debug(`clearValue: value cleared for key: ${this.key}`);
+
     return Promise.resolve();
   }
 
@@ -80,13 +158,47 @@ export class ScreenSingleValueProvider implements SingleValueProvider {
   }
 
   getValueAsync(): Promise<string | null> {
-    return Promise.resolve(this.valueSubject.value);
+    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> {
-    screenStates[this.route][this.key] = value;
+    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

@@ -1,10 +1,19 @@
-import { log_debug, MultiSelectProvider } from "./StorageMultiSelectProvider";
+import { MultiSelectProvider } from "./StorageMultiSelectProvider";
 import { BehaviorSubject } from "rxjs";
-import { screenStates } from "./ScreenSingleValueProvider";
+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: "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,
@@ -13,29 +22,42 @@ export class ScreenMultiSelectProvider implements MultiSelectProvider {
 
   public static getProvider(
     key: string,
-    screenRoute: string
+    screenRoute: string,
+    screenStateStore: ReturnType<typeof useScreenStateStore>
   ): MultiSelectProvider {
     if (!key) {
-      throw new Error("ScreenSingleValueProvider: Key is required");
+      throw new Error("ScreenMultiSelectProvider: Key is required");
     }
 
     if (!screenRoute) {
-      throw new Error("ScreenSingleValueProvider: Screen route is required");
+      throw new Error("ScreenMultiSelectProvider: Screen route is required");
     }
 
-    if (!this.providers[screenRoute]) {
-      this.providers[screenRoute] = {};
+    if (!screenStateStore) {
+      throw new Error(
+        "ScreenMultiSelectProvider: screen state store is required"
+      );
     }
 
-    if (!this.providers[screenRoute][key]) {
-      this.providers[screenRoute][key] = new ScreenMultiSelectProvider(
-        key,
-        screenRoute
-      );
+    if (!this.providers[screenRoute]) {
+      this.providers[screenRoute] = {};
     }
 
-    if (!screenStates[screenRoute]) {
-      screenStates[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];
@@ -44,76 +66,228 @@ export class ScreenMultiSelectProvider implements MultiSelectProvider {
   // @ts-ignore
   private constructor(
     private key: string,
-    private route: string
+    route: string,
+    private screenStateStore: ReturnType<typeof useScreenStateStore>
   ) {
     if (!key) {
-      throw new Error("StorageMultiSelectProvider: Key is required");
+      throw new Error("ScreenMultiSelectProvider: Key is required");
+    }
+
+    if (!screenStateStore) {
+      throw new Error(
+        "ScreenMultiSelectProvider: screen state store is required"
+      );
     }
 
     this.key = key;
-    // this.storage.addListener?.({ key, namespace }, this.reloadItems);
+    this.itemSubject = new BehaviorSubject<string[]>([]);
 
-    this.itemSubject = new BehaviorSubject([]);
+    this.setupScreenStateSubscription();
 
     void this.getSelectedAsync();
-    log_debug("StorageMultiSelectProvider: Initializing");
+
+    log_debug("ScreenMultiSelectProvider: Initializing", { key, route });
+  }
+
+  private updateStore(
+    screenStateStore: ReturnType<typeof useScreenStateStore>
+  ): 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 getSetOfCurrentItems() {
-    const currentResult: string = screenStates[this.route][this.key];
+  private cleanup(): void {
+    if (this.screenStateStoreUnsubscribe) {
+      this.screenStateStoreUnsubscribe();
+      this.screenStateStoreUnsubscribe = null;
 
-    return new Set(currentResult ? currentResult.split(",") : []);
+      log_debug(
+        `ScreenMultiSelectProvider: Unsubscribed from screen state store for key: ${this.key}`
+      );
+    }
   }
 
   addItem(item: string): Promise<void> {
-    const items = this.getSetOfCurrentItems();
+    const items = this.getCurrentItems();
     items.add(item);
-    screenStates[this.route][this.key] = Array.from(items).join(",");
-    this.itemSubject.next(Array.from(items) || []);
+    this.updateScreenState(items);
 
     log_debug(
-      `addItem: item added: ${item}, current items: ${Array.from(items)}`
+      `addItem: item added: ${item}, current items: [${Array.from(items).join(", ")}]`
     );
 
     return Promise.resolve();
   }
 
-  addItems(_items: string[]): Promise<void> {
+  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 values = screenStates[this.route][this.key]?.split(",");
-    this.itemSubject.next(values || []);
+    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 || []);
+    return Promise.resolve(values);
   }
 
   getSelectedItems(): string[] {
-    return this.itemSubject.value;
+    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.getSetOfCurrentItems();
+    const items = this.getCurrentItems();
     items.delete(item);
 
-    screenStates[this.route][this.key] = Array.from(items).join(",");
-    this.itemSubject.next(Array.from(items) || []);
+    this.updateScreenState(items);
+
+    log_debug(
+      `removeItem: item removed: ${item}, remaining items: ${Array.from(items).join(", ")}`
+    );
 
     return Promise.resolve();
   }
 
-  removeItems(_items: string[]): Promise<void> {
+  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> {
+  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();
+  }
 }

package/testUtils/index.tsx

@@ -1,17 +1,16 @@
-import * as R from "ramda";
-
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { render } from "@testing-library/react-native";
 import React, { PropsWithChildren } from "react";
-import { View } from "react-native";
-
+import configureStore from "redux-mock-store";
 import { Provider } from "react-redux";
+import { View } from "react-native";
 import thunk from "redux-thunk";
-import configureStore from "redux-mock-store";
-import { SafeAreaProvider } from "react-native-safe-area-context";
+import * as R from "ramda";
+
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 
-import { render } from "@testing-library/react-native";
-import { AnalyticsProvider } from "../analyticsUtils";
 import { ThemeContext } from "../theme";
+import { AnalyticsProvider } from "../analyticsUtils";
 
 export { getByTestId } from "./getByTestId";
 

package/time/BackgroundTimer.ts

@@ -11,15 +11,17 @@ class BackgroundTimer {
     this.uniqueId = 0;
     this.callbacks = {};
 
-    const EventEmitter = platformSelect({
+    const EventEmitter: typeof DeviceEventEmitter | undefined = platformSelect({
       android: DeviceEventEmitter,
-      ios: undefined,
+      android_tv: DeviceEventEmitter,
+      amazon: DeviceEventEmitter, // probably does not exist and uses android_tv
       default: undefined,
     });
 
     EventEmitter?.addListener("BackgroundTimer.timer.fired", (id: number) => {
-      if (this.callbacks[id]) {
-        const callback = this.callbacks[id];
+      const callback = this.callbacks[id];
+
+      if (callback) {
         delete this.callbacks[id];
         callback();
       }

package/utils/__tests__/find.test.ts

@@ -0,0 +1,36 @@
+import { find } from "../find";
+
+test("example 1", () => {
+  const predicate = <T>(_: T, index: number): boolean => index === 0;
+  const xs = ["1", "2", "2", "3", "4"];
+
+  expect(find(predicate, xs)).toBe("1");
+});
+
+test("example 2", () => {
+  const predicate = <T>(_: T, index: number): boolean => index === 0;
+  const xs: string[] = [];
+
+  expect(find(predicate, xs)).toBe(undefined);
+});
+
+test("example 3", () => {
+  const predicate = () => false;
+  const xs = ["1", "2", "2", "3"];
+
+  expect(find(predicate, xs)).toBe(undefined);
+});
+
+test("example 4", () => {
+  const predicate = <T>(_: T, index: number): boolean => index === 1;
+  const xs = ["1", "2", "2", "3"];
+
+  expect(find(predicate, xs)).toBe("2");
+});
+
+test("example 5", () => {
+  const predicate = <T>(_: T, index: number): boolean => index === 2;
+  const xs = ["1", "2.1", "2", "3", "2", "4"];
+
+  expect(find(predicate, xs)).toBe("2");
+});

package/utils/__tests__/pathOr.test.ts

@@ -0,0 +1,37 @@
+import { pathOr } from "../pathOr";
+
+test("example 1", () => {
+  const defaultValue = "defaultValue";
+  const path = ["a", "b", "c"];
+  const xs = { a: { b: { c: 1 } } };
+
+  const output = 1;
+
+  expect(pathOr(defaultValue, path, xs)).toEqual(output);
+});
+
+test("example 2", () => {
+  const defaultValue = "defaultValue";
+  const path = ["a", "b"];
+  const xs = { a: { b: { c: 1 } } };
+
+  const output = { c: 1 };
+
+  expect(pathOr(defaultValue, path, xs)).toEqual(output);
+});
+
+test("example 3", () => {
+  const defaultValue = "defaultValue";
+  const path = ["a", "b", "x"];
+  const xs = { a: { b: { c: 1 } } };
+
+  expect(pathOr(defaultValue, path, xs)).toBe(defaultValue);
+});
+
+test("example 4", () => {
+  const defaultValue = "defaultValue";
+  const path = ["a", "b", "c"];
+  const xs = undefined;
+
+  expect(pathOr(defaultValue, path, xs)).toBe(defaultValue);
+});