@applicaster/zapp-react-native-utils 14.0.0-alpha.6391068513 → 14.0.0-alpha.6893149866

package/reactHooks/feed/useBatchLoading.ts

@@ -1,15 +1,12 @@
 import { complement, compose, isNil, map, min, prop, take, uniq } from "ramda";
 import * as React from "react";
-import {
-  ZappPipes,
-  useAppDispatch,
-  useZappPipesFeed,
-} from "@applicaster/zapp-react-native-redux";
+import { useZappPipesFeed } from "@applicaster/zapp-react-native-redux";
 import { isNilOrEmpty } from "../../reactUtils/helpers";
 import { ZappPipesSearchContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import {
   getInflatedDataSourceUrl,
   getSearchContext,
+  useLoadPipesDataDispatch,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { isGallery } from "@applicaster/zapp-react-native-utils/componentsUtils";
 import { useScreenContext } from "../screen";
@@ -65,7 +62,6 @@ export const useBatchLoading = (
   componentsToRender: { data?: ZappDataSource; component_type: string }[],
   options: Options
 ) => {
-  const dispatch = useAppDispatch();
   const { screen: screenContext, entry: entryContext } = useScreenContext();
   const [searchContext] = ZappPipesSearchContext.useZappPipesContext();
   const [hasEverBeenReady, setHasEverBeenReady] = React.useState(false);
@@ -122,6 +118,8 @@ export const useBatchLoading = (
 
   const feeds = useZappPipesFeed(feedUrls);
 
+  const loadPipesDataDispatcher = useLoadPipesDataDispatch();
+
   // dispatch loadPipesData for each feed that is not loaded
   const runBatchLoading = React.useCallback(() => {
     batchComponents.forEach((rawData: any) => {
@@ -140,13 +138,20 @@ export const useBatchLoading = (
 
         if (mappedFeedUrl) {
           // 4. load data
-          return dispatch(
-            ZappPipes.loadPipesData(mappedFeedUrl, { riverId: options.riverId })
+          return loadPipesDataDispatcher(
+            mappedFeedUrl,
+            {
+              riverId: options.riverId,
+            },
+            {
+              withResolvers: true,
+              withScreenRouteMapping: true,
+            }
           );
         }
       }
     });
-  }, [feedUrls, feeds]);
+  }, [feedUrls, feeds, loadPipesDataDispatcher]);
 
   React.useEffect(() => {
     runBatchLoading();

package/reactHooks/feed/useFeedLoader.tsx

@@ -1,16 +1,11 @@
 import React, { useEffect } from "react";
 
-import {
-  ZappPipes,
-  useAppDispatch,
-  useZappPipesFeed,
-} from "@applicaster/zapp-react-native-redux";
+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 { useScreenResolvers } from "@applicaster/zapp-react-native-utils/actionsExecutor/screenResolver";
+import { useLoadPipesDataDispatch } from "./useLoadPipesDataDispatch";
 
 const logger = reactHooksLogger.addSubsystem("useFeedLoader");
 
@@ -52,64 +47,62 @@ export const useFeedLoader = ({
   }, []);
 
   const isInitialRender = useIsInitialRender();
-  const dispatch = useAppDispatch();
-  const { screenData } = useRoute();
-  const resolvers = useScreenResolvers();
 
   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(
-          ZappPipes.loadPipesData(callableFeedUrl, {
-            clearCache: true,
-            silentRefresh,
-            callback,
-            riverId,
-            resolvers,
-          })
-        );
-      }
+      loadPipesDataDispatcher(
+        callableFeedUrl,
+        {
+          clearCache: true,
+          silentRefresh,
+          callback,
+        },
+        {
+          withResolvers: true,
+        }
+      );
     },
-    [callableFeedUrl, resolvers]
+    [callableFeedUrl]
   );
 
   const loadNext: FeedLoaderResponse["loadNext"] = React.useCallback(() => {
     if (callableFeedUrl) {
       const nextFeed = currentFeed?.data?.next;
 
-      if (nextFeed) {
-        dispatch(
-          ZappPipes.loadPipesData(nextFeed, {
-            silentRefresh: true,
-            parentFeed: callableFeedUrl,
-            riverId,
-            resolvers,
-          })
-        );
-      }
+      loadPipesDataDispatcher(
+        nextFeed,
+        {
+          silentRefresh: true,
+          parentFeed: callableFeedUrl,
+        },
+        {
+          withResolvers: true,
+        }
+      );
     }
-  }, [callableFeedUrl, currentFeed?.data?.next, resolvers]);
+  }, [callableFeedUrl, currentFeed?.data?.next]);
 
   useEffect(() => {
     if (
       shouldDispatchData(callableFeedUrl, currentFeed, pipesOptions.clearCache)
     ) {
       if (callableFeedUrl && !pipesOptions.skipLoading) {
-        dispatch(
-          ZappPipes.loadPipesData(callableFeedUrl, {
+        loadPipesDataDispatcher(
+          callableFeedUrl,
+          {
             ...pipesOptions,
             clearCache: true,
-            riverId,
-            resolvers,
-          })
+          },
+          {
+            withResolvers: true,
+            withScreenRouteMapping: true,
+          }
         );
       } else if (!callableFeedUrl) {
         logger.info({
@@ -133,20 +126,16 @@ export const useFeedLoader = ({
         jsOnly: true,
       });
     }
-  }, [resolvers]);
+  }, []);
 
   // Reload feed when feedUrl changes, unless skipLoading is true
   useEffect(() => {
     if (!isInitialRender && callableFeedUrl && !pipesOptions.skipLoading) {
-      dispatch(
-        ZappPipes.loadPipesData(callableFeedUrl, {
-          ...pipesOptions,
-          riverId,
-          resolvers,
-        })
-      );
+      loadPipesDataDispatcher(callableFeedUrl, pipesOptions, {
+        withResolvers: true,
+      });
     }
-  }, [callableFeedUrl, resolvers]);
+  }, [callableFeedUrl, isInitialRender, pipesOptions.skipLoading]);
 
   return React.useMemo(() => {
     if (!callableFeedUrl || !feedUrl) {

package/reactHooks/feed/useLoadPipesDataDispatch.ts

@@ -0,0 +1,63 @@
+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: {
+        callback?: (data: unknown, error?: Error | null | undefined) => void;
+        riverId?: string;
+        clearCache?: boolean;
+        silentRefresh?: boolean;
+        parentFeed?: string;
+      } = {},
+      {
+        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/navigation/useScreenStateStore.ts

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

package/reactHooks/state/index.ts

@@ -1,5 +1,5 @@
 export { useRivers } from "./useRivers";
 
-export { useHomeRiver } from "./useHomeRiver";
+export { useHomeRiver, getHomeRiver } from "./useHomeRiver";
 
 export { ZStoreProvider, useZStore } from "./ZStoreProvider";

package/reactHooks/state/useHomeRiver.ts

@@ -1,8 +1,10 @@
-import * as R from "ramda";
 import { useRivers } from "./useRivers";
 
+export const getHomeRiver = (rivers: Record<string, ZappRiver>) =>
+  Object.values(rivers).find((river: ZappRiver) => river.home);
+
 export const useHomeRiver = () => {
   const rivers = useRivers();
 
-  return R.compose(R.find(R.propEq("home", true)), R.values)(rivers);
+  return getHomeRiver(rivers);
 };

package/screenPickerUtils/index.ts

@@ -0,0 +1,7 @@
+export const getFocusableId = (id) => `PickerItem.${id}`;
+
+export const getPickerSelectorId = (id) => `PickerSelector.${id}`;
+
+export const SCREEN_PICKER_CONTAINER = "ScreenPickerContainer";
+
+export const getScreenPickerId = (id) => `${SCREEN_PICKER_CONTAINER}.${id}`;

package/storage/ScreenSingleValueProvider.ts

@@ -2,6 +2,7 @@ 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",
@@ -22,7 +23,7 @@ export class ScreenSingleValueProvider implements SingleValueProvider {
   public static getProvider(
     key: string,
     screenRoute: string,
-    screenStateStore: ScreenStateStore
+    screenStateStore: ReturnType<typeof useScreenStateStore>
   ): SingleValueProvider {
     if (!key) {
       throw new Error("ScreenSingleValueProvider: Key is required");
@@ -66,7 +67,7 @@ export class ScreenSingleValueProvider implements SingleValueProvider {
   private constructor(
     private key: string,
     route: string,
-    private screenStateStore: ScreenStateStore
+    private screenStateStore: ReturnType<typeof useScreenStateStore>
   ) {
     if (!key) {
       throw new Error("ScreenSingleValueProvider: Key is required");
@@ -88,7 +89,9 @@ export class ScreenSingleValueProvider implements SingleValueProvider {
     log_debug("ScreenSingleValueProvider: Initializing", { key, route });
   }
 
-  private updateStore(screenStateStore: ScreenStateStore): void {
+  private updateStore(
+    screenStateStore: ReturnType<typeof useScreenStateStore>
+  ): void {
     this.cleanup();
     this.screenStateStore = screenStateStore;
     this.setupScreenStateSubscription();
@@ -100,25 +103,25 @@ export class ScreenSingleValueProvider implements SingleValueProvider {
       (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,
-          });
-        }
-      }
+      })
+      // (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(

package/storage/ScreenStateMultiSelectProvider.ts

@@ -2,6 +2,7 @@ import { MultiSelectProvider } from "./StorageMultiSelectProvider";
 import { BehaviorSubject } from "rxjs";
 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",
@@ -22,7 +23,7 @@ export class ScreenMultiSelectProvider implements MultiSelectProvider {
   public static getProvider(
     key: string,
     screenRoute: string,
-    screenStateStore: ScreenStateStore
+    screenStateStore: ReturnType<typeof useScreenStateStore>
   ): MultiSelectProvider {
     if (!key) {
       throw new Error("ScreenMultiSelectProvider: Key is required");
@@ -66,7 +67,7 @@ export class ScreenMultiSelectProvider implements MultiSelectProvider {
   private constructor(
     private key: string,
     route: string,
-    private screenStateStore: ScreenStateStore
+    private screenStateStore: ReturnType<typeof useScreenStateStore>
   ) {
     if (!key) {
       throw new Error("ScreenMultiSelectProvider: Key is required");
@@ -88,7 +89,9 @@ export class ScreenMultiSelectProvider implements MultiSelectProvider {
     log_debug("ScreenMultiSelectProvider: Initializing", { key, route });
   }
 
-  private updateStore(screenStateStore: ScreenStateStore): void {
+  private updateStore(
+    screenStateStore: ReturnType<typeof useScreenStateStore>
+  ): void {
     if (screenStateStore === this.screenStateStore) {
       return;
     }
@@ -104,26 +107,26 @@ export class ScreenMultiSelectProvider implements MultiSelectProvider {
       (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,
-          });
-        }
-      }
+      })
+      // (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(

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);
+});

package/utils/__tests__/startsWith.test.ts

@@ -0,0 +1,30 @@
+import { startsWith } from "../startsWith";
+
+describe("startsWith", () => {
+  it("returns false when str is null", () => {
+    expect(startsWith("a", null)).toBe(false);
+  });
+
+  it("returns false when str is undefined", () => {
+    expect(startsWith("a", undefined)).toBe(false);
+  });
+
+  it("returns true when string starts with target", () => {
+    expect(startsWith("he", "hello")).toBe(true);
+    expect(startsWith("", "hello")).toBe(true); // empty target always matches
+  });
+
+  it("returns false when string does not start with target", () => {
+    expect(startsWith("yo", "hello")).toBe(false);
+  });
+
+  it("works with single character target", () => {
+    expect(startsWith("h", "hello")).toBe(true);
+    expect(startsWith("x", "hello")).toBe(false);
+  });
+
+  it("is case-sensitive", () => {
+    expect(startsWith("He", "hello")).toBe(false);
+    expect(startsWith("he", "hello")).toBe(true);
+  });
+});

package/utils/find.ts

@@ -0,0 +1,3 @@
+export const find = (predicate, xs) => {
+  return (xs || []).find((x, index) => predicate(x, index));
+};

package/utils/index.ts

@@ -2,6 +2,12 @@ export { chunk } from "./chunk";
 
 export { times } from "./times";
 
+export { startsWith } from "./startsWith";
+
+export { find } from "./find";
+
+export { pathOr } from "./pathOr";
+
 export {
   cloneDeep as clone,
   flatten,
@@ -18,4 +24,5 @@ export {
   map,
   trim,
   toString,
+  last,
 } from "lodash";

package/utils/pathOr.ts

@@ -0,0 +1,5 @@
+import { get } from "lodash";
+
+export const pathOr = (defaultValue, path, record) => {
+  return get(record, path, defaultValue);
+};

package/utils/startsWith.ts

@@ -0,0 +1,9 @@
+import { isNil } from "lodash";
+
+export const startsWith = (target, str) => {
+  if (isNil(str)) {
+    return false;
+  }
+
+  return str.startsWith(target);
+};