@applicaster/zapp-react-native-ui-components 14.0.0-alpha.5594607030 → 14.0.0-alpha.5974411329

package/Components/MasterCell/utils/index.ts

@@ -217,6 +217,10 @@ export const useCellState = ({
 }): CellState => {
   const lastUpdate = useBehaviorUpdate(behavior);
   const router = useRoute();
+  /** Could be replaced with existing store from useScreenContextV2
+   * const screenContextV2 = useScreenContextV2();
+     const screenStateStore = screenContextV2._stateStore();
+   */
   const screenStateStore = useScreenStateStore();
 
   const _isSelected = useMemo(

package/Components/River/ComponentsMap/hooks/__tests__/useLoadingState.test.ts

@@ -0,0 +1,379 @@
+import { renderHook, act } from "@testing-library/react-hooks";
+import { BehaviorSubject } from "rxjs";
+import { useLoadingState } from "../useLoadingState";
+
+// Mock the useRefWithInitialValue hook
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/state/useRefWithInitialValue",
+  () => ({
+    useRefWithInitialValue: jest.fn((initializer) => ({
+      current: initializer(),
+    })),
+  })
+);
+
+describe("useLoadingState", () => {
+  let onLoadDone: jest.Mock;
+
+  beforeEach(() => {
+    onLoadDone = jest.fn();
+    jest.clearAllMocks();
+  });
+
+  describe("initialization", () => {
+    it("should initialize with correct default state for zero components", () => {
+      const { result } = renderHook(() => useLoadingState(0, onLoadDone));
+
+      const initialState = result.current.loadingState.getValue();
+
+      expect(initialState).toEqual({
+        index: -1,
+        done: true,
+        waitForAllComponents: false,
+      });
+
+      expect(result.current.shouldShowLoadingError).toBe(false);
+    });
+
+    it("should initialize with correct default state for multiple components", () => {
+      const { result } = renderHook(() => useLoadingState(3, onLoadDone));
+
+      const initialState = result.current.loadingState.getValue();
+
+      expect(initialState).toEqual({
+        index: -1,
+        done: false,
+        waitForAllComponents: false,
+      });
+
+      expect(result.current.shouldShowLoadingError).toBe(false);
+    });
+
+    it("should return a BehaviorSubject for loadingState", () => {
+      const { result } = renderHook(() => useLoadingState(3, onLoadDone));
+
+      expect(result.current.loadingState).toBeInstanceOf(BehaviorSubject);
+    });
+  });
+
+  describe("arePreviousComponentsLoaded", () => {
+    it("should return true for index 0 (first component)", () => {
+      const { result } = renderHook(() => useLoadingState(3, onLoadDone));
+
+      expect(result.current.arePreviousComponentsLoaded(0)).toBe(true);
+    });
+
+    it("should return false when previous components are not loaded", () => {
+      const { result } = renderHook(() => useLoadingState(3, onLoadDone));
+
+      expect(result.current.arePreviousComponentsLoaded(1)).toBe(false);
+      expect(result.current.arePreviousComponentsLoaded(2)).toBe(false);
+    });
+
+    it("should return true when all previous components are loaded", () => {
+      const { result } = renderHook(() => useLoadingState(3, onLoadDone));
+
+      act(() => {
+        result.current.onLoadFinished(0);
+      });
+
+      expect(result.current.arePreviousComponentsLoaded(1)).toBe(true);
+      expect(result.current.arePreviousComponentsLoaded(2)).toBe(false);
+
+      act(() => {
+        result.current.onLoadFinished(1);
+      });
+
+      expect(result.current.arePreviousComponentsLoaded(2)).toBe(true);
+    });
+  });
+
+  describe("onLoadFinished", () => {
+    it("should update component state and loading state when component finishes loading", () => {
+      const { result } = renderHook(() => useLoadingState(3, onLoadDone));
+
+      act(() => {
+        result.current.onLoadFinished(0);
+      });
+
+      const state = result.current.loadingState.getValue();
+      expect(state.index).toBe(0);
+      expect(state.done).toBe(false);
+    });
+
+    it("should update index to highest loaded component", () => {
+      const { result } = renderHook(() => useLoadingState(3, onLoadDone));
+
+      act(() => {
+        result.current.onLoadFinished(2);
+      });
+
+      let state = result.current.loadingState.getValue();
+      expect(state.index).toBe(2);
+
+      act(() => {
+        result.current.onLoadFinished(1);
+      });
+
+      state = result.current.loadingState.getValue();
+      expect(state.index).toBe(2); // Should remain 2, not decrease to 1
+    });
+
+    it("should mark as done when all components are loaded", () => {
+      const { result } = renderHook(() => useLoadingState(2, onLoadDone));
+
+      act(() => {
+        result.current.onLoadFinished(0);
+      });
+
+      let state = result.current.loadingState.getValue();
+      expect(state.done).toBe(true); // True because arePreviousComponentsLoaded(1) returns true when component 0 is loaded
+      expect(onLoadDone).toHaveBeenCalledTimes(1);
+
+      act(() => {
+        result.current.onLoadFinished(1);
+      });
+
+      state = result.current.loadingState.getValue();
+      expect(state.done).toBe(true);
+      expect(onLoadDone).toHaveBeenCalledTimes(2); // Called again
+    });
+
+    it("should call onLoadDone when count is 0", () => {
+      const { result } = renderHook(() => useLoadingState(0, onLoadDone));
+
+      const state = result.current.loadingState.getValue();
+      expect(state.done).toBe(true);
+      // onLoadDone is not called on initialization for count 0, only when all components are loaded via dispatch
+    });
+
+    it("should handle loading components out of order", () => {
+      const { result } = renderHook(() => useLoadingState(3, onLoadDone));
+
+      // Load component 2 first
+      act(() => {
+        result.current.onLoadFinished(2);
+      });
+
+      let state = result.current.loadingState.getValue();
+      expect(state.done).toBe(false);
+
+      // Load component 0
+      act(() => {
+        result.current.onLoadFinished(0);
+      });
+
+      state = result.current.loadingState.getValue();
+      expect(state.done).toBe(false);
+
+      // Load component 1 - should complete loading
+      act(() => {
+        result.current.onLoadFinished(1);
+      });
+
+      state = result.current.loadingState.getValue();
+      expect(state.done).toBe(true);
+      expect(onLoadDone).toHaveBeenCalledTimes(1);
+    });
+
+    it("should call onLoadDone again on subsequent dispatches", () => {
+      const { result } = renderHook(() => useLoadingState(2, onLoadDone));
+
+      act(() => {
+        result.current.onLoadFinished(0);
+        result.current.onLoadFinished(1);
+      });
+
+      expect(onLoadDone).toHaveBeenCalledTimes(2); // Called for each dispatch when done is true
+
+      // Try loading again - onLoadDone will be called again because dispatch runs again
+      act(() => {
+        result.current.onLoadFinished(0);
+      });
+
+      expect(onLoadDone).toHaveBeenCalledTimes(3); // Will be called again
+    });
+  });
+
+  describe("onLoadFailed", () => {
+    it("should treat failed components as loaded when SHOULD_FAIL_ON_COMPONENT_LOADING is false", () => {
+      const { result } = renderHook(() => useLoadingState(2, onLoadDone));
+
+      const error = new Error("Load failed");
+
+      act(() => {
+        result.current.onLoadFailed({ error, index: 0 });
+      });
+
+      const state = result.current.loadingState.getValue();
+      expect(state.index).toBe(0);
+      expect(result.current.shouldShowLoadingError).toBe(false);
+    });
+
+    it("should complete loading when all components fail", () => {
+      const { result } = renderHook(() => useLoadingState(2, onLoadDone));
+
+      const error = new Error("Load failed");
+
+      act(() => {
+        result.current.onLoadFailed({ error, index: 0 });
+        result.current.onLoadFailed({ error, index: 1 });
+      });
+
+      const state = result.current.loadingState.getValue();
+      expect(state.done).toBe(true);
+      expect(onLoadDone).toHaveBeenCalledTimes(2); // Called for each failed component
+    });
+
+    it("should handle mixed success and failure", () => {
+      const { result } = renderHook(() => useLoadingState(3, onLoadDone));
+
+      const error = new Error("Load failed");
+
+      act(() => {
+        result.current.onLoadFinished(0);
+        result.current.onLoadFailed({ error, index: 1 });
+        result.current.onLoadFinished(2);
+      });
+
+      const state = result.current.loadingState.getValue();
+      expect(state.done).toBe(true);
+      expect(onLoadDone).toHaveBeenCalledTimes(2); // Called when all components 0,1,2 are handled
+    });
+  });
+
+  describe("loading state observable", () => {
+    it("should emit state changes through BehaviorSubject", () => {
+      const { result } = renderHook(() => useLoadingState(3, onLoadDone)); // Use 3 components so loading component 0 doesn't complete everything
+      const mockSubscriber = jest.fn();
+
+      result.current.loadingState.subscribe(mockSubscriber);
+
+      act(() => {
+        result.current.onLoadFinished(0);
+      });
+
+      // Should have been called twice: initial state + update
+      expect(mockSubscriber).toHaveBeenCalledTimes(2);
+
+      expect(mockSubscriber).toHaveBeenLastCalledWith({
+        index: 0,
+        done: false, // Will be false because we need components 1 and 2 as well
+        waitForAllComponents: false,
+      });
+    });
+
+    it("should preserve waitForAllComponents flag in state updates", () => {
+      const { result } = renderHook(() => useLoadingState(2, onLoadDone));
+
+      act(() => {
+        result.current.onLoadFinished(0);
+      });
+
+      const state = result.current.loadingState.getValue();
+      expect(state.waitForAllComponents).toBe(false);
+    });
+  });
+
+  describe("memoization", () => {
+    it("should return stable references for functions", () => {
+      const { result, rerender } = renderHook(() =>
+        useLoadingState(2, onLoadDone)
+      );
+
+      const firstRender = {
+        onLoadFinished: result.current.onLoadFinished,
+        onLoadFailed: result.current.onLoadFailed,
+        arePreviousComponentsLoaded: result.current.arePreviousComponentsLoaded,
+      };
+
+      rerender();
+
+      expect(result.current.onLoadFinished).toBe(firstRender.onLoadFinished);
+      expect(result.current.onLoadFailed).toBe(firstRender.onLoadFailed);
+
+      expect(result.current.arePreviousComponentsLoaded).toBe(
+        firstRender.arePreviousComponentsLoaded
+      );
+    });
+
+    it("should return stable function references (current behavior)", () => {
+      const { result, rerender } = renderHook(
+        ({ onLoadDone }) => useLoadingState(2, onLoadDone),
+        { initialProps: { onLoadDone } }
+      );
+
+      const firstResult = result.current;
+
+      const newOnLoadDone = jest.fn();
+      rerender({ onLoadDone: newOnLoadDone });
+
+      // Functions should remain the same due to empty dependency arrays (this is the current behavior)
+      expect(result.current.onLoadFinished).toBe(firstResult.onLoadFinished);
+      expect(result.current.onLoadFailed).toBe(firstResult.onLoadFailed);
+    });
+  });
+
+  describe("edge cases", () => {
+    it("should handle duplicate load finished calls gracefully", () => {
+      const { result } = renderHook(() => useLoadingState(2, onLoadDone));
+
+      act(() => {
+        result.current.onLoadFinished(0);
+        result.current.onLoadFinished(0); // Duplicate call
+      });
+
+      const state = result.current.loadingState.getValue();
+      expect(state.index).toBe(0);
+      expect(state.done).toBe(true); // True because loading component 0 makes it done in a 2-component setup
+    });
+
+    it("should handle loading index greater than component count", () => {
+      const { result } = renderHook(() => useLoadingState(2, onLoadDone));
+
+      act(() => {
+        result.current.onLoadFinished(5); // Index out of bounds
+      });
+
+      const state = result.current.loadingState.getValue();
+      expect(state.index).toBe(5);
+      expect(state.done).toBe(false); // Should not be done as not all components loaded
+    });
+
+    it("should handle negative indices", () => {
+      const { result } = renderHook(() => useLoadingState(2, onLoadDone));
+
+      act(() => {
+        result.current.onLoadFinished(-1);
+      });
+
+      const state = result.current.loadingState.getValue();
+      expect(state.index).toBe(-1); // Should remain -1
+    });
+  });
+
+  describe("component count changes", () => {
+    it("should handle changing component count", () => {
+      const { result, rerender } = renderHook(
+        ({ count }) => useLoadingState(count, onLoadDone),
+        { initialProps: { count: 2 } }
+      );
+
+      act(() => {
+        result.current.onLoadFinished(0);
+      });
+
+      // Change count
+      rerender({ count: 3 });
+
+      // The hook should work with the new count
+      act(() => {
+        result.current.onLoadFinished(1);
+        result.current.onLoadFinished(2);
+      });
+
+      const state = result.current.loadingState.getValue();
+      expect(state.done).toBe(true);
+    });
+  });
+});

package/Components/River/ComponentsMap/hooks/useLoadingState.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { isNil, set, lensIndex, T, slice } from "ramda";
+import { isNil, set, lensIndex, slice } from "ramda";
 import { BehaviorSubject } from "rxjs";
 import { useRefWithInitialValue } from "@applicaster/zapp-react-native-utils/reactHooks/state/useRefWithInitialValue";
 
@@ -53,7 +53,7 @@ export const useLoadingState = (
 
     const componentsBefore = slice(0, index, componentStateRef.current);
 
-    return componentsBefore.every(T);
+    return componentsBefore.every(Boolean);
   }, []);
 
   const dispatch = React.useCallback(({ payload }) => {

package/Components/Transitioner/Scene.tsx

@@ -36,7 +36,6 @@ export function CurrentScreenContextProvider({
   screenData: NavigationScreenData;
 }) {
   const { pathname, isActive = false, screenData } = props;
-  console.log("CurrentScreenContextProvider", { screenData });
 
   const [initialScreenData, setInitialScreenData] = React.useState(screenData);
 

package/Contexts/ScreenContext/index.tsx

@@ -41,10 +41,37 @@ interface NavBarState {
 
 type ScreenContextType = {
   _navBarStore: UseBoundStore<StoreApi<NavBarStoreState>>;
+  _stateStore: UseBoundStore<StoreApi<StateStore>>;
   navBar: NavBarState;
   legacyFormatScreenData: LegacyNavigationScreenData | null;
 };
 
+interface StateStore {
+  data: Record<string, any>;
+  setValue: (key: string, value: any) => void;
+  removeValue: (key: string) => void;
+}
+
+// possible replacement of screenStateStore, remove changes in this file if not needed
+const createStateStore = () =>
+  create<StateStore>((set) => ({
+    data: {},
+    setValue: (key, value) =>
+      set((state) => ({
+        data: {
+          ...state.data,
+          [key]: value,
+        },
+      })),
+    removeValue: (key) =>
+      set((state) => {
+        const newData = { ...state.data };
+        delete newData[key];
+
+        return { data: newData };
+      }),
+  }));
+
 const createStore = () =>
   create<NavBarStoreState>((set) => ({
     title: "",
@@ -66,6 +93,7 @@ const createStore = () =>
   }));
 
 export const ScreenContext = createContext<ScreenContextType>({
+  _stateStore: createStateStore(),
   _navBarStore: createStore(),
   navBar: {
     visible: true,
@@ -103,6 +131,21 @@ export function ScreenContextProvider({
     null
   );
 
+  const screenStateRef = useRef<null | ReturnType<typeof createStateStore>>(
+    null
+  );
+
+  const getScreenState = useCallback(() => {
+    if (screenStateRef.current !== null) {
+      return screenStateRef.current;
+    }
+
+    const stateStore = createStateStore();
+    screenStateRef.current = stateStore;
+
+    return stateStore;
+  }, []);
+
   const getScreenNavBarState = useCallback(() => {
     if (screenNavBarStateRef.current !== null) {
       return screenNavBarStateRef.current;
@@ -163,6 +206,7 @@ export function ScreenContextProvider({
       value={useMemo(
         () => ({
           _navBarStore: getScreenNavBarState(),
+          _stateStore: getScreenState(),
           navBar: navBarState,
           legacyFormatScreenData: routeScreenData,
         }),

package/Decorators/RiverFeedLoader/index.tsx

@@ -14,6 +14,7 @@ import {
   usePipesContexts,
 } from "./utils";
 import { useScreenResolvers } from "@applicaster/zapp-react-native-utils/actionsExecutor/screenResolver";
+import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
 
 type RiverProps = {
   dispatch: DispatchProp;
@@ -28,6 +29,7 @@ export function WithRiverFeedLoader(Component: ZappComponent) {
     const { screenData, pathname } = useRoute();
     const resolvers = useScreenResolvers();
     const pipesContexts = usePipesContexts(river.id, pathname);
+    const screenStateStore = useScreenStateStore();
 
     const componentsToLoad = ignoreComponentsWithClearCacheFlag(
       river?.ui_components || []
@@ -54,7 +56,9 @@ export function WithRiverFeedLoader(Component: ZappComponent) {
         nonEmptyDataSources,
         river?.id,
         props.dispatch,
-        resolvers
+        resolvers,
+        screenStateStore,
+        pathname
       );
     }, []);
 

package/Decorators/RiverFeedLoader/utils/index.ts

@@ -5,6 +5,7 @@ import {
   mapPromises,
   reducePromises,
 } from "@applicaster/zapp-react-native-utils/arrayUtils";
+import { applyScreenRouteDefaults } from "@applicaster/zapp-react-native-redux/ZappPipes/feedProcessor";
 
 export { riverIsCurrentRoute, usePipesContexts } from "./usePipesContexts";
 
@@ -16,12 +17,23 @@ export async function loadDatasources(
   urls: string[][],
   riverId,
   dispatch,
-  resolvers
+  resolvers,
+  screenStateStore,
+  pathname
 ) {
   return reducePromises<string, void>(
     mapPromises<string, void>((url) => {
       if (url) {
-        return dispatch(loadPipesData(url, { riverId, resolvers }));
+        const onLoadCB = (data, _err) => {
+          if (data) {
+            // @TODO check if needed somewhere else
+            applyScreenRouteDefaults(data, screenStateStore, pathname);
+          }
+        };
+
+        return dispatch(
+          loadPipesData(url, { riverId, resolvers, callback: onLoadCB })
+        );
       }
     }),
     undefined,

package/Decorators/ZappPipesDataConnector/resolvers/UrlFeedResolver.tsx

@@ -14,8 +14,10 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 import { ComponentDataSourceContext, ZappPipesDataProps } from "../types";
-import { isVerticalListOrGrid, subscribeForKeyChanges } from "../utils";
 import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
+import { isVerticalListOrGrid } from "../utils";
+import { useFilter } from "../utils/useFilter";
+import { subscribeForKeyChanges } from "@applicaster/zapp-pipes-v2-client";
 
 const FAVORITES_TYPE = "FAVOURITES";
 
@@ -211,10 +213,10 @@ export function UrlFeedResolver({
       }
     } else {
       return subscribeForKeyChanges({
-        dataSourceUrl,
+        url: dataSourceUrl,
         pathname,
         screenStateStore,
-        reloadData,
+        callback: reloadData,
       });
     }
   }, [dataSourceUrl, reloadData, pathname, screenStateStore]);
@@ -241,15 +243,26 @@ export function UrlFeedResolver({
     [isLast, component, loadNext]
   );
 
+  const applyItemFilter = useFilter({ url, loading, data, error }, component);
+
   const zappPipesDataProps = useMemo(() => {
     const pipeData = { url, loading, data, error };
 
     return {
-      zappPipesData: applyItemLimit(pipeData, component),
+      zappPipesData: applyItemLimit(applyItemFilter(pipeData), component),
       reloadData,
       loadNextData,
     };
-  }, [url, loading, data, error, component, reloadData, loadNextData]);
+  }, [
+    url,
+    loading,
+    data,
+    error,
+    component,
+    reloadData,
+    loadNextData,
+    applyItemFilter,
+  ]);
 
   return <>{children(zappPipesDataProps)}</>;
 }

package/Decorators/ZappPipesDataConnector/utils/index.ts

@@ -1,45 +1,5 @@
-import {
-  subscribeForUrlContextKeyChanges,
-  subscribeForUrlScreenKeyChanges,
-} from "@applicaster/zapp-pipes-v2-client";
-
 const isVerticalList = (component) => component?.component_type === "list-qb";
 const isGrid = (component) => component?.component_type === "grid-qb";
 
 export const isVerticalListOrGrid = (component) =>
   isVerticalList(component) || isGrid(component);
-
-export const subscribeForKeyChanges = ({
-  dataSourceUrl,
-  pathname,
-  screenStateStore,
-  reloadData,
-}) => {
-  const subscriptions = [];
-
-  if (dataSourceUrl) {
-    subscriptions.push(
-      subscribeForUrlContextKeyChanges(dataSourceUrl, {}, reloadData)
-    );
-  }
-
-  if (dataSourceUrl && pathname && screenStateStore) {
-    subscriptions.push(
-      subscribeForUrlScreenKeyChanges(
-        dataSourceUrl,
-        pathname,
-        screenStateStore,
-        {},
-        reloadData
-      )
-    );
-  }
-
-  return () => {
-    subscriptions.forEach((unsubscribe) => {
-      if (typeof unsubscribe === "function") {
-        unsubscribe();
-      }
-    });
-  };
-};