@applicaster/zapp-react-native-ui-components 14.0.0-alpha.5114565431 → 14.0.0-alpha.5203410334

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

@@ -0,0 +1,378 @@
+import { renderHook, act } from "@testing-library/react-hooks";
+import { BehaviorSubject } from "rxjs";
+import { useLoadingState } from "../useLoadingState";
+
+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/River/RefreshControl.tsx

@@ -10,11 +10,10 @@ import { useLocalizedStrings } from "@applicaster/zapp-react-native-utils/locali
 import { useAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils";
 import { useSendAnalyticsEventWithFunction } from "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks";
 import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useCurrentScreenData";
-import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
-import { useDispatch } from "react-redux";
 import { useShallow } from "zustand/react/shallow";
 import { useScreenContextV2 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useLoadPipesDataDispatch } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 const BRIGHTNESS_THRESHOLD = 160;
 const ABOVE_DEFAULT_COLOR = "gray";
@@ -61,38 +60,33 @@ export const usePullToRefresh = (
 ) => {
   const isPipesV1 = !!pullToRefreshPipesV1RefreshingStateUpdater;
 
-  const dispatch = useDispatch();
-
   const [refreshing, setRefreshing] = React.useState(false);
 
   const feeds: string[] =
     riverComponents?.map(R.path(["data", "source"])).filter((feed) => !!feed) ??
     [];
 
-  const screenData = useCurrentScreenData();
-
   const feedsLength = feeds.length;
 
   const [requestsCompletedCounter, setRequestsCompletedCounter] =
     React.useState(0);
 
+  const loadPipesDataDispatcher = useLoadPipesDataDispatch();
+
   React.useEffect(() => {
     // will not work for pipes v1 on 1st level screens
     if (refreshing && !isPipesV1) {
       feeds.forEach((feed) => {
-        dispatch(
-          loadPipesData(feed, {
-            silentRefresh: true,
-            clearCache: true,
-            callback: () => {
-              setRequestsCompletedCounter(R.inc);
-            },
-            riverId: screenData.id,
-          })
-        );
+        loadPipesDataDispatcher(feed, {
+          silentRefresh: true,
+          clearCache: true,
+          callback: () => {
+            setRequestsCompletedCounter(R.inc);
+          },
+        });
       });
     }
-  }, [refreshing, isPipesV1]);
+  }, [refreshing, isPipesV1, feeds, loadPipesDataDispatcher]);
 
   React.useEffect(() => {
     if (requestsCompletedCounter === feedsLength) {

package/Components/River/__tests__/river.test.js

@@ -1,20 +1,10 @@
 import React from "react";
-import { render, screen } from "@testing-library/react-native";
-import configureStore from "redux-mock-store";
+import { screen } from "@testing-library/react-native";
 import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
-import { Provider } from "react-redux";
 
-import { River } from "../";
 import { ScreenResolver } from "../../ScreenResolver";
 import { RiverComponent } from "../River";
 
-jest.mock(
-  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive",
-  () => ({
-    useIsScreenActive: jest.fn(() => true),
-  })
-);
-
 jest.mock(
   "@applicaster/zapp-react-native-ui-components/Components/GeneralContentScreen",
   () => {
@@ -46,6 +36,13 @@ jest.mock(
   })
 );
 
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive",
+  () => ({
+    useIsScreenActive: jest.fn(() => true),
+  })
+);
+
 const river = {
   home: true,
   id: "A1234",
@@ -89,28 +86,17 @@ const riverProps = {
 
 const appData = { layoutVersion: "v1" };
 
-const store = configureStore()({ rivers, appData });
+const store = { rivers, appData };
 
 describe("When River has a general_content type", () => {
   it("renders GeneralContentScreen correctly", () => {
-    const { getByTestId } = render(
-      <Provider store={store}>
-        <RiverComponent {...riverProps} />
-      </Provider>
+    const { getByTestId } = renderWithProviders(
+      <RiverComponent {...riverProps} />,
+      store
     );
 
     expect(getByTestId("general-content-screen")).toBeTruthy();
   });
-
-  it("renders River component correctly", () => {
-    const wrapper = render(
-      <Provider store={store}>
-        <River screenId="A1234" />
-      </Provider>
-    );
-
-    expect(wrapper.toJSON()).toMatchSnapshot();
-  });
 });
 
 describe("When River has any other type other than general_content", () => {

package/Components/River/index.tsx

@@ -1,5 +1,5 @@
 import * as R from "ramda";
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 
 import { withRiver } from "../../Decorators/RiverResolver";
 import { withNavigator } from "../../Decorators/Navigator";

package/Components/Screen/__tests__/Screen.test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import { act, create } from "react-test-renderer";
+import { render } from "@testing-library/react-native";
 
 const Mocked_RouteManager = jest.fn((props) => (
   <View testID="routeManager" {...props} />
@@ -68,12 +68,33 @@ jest.mock(
   })
 );
 
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/state/useRivers",
+  () => ({
+    useRivers: jest.fn(() => ({
+      rivers: [{ id: "testId", name: "Test River" }],
+    })),
+  })
+);
+
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
   isNavBarVisible: mockIsNavBarVisible,
   useIsScreenActive: jest.fn().mockReturnValue(true),
+  useNavigation: jest.fn(() => ({
+    canGoBack: () => false,
+    currentRoute: "/river/testId",
+    activeRiver: { id: "testId" },
+    screenData: { id: "testId" },
+    data: { screen: { id: "testId" } },
+  })),
+  useRoute: jest.fn(() => ({
+    pathname: "/river/testId",
+    screenData: { id: "testId" },
+  })),
 }));
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  ...jest.requireActual("@applicaster/zapp-react-native-utils/reactHooks"),
   useCurrentScreenData: jest.fn(() => ({
     id: "testId",
   })),
@@ -84,17 +105,6 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
     id: "testId",
     navigations: [{ id: "testId", category: "nav_bar" }],
   })),
