@applicaster/zapp-react-native-ui-components 12.0.12 → 12.0.13-rc.0

package/Components/MasterCell/utils/behaviorProvider.ts

@@ -0,0 +1,133 @@
+import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
+import { StorageSingleValueProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageSingleSelectProvider";
+import { PushTopicManager } from "@applicaster/zapp-react-native-bridge/PushNotifications/PushTopicManager";
+import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/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";
+
+const parseContextKey = (key: string): string | null => {
+  if (!key?.startsWith("@{ctx/")) return null;
+
+  return key.substring("@{ctx/".length, key.length - 1);
+};
+
+const getDataSourceProvider = (
+  behavior: Behavior
+): BehaviorSubject<string[] | string> | null => {
+  if (!behavior) return null;
+
+  const selection = String(behavior.current_selection);
+  const contextKey = parseContextKey(selection);
+
+  if (contextKey) {
+    if (behavior.select_mode === "multi") {
+      return StorageMultiSelectProvider.getProvider(contextKey).getObservable();
+    }
+
+    if (behavior.select_mode === "single") {
+      return StorageSingleValueProvider.getProvider(contextKey).getObservable();
+    }
+  }
+
+  if (behavior.selection_source === "@{push/topics}") {
+    return PushTopicManager.getInstance().getEntryObservable();
+  }
+
+  return null;
+};
+
+export const useBehaviorUpdate = (behavior: Behavior) => {
+  const [lastUpdate, setLastUpdate] = React.useState<number | null>(null);
+  const player = usePlayer();
+
+  const triggerUpdate = () => setLastUpdate(Date.now());
+
+  useEffect(() => {
+    if (!behavior) return;
+
+    const dataSource = getDataSourceProvider(behavior);
+
+    if (dataSource) {
+      const subscription = dataSource.subscribe(triggerUpdate);
+
+      return () => subscription.unsubscribe();
+    }
+  }, [behavior]);
+
+  useEffect(() => {
+    if (!behavior || !player || behavior.selection_source !== "now_playing") {
+      return;
+    }
+
+    const subscription = player.getEntryObservable().subscribe(triggerUpdate);
+
+    return () => subscription.unsubscribe();
+  }, [behavior, player]);
+
+  return lastUpdate;
+};
+
+// 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 = (
+  id: string | number,
+  behavior?: Behavior
+): boolean => {
+  if (!behavior) return false;
+
+  if (behavior.selection_source === "now_playing") {
+    const player = playerManager.getActivePlayer();
+
+    return player?.entry?.id === id;
+  }
+
+  if (behavior.selection_source === "@{push/topics}") {
+    if (behavior.select_mode === "single") {
+      masterCellLogger.warning(
+        "Unexpected single selection mode for push topics"
+      );
+    }
+
+    const tags = PushTopicManager.getInstance().getRegisteredTags();
+
+    return tags.includes(String(id));
+  }
+
+  const selection = String(behavior.current_selection);
+  const contextKey = parseContextKey(selection);
+
+  if (contextKey) {
+    if (behavior.select_mode === "single") {
+      const selectedItem =
+        StorageSingleValueProvider.getProvider(contextKey)?.getValue();
+
+      return selectedItem === String(id);
+    }
+
+    if (behavior.select_mode === "multi") {
+      const selectedItems =
+        StorageMultiSelectProvider.getProvider(contextKey)?.getSelectedItems();
+
+      return selectedItems?.includes(String(id));
+    }
+  }
+
+  if (behavior.select_mode === "single") {
+    return behavior.current_selection === id;
+  }
+
+  if (
+    behavior.select_mode === "multi" &&
+    Array.isArray(behavior.current_selection)
+  ) {
+    const currentSelection: string[] = behavior.current_selection.map(
+      (item): string => String(item)
+    );
+
+    return currentSelection.includes(String(id));
+  }
+
+  return false;
+};

package/Components/MasterCell/utils/index.ts

@@ -1,16 +1,13 @@
-import React, { useEffect, useMemo } from "react";
+import React, { useMemo } from "react";
 import * as R from "ramda";
 import validateColor from "validate-color";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 
 import { masterCellLogger } from "../logger";
-import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
-import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
-import { PushTopicManager } from "@applicaster/zapp-react-native-bridge/PushNotifications/PushTopicManager";
-import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageMultiSelectProvider";
 import { getCellState } from "../../Cell/utils";
 import { getColorFromData } from "@applicaster/zapp-react-native-utils/cellUtils";
