@applicaster/zapp-react-native-ui-components 14.0.0-rc.51 → 14.0.0-rc.52

package/Components/Cell/__tests__/CellWIthFocusable.test.js

@@ -1,12 +1,13 @@
 import { View } from "react-native";
 import React from "react";
-import { act, render } from "@testing-library/react-native";
+import { act } from "@testing-library/react-native";
 import { CellWithFocusable } from "../CellWithFocusable.tsx";
 
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils/index.tsx";
 
 const renderWith = (props) => {
-  return render(<CellWithFocusable {...props} />);
+  return renderWithProviders(<CellWithFocusable {...props} />);
 };
 
 describe("CellWithFocusable", () => {

package/Components/FeedLoader/FeedLoader.tsx

@@ -1,25 +1,16 @@
 import React from "react";
 import * as R from "ramda";
+import { selectZappPipes } from "@applicaster/zapp-react-native-redux";
 
 type Props = {
-  zappPipes: ZappPipesData;
-  loadPipesData: (
-    feed: string,
-    options?: Partial<{
-      clearCache: boolean;
-      meta: any;
-      loadLocalFavorites: boolean;
-      silentRefresh: boolean;
-      parentFeed: ZappFeed;
-      callback: () => void;
-      bodyParams: any;
-      riverId: string;
-    }>
-  ) => void;
+  zappPipes: ReturnType<typeof selectZappPipes>;
+  loadPipesData: ReturnType<
+    typeof import("@applicaster/zapp-react-native-utils/reactHooks/feed").useLoadPipesDataDispatch
+  >;
   feedUrl: string;
   children: (feed: ZappFeed) => React.ComponentType<any>;
   onFeedLoaded: (feed: ZappFeed) => {};
-  onError: (feed: ZappFeed) => {};
+  onError: (error: ZappPipesData["error"]) => {};
   refreshing: boolean;
   refreshCallback: () => void;
 };

package/Components/FeedLoader/FeedLoaderHOC.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import {
+  selectZappPipes,
+  useAppSelector,
+} from "@applicaster/zapp-react-native-redux";
+import { useLoadPipesDataDispatch } from "@applicaster/zapp-react-native-utils/reactHooks/feed";
+
+export const FeedLoaderHOC = (_Component: any) => {
+  return function FeedLoaderHOC(props: any) {
+    const zappPipes = useAppSelector(selectZappPipes);
+    const loadPipesData = useLoadPipesDataDispatch();
+
+    return (
+      <_Component
+        {...props}
+        zappPipes={zappPipes}
+        loadPipesData={loadPipesData}
+      />
+    );
+  };
+};

package/Components/FeedLoader/index.js

@@ -1,10 +1,4 @@
-import * as R from "ramda";
-
-import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
-import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
-
 import { FeedLoaderComponent } from "./FeedLoader";
+import { FeedLoaderHOC } from "./FeedLoaderHOC";
 
-export const FeedLoader = connectToStore(R.pick(["zappPipes"]), {
-  loadPipesData,
-})(FeedLoaderComponent);
+export const FeedLoader = FeedLoaderHOC(FeedLoaderComponent);

package/Components/GeneralContentScreen/utils/useCurationAPI.ts

@@ -3,8 +3,6 @@ import { all, equals, path, prop, isEmpty, pluck, values } from "ramda";
 import { useEffect, useMemo } from "react";
 
 import {
-  ZappPipes,
-  useAppDispatch,
   useLayoutPresets,
   useZappPipesFeed,
 } from "@applicaster/zapp-react-native-redux";
@@ -25,6 +23,7 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks/feed/useInflatedUrl";
 
 import { produce } from "immer";
+import { useLoadPipesDataDispatch } from "@applicaster/zapp-react-native-utils/reactHooks";
 // types reference
 
 declare interface CurationEntry {
@@ -126,8 +125,6 @@ export const getFinalComponents = (
 export const useCurationAPI = (
   components: Array<ZappUIComponent>
 ): ZappUIComponent[] => {
-  const dispatch = useAppDispatch();
-
   const smartComponents = useMemo(
     () => components?.filter?.(isSmartComponent) ?? [],
     [components]
@@ -163,17 +160,19 @@ export const useCurationAPI = (
 
   const urls = useMemo<string[]>(() => Object.values(urlsMap), [urlsMap]);
 
+  const loadPipesDataDispatcher = useLoadPipesDataDispatch();
+
   useEffect(() => {
     urls.forEach((url, index) => {
       if (url) {
-        dispatch(ZappPipes.loadPipesData(url, { clearCache: false }));
+        loadPipesDataDispatcher(url, { clearCache: false });
       } else {
         logger.log_error("Curation url is empty", {
           componentId: smartComponents?.[index]?.id,
         });
       }
     });
-  }, [urls]);
+  }, [urls, loadPipesDataDispatcher]);
 
   const feeds = useZappPipesFeed(urls);
   const layoutPresets = useLayoutPresets();

package/Components/MasterCell/DefaultComponents/ActionButton.tsx

@@ -23,6 +23,7 @@ type Props = {
   style: ViewStyle;
   testID?: string;
   accessibilityLabel?: string;
+  accessibilityHint?: string;
   cellUUID?: string;
   extraProps?: Record<string, any>;
 };
@@ -98,6 +99,7 @@ export function ActionButton(props: Props) {
       onPress={onPress}
       testID={props?.testID || `${item?.id}`}
       accessibilityLabel={props?.accessibilityLabel || `${item?.id}`}
+      accessibilityHint={props?.accessibilityHint}
       accessible={!!(props?.testID || props?.accessibilityLabel)}
       style={props?.style}
     >

package/Components/MasterCell/utils/behaviorProvider.ts

@@ -1,28 +1,58 @@
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
-import { StorageSingleValueProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageSingleSelectProvider";
+import { StorageSingleValueProvider } from "@applicaster/zapp-react-native-utils/storage/StorageSingleSelectProvider";
 import { PushTopicManager } from "@applicaster/zapp-react-native-bridge/PushNotifications/PushTopicManager";
-import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageMultiSelectProvider";
+import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-utils/storage/StorageMultiSelectProvider";
 import React, { useEffect } from "react";
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
 import { BehaviorSubject } from "rxjs";
 import { masterCellLogger } from "../logger";
 import get from "lodash/get";
-
-const parseContextKey = (key: string): string | null => {
-  if (!key?.startsWith("@{ctx/")) return null;
-
-  return key.substring("@{ctx/".length, key.length - 1);
+import { ScreenMultiSelectProvider } from "@applicaster/zapp-react-native-utils/storage/ScreenStateMultiSelectProvider";
+import { ScreenSingleValueProvider } from "@applicaster/zapp-react-native-utils/storage/ScreenSingleValueProvider";
+import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
+
+const parseContextKey = (
+  key: string,
+  context: string = "ctx"
+): string | null => {
+  if (!key?.startsWith(`@{${context}/`)) return null;
+
+  return key.substring(`@{${context}/`.length, key.length - 1);
 };
 
 const getDataSourceProvider = (
-  behavior: Behavior
+  behavior: Behavior,
+  screenRoute: string,
+  screenStateStore: ReturnType<typeof useScreenStateStore>
 ): BehaviorSubject<string[] | string> | null => {
   if (!behavior) return null;
 
   const selection = String(behavior.current_selection);
+  const screenKey = parseContextKey(selection, "screen");
+
+  if (screenKey) {
+    if (behavior.select_mode === "multi") {
+      return ScreenMultiSelectProvider.getProvider(
+        screenKey,
+        screenRoute,
+        screenStateStore
+      ).getObservable();
+    }
+
+    if (behavior.select_mode === "single") {
+      return ScreenSingleValueProvider.getProvider(
+        screenKey,
+        screenRoute,
+        screenStateStore
+      ).getObservable();
+    }
+  }
+
   const contextKey = parseContextKey(selection);
 
   if (contextKey) {
+    // TODO: Add storage scope to behavior
     if (behavior.select_mode === "multi") {
       return StorageMultiSelectProvider.getProvider(contextKey).getObservable();
     }
@@ -41,6 +71,8 @@ const getDataSourceProvider = (
 
 export const useBehaviorUpdate = (behavior: Behavior) => {
   const [lastUpdate, setLastUpdate] = React.useState<number | null>(null);
+  const screenRoute = useRoute()?.pathname || "";
+  const screenStateStore = useScreenStateStore();
   const player = usePlayer();
 
   const triggerUpdate = () => setLastUpdate(Date.now());
@@ -48,7 +80,11 @@ export const useBehaviorUpdate = (behavior: Behavior) => {
   useEffect(() => {
     if (!behavior) return;
 
-    const dataSource = getDataSourceProvider(behavior);
+    const dataSource = getDataSourceProvider(
+      behavior,
+      screenRoute,
+      screenStateStore
+    );
 
     if (dataSource) {
       const subscription = dataSource.subscribe(triggerUpdate);
@@ -72,10 +108,17 @@ export const useBehaviorUpdate = (behavior: Behavior) => {
 
 // We cant use async in this function (its inside render),
 // so we rely on useBehaviorUpdate to update current value and trigger re-render
-export const isCellSelected = (
-  item: ZappEntry,
-  behavior?: Behavior
-): boolean => {
+export const isCellSelected = ({
+  item,
+  screenRoute,
+  screenStateStore,
+  behavior,
+}: {
+  item: ZappEntry;
+  screenRoute: string;
+  screenStateStore: ReturnType<typeof useScreenStateStore>;
+  behavior?: Behavior;
+}): boolean => {
   if (!behavior) return false;
 
   const id = behavior.selector ? get(item, behavior.selector) : item.id;
@@ -99,7 +142,32 @@ export const isCellSelected = (
   }
 
   const selection = String(behavior.current_selection);
-  const contextKey = parseContextKey(selection);
+
+  const screenKey = parseContextKey(selection, "screen");
+
+  if (screenKey) {
+    if (behavior.select_mode === "single") {
+      const selectedItem = ScreenSingleValueProvider.getProvider(
+        screenKey,
+        screenRoute,
+        screenStateStore
+      ).getValue();
+
+      return selectedItem === String(id);
+    }
+
+    if (behavior.select_mode === "multi") {
+      const selectedItems = ScreenMultiSelectProvider.getProvider(
+        screenKey,
+        screenRoute,
+        screenStateStore
+      ).getSelectedItems();
+
+      return selectedItems?.includes(String(id));
+    }
+  }
+
+  const contextKey = parseContextKey(selection, "ctx");
 
   if (contextKey) {
     if (behavior.select_mode === "single") {

package/Components/MasterCell/utils/index.ts

@@ -8,6 +8,8 @@ import { masterCellLogger } from "../logger";
 import { getCellState } from "../../Cell/utils";
 import { getColorFromData } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { isCellSelected, useBehaviorUpdate } from "./behaviorProvider";
+import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
 
 const hasElementSpecificViewType = (viewType) => (element) => {
   if (R.isNil(element)) {
@@ -190,10 +192,6 @@ export const getFocusedButtonId = (focusable) => {
   });
 };
 
-export const isSelected = (item: ZappEntry, behavior?: Behavior) => {
-  return isCellSelected(item, behavior);
-};
-
 export const useCellState = ({
   item,
   behavior,
@@ -204,9 +202,17 @@ export const useCellState = ({
   focused: boolean;
 }): CellState => {
   const lastUpdate = useBehaviorUpdate(behavior);
+  const router = useRoute();
+  const screenStateStore = useScreenStateStore();
 
   const _isSelected = useMemo(
-    () => isSelected(item, behavior),
+    () =>
+      isCellSelected({
+        item,
+        screenRoute: router?.pathname,
+        screenStateStore,
+        behavior,
+      }),
     [behavior, item, lastUpdate]
   );
 

package/Components/River/RefreshControl.tsx

@@ -13,10 +13,7 @@ import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/react
 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 {
-  ZappPipes,
-  useAppDispatch,
-} from "@applicaster/zapp-react-native-redux";
+import { useLoadPipesDataDispatch } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 const BRIGHTNESS_THRESHOLD = 160;
 const ABOVE_DEFAULT_COLOR = "gray";
@@ -63,38 +60,33 @@ export const usePullToRefresh = (
 ) => {
   const isPipesV1 = !!pullToRefreshPipesV1RefreshingStateUpdater;
 
-  const dispatch = useAppDispatch();
-
   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(
-          ZappPipes.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/Contexts/ScreenContext/index.tsx

@@ -13,7 +13,8 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useModalNavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ModalNavigationContext";
 import { useNestedNavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NestedNavigationContext";
-import { create, StoreApi, UseBoundStore } from "zustand";
+import { create } from "zustand";
+import { subscribeWithSelector } from "zustand/middleware";
 import { useShallow } from "zustand/react/shallow";
 import { Animated } from "react-native";
 
@@ -39,11 +40,26 @@ interface NavBarState {
   setSummary: (subtitle: string) => void;
 }
 
-type ScreenContextType = {
-  _navBarStore: UseBoundStore<StoreApi<NavBarStoreState>>;
-  navBar: NavBarState;
-  legacyFormatScreenData: LegacyNavigationScreenData | null;
-};
+const createStateStore = () =>
+  create(
+    subscribeWithSelector<ScreenStateStore>((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) => ({
@@ -65,7 +81,15 @@ const createStore = () =>
     },
   }));
 
+type ScreenContextType = {
+  _navBarStore: ReturnType<typeof createStore>;
+  _stateStore: ReturnType<typeof createStateStore>;
+  navBar: NavBarState;
+  legacyFormatScreenData: LegacyNavigationScreenData | null;
+};
+
 export const ScreenContext = createContext<ScreenContextType>({
+  _stateStore: createStateStore(),
   _navBarStore: createStore(),
   navBar: {
     visible: true,
@@ -103,6 +127,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 +202,7 @@ export function ScreenContextProvider({
       value={useMemo(
         () => ({
           _navBarStore: getScreenNavBarState(),
+          _stateStore: getScreenState(),
           navBar: navBarState,
           legacyFormatScreenData: routeScreenData,
         }),