-  useNavigation: jest.fn(() => ({
-    canGoBack: () => false,
-    currentRoute: "/river/testId",
-    activeRiver: { id: "testId" },
-    screenData: { id: "testId" },
-    data: { screen: { id: "testId" } },
-  })),
-  useRoute: jest.fn(() => ({
-    pathname: "/river/testId",
-    screenData: { id: "testId" },
-  })),
   useDimensions: jest.fn(() => ({
     width: 1920,
     height: 1080,
@@ -102,10 +112,11 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
   useIsTablet: jest.fn(() => false),
 }));
 
-jest.mock("@applicaster/zapp-react-native-redux/hooks/usePickFromState", () => {
+jest.mock("@applicaster/zapp-react-native-redux/hooks", () => {
   const View = jest.requireActual("react-native").View;
 
   return {
+    ...jest.requireActual("@applicaster/zapp-react-native-redux/hooks"),
     usePickFromState: () => ({
       plugins: [
         {
@@ -141,8 +152,6 @@ const screenProps = {
 const { Screen } = require("..");
 
 describe("<Screen Component />", () => {
-  let wrapper;
-
   beforeEach(() => {
     allowedOrientationsForScreen.mockClear();
     getOrientation.mockClear();
@@ -150,26 +159,16 @@ describe("<Screen Component />", () => {
   });
 
   describe("when the navbar should show", () => {
-    act(() => {
-      wrapper = create(<Screen {...screenProps} />);
-    });
-
     it("renders correctly", () => {
-      expect(wrapper.toJSON()).toMatchSnapshot();
+      const { toJSON } = render(<Screen {...screenProps} />);
+      expect(toJSON()).toMatchSnapshot();
     });
   });
 
   describe("when the navbar should be hidden", () => {
-    beforeEach(() => {
-      wrapper = create(<Screen {...screenProps} />);
-    });
-
     it("renders correctly", () => {
-      act(() => {
-        wrapper = create(<Screen {...screenProps} />);
-      });
-
-      expect(wrapper.toJSON()).toMatchSnapshot();
+      const { toJSON } = render(<Screen {...screenProps} />);
+      expect(toJSON()).toMatchSnapshot();
     });
   });
 });

package/Components/Tabs/Tabs.tsx

@@ -158,12 +158,11 @@ const TabsComponent = ({
 
   const renderItem = React.useCallback(
     ({ item, index, item: { id } }: RenderItemProps) => (
-      <>
+      <React.Fragment key={id}>
         <Tab
           ref={(ref) => {
             tabRefs.current[index] = ref;
           }}
-          key={id}
           {...{
             title: getTitle(item),
             id,
@@ -177,7 +176,7 @@ const TabsComponent = ({
         {display_mode === "fractional" &&
           index !== tabs?.length - 1 &&
           renderGutter()}
-      </>
+      </React.Fragment>
     ),
     [tabs, display_mode, configuration, onTabPress, getTitle, getSelectedItem]
   );