+import { isCellSelected, useBehaviorUpdate } from "./behaviorProvider";
 
 const hasElementSpecificViewType = (viewType) => (element) => {
   if (R.isNil(element)) {
@@ -194,130 +191,7 @@ export const getFocusedButtonId = (focusable) => {
 };
 
 export const isSelected = (id: string | number, behavior?: Behavior) => {
-  if (!behavior) {
-    return false;
-  }
-
-  if (behavior?.selection_source === "now_playing") {
-    const player = playerManager.getActivePlayer();
-
-    if (player?.entry?.id === id) {
-      return true;
-    }
-  }
-
-  if (behavior?.select_mode === "single") {
-    return behavior.current_selection === id;
-  }
-
-  if (behavior?.select_mode === "multi") {
-    // TODO: Use generic resolver source
-
-    if (behavior.selection_source === "@{push/topics}") {
-      const tags = PushTopicManager.getInstance().getRegisteredTags();
-
-      return tags.includes(String(id));
-    }
-
-    if (Array.isArray(behavior.current_selection)) {
-      return behavior.current_selection.includes(id);
-    }
-
-    const currentSelection = String(behavior.current_selection);
-
-    if (currentSelection?.startsWith("@{ctx/")) {
-      const keyWithoutCtx = currentSelection.substring(
-        "@{ctx/".length,
-        currentSelection.length - 1
-      );
-
-      const selectedItems =
-        StorageMultiSelectProvider.getProvider(
-          keyWithoutCtx
-        )?.getSelectedItems();
-
-      return selectedItems?.includes(String(id));
-    }
-  }
-
-  return false;
-};
-
-export const useBehaviorUpdate = (behavior: Behavior) => {
-  const [lastUpdate, setLastUpdate] = React.useState(null);
-
-  const player = usePlayer();
-
-  const triggerUpdate = () => {
-    setLastUpdate(Date.now());
-  };
-
-  // TODO: Create generic RX to state update
-  useEffect(() => {
-    // TODO: Use generic resolver source
-    if (!behavior) {
-      return;
-    }
-
-    const currentSelection = String(behavior.current_selection);
-
-    if (currentSelection?.startsWith("@{ctx/")) {
-      const keyWithoutCtx = currentSelection.substring(
-        "@{ctx/".length,
-        currentSelection.length - 1
-      );
-
-      if (keyWithoutCtx) {
-        const subscription = StorageMultiSelectProvider.getProvider(
-          keyWithoutCtx
-        )
-          .getObservable()
-          .subscribe(() => {
-            triggerUpdate();
-          });
-
-        return () => {
-          subscription.unsubscribe();
-        };
-      }
-    }
-  }, [behavior]);
-
-  useEffect(() => {
-    if (!behavior) {
-      return;
-    }
-
-    if (behavior?.selection_source === "@{push/topics}") {
-      const subscription = PushTopicManager.getInstance()
-        .getEntryObservable()
-        .subscribe(() => {
-          triggerUpdate();
-        });
-
-      return () => {
-        subscription.unsubscribe();
-      };
-    }
-  }, [behavior]);
-
-  useEffect(() => {
-    if (!behavior) {
-      return;
-    }
-
-    if (behavior?.selection_source === "now_playing" && player) {
-      const subscription = player.getEntryObservable().subscribe(() => {
-        triggerUpdate();
-      });
-
-      return () => {
-        subscription.unsubscribe();
-      };
-    }
-  }, [behavior, player]);
-
-  return lastUpdate;
+  return isCellSelected(id, behavior);
 };
 
 export const useCellState = ({

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -34,6 +34,7 @@ type Props = {
   getStaticComponentFeed: any;
   pullToRefreshPipesV1RefreshingStateUpdater: () => boolean;
   refreshingPipesV1?: boolean;
+  stickyHeaderIndices?: number[];
 };
 
 const styles = StyleSheet.create({
@@ -61,6 +62,7 @@ function ComponentsMapComponent(props: Props) {
     // TODO: Remove when pipes v1 is deprecated.
     pullToRefreshPipesV1RefreshingStateUpdater,
     refreshingPipesV1,
+    stickyHeaderIndices,
   } = props;
 
   const flatListRef = React.useRef<FlatList | null>(null);
@@ -303,6 +305,7 @@ function ComponentsMapComponent(props: Props) {
             overScrollMode={Platform.OS === "android" ? "never" : "auto"}
             scrollIndicatorInsets={scrollIndicatorInsets}
             extraData={feed}
+            stickyHeaderIndices={stickyHeaderIndices}
             onLayout={handleOnLayout}
             removeClippedSubviews
             initialNumToRender={3}

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

@@ -16,6 +16,13 @@ jest.mock("react-native-safe-area-context", () => ({
   useSafeAreaInsets: () => ({ top: 50 }),
 }));
 
+jest.mock("@applicaster/zapp-react-native-redux/AppStore", () => ({
+  appStore: {
+    get: jest.fn((prop) => mockStore[prop]),
+    getState: jest.fn(),
+  },
+}));
+
 jest.mock("react-native", () => {
   const RN = jest.genMockFromModule("react-native");
   const actualRN = jest.requireActual("react-native");

package/Decorators/ZappPipesDataConnector/index.tsx

@@ -4,7 +4,6 @@ import React, { useEffect, useMemo } from "react";
 import * as R from "ramda";
 import { Platform } from "react-native";
 import Url from "url";
-
 import { favoritesListener } from "@applicaster/zapp-react-native-bridge/Favorites";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
@@ -19,6 +18,7 @@ import { ZappPipesSearchContext } from "@applicaster/zapp-react-native-ui-compon
 import { useScreenContext } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
 
 import { isVerticalListOrGrid } from "./utils";
+import { subscribeForUrlContextKeyChanges } from "@applicaster/zapp-pipes-v2-client";
 
 type Props = {
   component: ZappUIComponent;
@@ -291,6 +291,8 @@ export function zappPipesDataConnector(
         if (addListener) {
           return addListener(reloadData);
         }
+      } else {
+        return subscribeForUrlContextKeyChanges(dataSourceUrl, {}, reloadData);
       }
     }, [dataSourceUrl, reloadData]);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.12",
+  "version": "12.0.13-rc.0",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -34,10 +34,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.12",
-    "@applicaster/zapp-react-native-bridge": "12.0.12",
-    "@applicaster/zapp-react-native-redux": "12.0.12",
-    "@applicaster/zapp-react-native-utils": "12.0.12",
+    "@applicaster/applicaster-types": "12.0.13-rc.0",
+    "@applicaster/zapp-react-native-bridge": "12.0.13-rc.0",
+    "@applicaster/zapp-react-native-redux": "12.0.13-rc.0",
+    "@applicaster/zapp-react-native-utils": "12.0.13-rc.0",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",