@applicaster/zapp-react-native-ui-components 15.0.0-rc.136 → 15.0.0-rc.138

package/Components/Cell/TvOSCellComponent.tsx

@@ -195,7 +195,6 @@ class TvOSCell extends React.Component<Props, State> {
       groupId,
       component,
       index,
-      componentsMapOffset,
     } = this.props;
 
     this.setScreenLayout(componentAnchorPointY, screenLayout);
@@ -222,8 +221,7 @@ class TvOSCell extends React.Component<Props, State> {
       const totalOffset =
         headerOffset +
         toNumberWithDefaultZero(componentAnchorPointY) +
-        extraAnchorPointYOffset -
-        toNumberWithDefaultZero(componentsMapOffset) +
+        extraAnchorPointYOffset +
         componentMarginTop +
         componentPaddingTop;
 

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -39,8 +39,6 @@ type Props = {
   scrollViewExtraProps?: {};
   riverId?: string;
   getStaticComponentFeed: any;
-  pullToRefreshPipesV1RefreshingStateUpdater: () => boolean;
-  refreshingPipesV1?: boolean;
   stickyHeaderIndices?: number[];
 };
 
@@ -65,10 +63,6 @@ function ComponentsMapComponent(props: Props) {
     groupId,
     riverId,
     getStaticComponentFeed,
-    // Method added to keep pipes v1 logic up to date with the pullToRefresh state.
-    // TODO: Remove when pipes v1 is deprecated.
-    pullToRefreshPipesV1RefreshingStateUpdater,
-    refreshingPipesV1,
     stickyHeaderIndices,
   } = props;
 
@@ -163,16 +157,8 @@ function ComponentsMapComponent(props: Props) {
   usePipesCacheReset(riverId, riverComponents);
 
   const refreshControl = React.useMemo(
-    () =>
-      pullToRefreshEnabled ? (
-        <RefreshControl
-          pullToRefreshPipesV1RefreshingStateUpdater={
-            pullToRefreshPipesV1RefreshingStateUpdater
-          }
-          refreshingPipesV1={refreshingPipesV1}
-        />
-      ) : null,
-    []
+    () => (pullToRefreshEnabled ? <RefreshControl /> : null),
+    [pullToRefreshEnabled]
   );
 
   const navBarStore = useScreenContextV2()._navBarStore;

package/Components/River/RefreshControl.tsx

@@ -4,9 +4,7 @@ import {
   RefreshControl as RNRefreshControl,
   StyleSheet,
 } from "react-native";
-import * as R from "ramda";
-import { path } from "@applicaster/zapp-react-native-utils/utils";
-import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+import { get } from "@applicaster/zapp-react-native-utils/utils";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { useLocalizedStrings } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import { useAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils";
@@ -15,8 +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 { useLoadPipesDataDispatch } from "@applicaster/zapp-react-native-utils/reactHooks";
-import { useGetUrlInflater } from "@applicaster/zapp-react-native-utils/reactHooks/feed/useInflatedUrl";
+import { usePullToRefresh } from "./hooks";
 
 const BRIGHTNESS_THRESHOLD = 160;
 const ABOVE_DEFAULT_COLOR = "gray";
@@ -56,82 +53,6 @@ const getBrightness = (RGBcolor) => {
   );
 };
 
-export const usePullToRefresh = (
-  riverComponents,
-  pullToRefreshPipesV1RefreshingStateUpdater,
-  refreshingPipesV1
-) => {
-  const isPipesV1 = !!pullToRefreshPipesV1RefreshingStateUpdater;
-
-  const [refreshing, setRefreshing] = React.useState(false);
-
-  const feedSources = React.useMemo(
-    () =>
-      (riverComponents || [])
-        .map((riverComponent) => ({
-          source: path(["data", "source"], riverComponent),
-          mapping: path(["data", "mapping"], riverComponent),
-        }))
-        .filter(({ source }) => !isNilOrEmpty(source)),
-    [riverComponents]
-  );
-
-  const feedsLength = feedSources.length;
-
-  const [requestsCompletedCounter, setRequestsCompletedCounter] =
-    React.useState(0);
-
-  const loadPipesDataDispatcher = useLoadPipesDataDispatch();
-  const urlInflater = useGetUrlInflater();
-
-  React.useEffect(() => {
-    // will not work for pipes v1 on 1st level screens
-    if (refreshing && !isPipesV1) {
-      feedSources.forEach(({ source, mapping }) => {
-        const inflatedUrl = urlInflater(source, mapping);
-
-        if (inflatedUrl) {
-          loadPipesDataDispatcher(inflatedUrl, {
-            silentRefresh: true,
-            clearCache: true,
-            callback: () => {
-              setRequestsCompletedCounter(R.inc);
-            },
-          });
-        } else {
-          setRequestsCompletedCounter(R.inc);
-        }
-      });
-    }
-  }, [
-    refreshing,
-    isPipesV1,
-    feedSources,
-    loadPipesDataDispatcher,
-    urlInflater,
-  ]);
-
-  React.useEffect(() => {
-    if (requestsCompletedCounter === feedsLength) {
-      setRefreshing(false);
-    }
-  }, [requestsCompletedCounter, feedsLength]);
-
-  const onRefresh = React.useCallback(() => {
-    if (isPipesV1) {
-      pullToRefreshPipesV1RefreshingStateUpdater(true);
-    } else {
-      setRefreshing(true);
-      setRequestsCompletedCounter(0);
-    }
-  }, [isPipesV1]);
-
-  return {
-    refreshing: isPipesV1 ? refreshingPipesV1 : refreshing,
-    onRefresh,
-  };
-};
-
 /** Returns the offset for the progress view of the RefreshControl component
  *  based on navbar content position */
 export const useGetProgressViewOffset = () => {
@@ -160,16 +81,12 @@ export const useGetProgressViewOffset = () => {
   }
 };
 
-export function RefreshControl(props: {
-  pullToRefreshPipesV1RefreshingStateUpdater?: (refreshing: boolean) => void;
-  refreshingPipesV1?: boolean;
-}) {
+export function RefreshControl() {
   const screenData = useCurrentScreenData();
 
   const { refreshing, onRefresh } = usePullToRefresh(
-    screenData.ui_components,
-    props.pullToRefreshPipesV1RefreshingStateUpdater,
-    props.refreshingPipesV1
+    screenData.id,
+    screenData.ui_components
   );
 
   const { app_background_color: themeBackgroundColor } = useTheme();
@@ -187,29 +104,26 @@ export function RefreshControl(props: {
     displayTitleIOS,
   } = React.useMemo(
     () => ({
-      indicatorColor: R.prop(
-        "pull_to_refresh_indicator_color",
-        screenData.styles
-      ),
-      titleUnderIndicatorColor: R.prop(
-        "pull_to_refresh_title_color_under_indicator",
-        screenData.styles
+      indicatorColor: get(screenData.styles, "pull_to_refresh_indicator_color"),
+      titleUnderIndicatorColor: get(
+        screenData.styles,
+        "pull_to_refresh_title_color_under_indicator"
       ),
-      indicatorBackgroundColor: R.prop(
-        "pull_to_refresh_indicator_bg_color",
-        screenData.styles
+      indicatorBackgroundColor: get(
+        screenData.styles,
+        "pull_to_refresh_indicator_bg_color"
       ),
       indicatorSize:
-        R.prop("pull_to_refresh_indicator_size", screenData.styles) === "large"
+        get(screenData.styles, "pull_to_refresh_indicator_size") === "large"
           ? "large"
           : "default",
-      generalContentBackgroungColor: R.prop(
-        "screen_background_color",
-        screenData.styles
+      generalContentBackgroungColor: get(
+        screenData.styles,
+        "screen_background_color"
       ),
-      displayTitleIOS: R.prop(
-        "pull_to_refresh_display_title_ios",
-        screenData.styles
+      displayTitleIOS: get(
+        screenData.styles,
+        "pull_to_refresh_display_title_ios"
       ),
     }),
     [screenData]
@@ -276,7 +190,6 @@ export function RefreshControl(props: {
 
   return (
     <RNRefreshControl
-      {...props}
       refreshing={refreshing}
       onRefresh={onRefreshHandler}
       colors={[preparedIndicatorColor]}

package/Components/River/River.tsx

@@ -2,7 +2,6 @@ import * as React from "react";
 import * as R from "ramda";
 import { GeneralContentScreen } from "@applicaster/zapp-react-native-ui-components/Components/GeneralContentScreen";
 
-import { FeedLoader } from "../FeedLoader";
 import { ScreenResolver } from "../ScreenResolver";
 
 type Props = ZappScreenProps & {
@@ -23,24 +22,13 @@ type Props = ZappScreenProps & {
   river: ZappRiver;
 };
 
-type State = {
-  refreshing: boolean;
-};
-
-export class RiverComponent extends React.Component<Props, State> {
+export class RiverComponent extends React.Component<Props> {
   private currentScreenTitle: string;
   private currentScreenSummary: string;
   constructor(props: Props) {
     super(props);
 
-    this.state = {
-      refreshing: false,
-    };
-
     this.applyContexts();
-
-    this.pullToRefreshPipesV1RefreshingStateUpdater =
-      this.pullToRefreshPipesV1RefreshingStateUpdater.bind(this);
   }
 
   applyContexts() {
@@ -69,20 +57,9 @@ export class RiverComponent extends React.Component<Props, State> {
     }
   }
 
-  usesPipesV1Layout() {
-    return this.props?.appData?.layoutVersion === "v1";
-  }
-
-  // Method added to keep pipes v1 logic up to date with the pullToRefresh state.
-  // TODO: Remove when pipes v1 is deprecated.
-  pullToRefreshPipesV1RefreshingStateUpdater(refreshing) {
-    this.setState({ refreshing });
-  }
-
   render() {
     const {
       river,
-      feedUrl,
       screenData,
       isInsideContainer,
       groupId,
@@ -91,22 +68,10 @@ export class RiverComponent extends React.Component<Props, State> {
 
     const { id, type } = river;
 
-    const connectedFeedURL = R.path(["content", "src"], screenData);
-    const _feedUrl = feedUrl || connectedFeedURL;
-
     if (type !== "general_content") {
-      let riverWithConnectedDatasource;
-
-      if (_feedUrl && this.usesPipesV1Layout()) {
-        riverWithConnectedDatasource = {
-          ...river,
-          data: R.merge(river.data || {}, { source: _feedUrl }),
-        };
-      }
-
       return (
         <ScreenResolver
-          screenData={R.mergeLeft(riverWithConnectedDatasource || river, {
+          screenData={R.mergeLeft(river, {
             groupId,
             ...screenData,
           })}
@@ -116,53 +81,15 @@ export class RiverComponent extends React.Component<Props, State> {
       );
     }
 
-    if (!_feedUrl || !this.usesPipesV1Layout()) {
-      this.currentScreenTitle = (screenData && screenData.title) || null;
-
-      return (
-        <GeneralContentScreen
-          screenId={id}
-          isScreenWrappedInContainer={isInsideContainer}
-          groupId={groupId}
-          scrollViewExtraProps={scrollViewExtraProps}
-        />
-      );
-    }
+    this.currentScreenTitle = (screenData && screenData.title) || null;
 
     return (
-      <FeedLoader
-        feedUrl={_feedUrl}
-        refreshing={this.state.refreshing}
-        refreshCallback={() =>
-          this.pullToRefreshPipesV1RefreshingStateUpdater(false)
-        }
-      >
-        {(feed) => {
-          if (!feed) {
-            return null;
-          }
-
-          this.currentScreenSummary = (feed && feed.summary) || null;
-
-          this.currentScreenTitle =
-            (feed && feed.title) || (screenData && screenData.title) || null;
-
-          return (
-            <GeneralContentScreen
-              screenId={id}
-              groupId={groupId}
-              feed={feed}
-              isScreenWrappedInContainer={isInsideContainer}
-              scrollViewExtraProps={scrollViewExtraProps}
-              componentsMapExtraProps={{
-                pullToRefreshPipesV1RefreshingStateUpdater:
-                  this.pullToRefreshPipesV1RefreshingStateUpdater,
-                refreshingPipesV1: this.state.refreshing,
-              }}
-            />
-          );
-        }}
-      </FeedLoader>
+      <GeneralContentScreen
+        screenId={id}
+        isScreenWrappedInContainer={isInsideContainer}
+        groupId={groupId}
+        scrollViewExtraProps={scrollViewExtraProps}
+      />
     );
   }
 }

package/Components/River/hooks/__tests__/usePullToRefresh.test.ts

@@ -0,0 +1,132 @@
+import { act, renderHook } from "@testing-library/react-native";
+import { refreshCoordinator } from "@applicaster/zapp-react-native-utils/refreshUtils/RefreshCoordinator";
+
+import { usePullToRefresh } from "../usePullToRefresh";
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/refreshUtils/RefreshCoordinator",
+  () => ({
+    refreshCoordinator: {
+      triggerRefresh: jest.fn(),
+    },
+  })
+);
+
+jest.useFakeTimers();
+
+describe("usePullToRefresh", () => {
+  const screenId = "test-screen";
+  const components = [{ id: "comp1" }, { id: "comp2" }] as any;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should initialize with refreshing=false", () => {
+    const { result } = renderHook(() => usePullToRefresh(screenId, components));
+
+    expect(result.current.refreshing).toBe(false);
+  });
+
+  it("should trigger refresh and set refreshing=true", () => {
+    const { result } = renderHook(() => usePullToRefresh(screenId, components));
+
+    act(() => {
+      result.current.onRefresh();
+    });
+
+    expect(result.current.refreshing).toBe(true);
+
+    expect(refreshCoordinator.triggerRefresh).toHaveBeenCalledWith(
+      components,
+      screenId
+    );
+  });
+
+  it("should set refreshing=false after spinner duration", () => {
+    const { result } = renderHook(() => usePullToRefresh(screenId, components));
+
+    act(() => {
+      result.current.onRefresh();
+    });
+
+    expect(result.current.refreshing).toBe(true);
+
+    act(() => {
+      jest.advanceTimersByTime(1500);
+    });
+
+    expect(result.current.refreshing).toBe(false);
+  });
+
+  it("should not stop refreshing before spinner duration", () => {
+    const { result } = renderHook(() => usePullToRefresh(screenId, components));
+
+    act(() => {
+      result.current.onRefresh();
+    });
+
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
+
+    expect(result.current.refreshing).toBe(true);
+  });
+
+  it("should clear timeout on unmount", () => {
+    const clearTimeoutSpy = jest.spyOn(global, "clearTimeout");
+
+    const { result, unmount } = renderHook(() =>
+      usePullToRefresh(screenId, components)
+    );
+
+    act(() => {
+      result.current.onRefresh();
+    });
+
+    unmount();
+
+    expect(clearTimeoutSpy).toHaveBeenCalled();
+  });
+
+  it("should handle multiple refresh calls correctly", () => {
+    const { result } = renderHook(() => usePullToRefresh(screenId, components));
+
+    act(() => {
+      result.current.onRefresh();
+      result.current.onRefresh();
+    });
+
+    expect(refreshCoordinator.triggerRefresh).toHaveBeenCalledTimes(2);
+    expect(result.current.refreshing).toBe(true);
+
+    act(() => {
+      jest.advanceTimersByTime(1500);
+    });
+
+    expect(result.current.refreshing).toBe(false);
+  });
+
+  it("should use latest props in callback", () => {
+    const { result, rerender } = renderHook(
+      ({ screenId, components }) => usePullToRefresh(screenId, components),
+      {
+        initialProps: { screenId, components },
+      }
+    );
+
+    const newComponents = [{ id: "new-comp" }] as any;
+    const newScreenId = "new-screen";
+
+    rerender({ screenId: newScreenId, components: newComponents });
+
+    act(() => {
+      result.current.onRefresh();
+    });
+
+    expect(refreshCoordinator.triggerRefresh).toHaveBeenCalledWith(
+      newComponents,
+      newScreenId
+    );
+  });
+});

package/Components/River/hooks/index.ts

@@ -0,0 +1 @@
+export { usePullToRefresh } from "./usePullToRefresh";

package/Components/River/hooks/usePullToRefresh.ts

@@ -0,0 +1,51 @@
+import { useState, useCallback, useRef, useEffect } from "react";
+import { refreshCoordinator } from "@applicaster/zapp-react-native-utils/refreshUtils/RefreshCoordinator";
+
+const SPINNER_DURATION_MS = 1500;
+
+/**
+ * Pull-to-refresh hook.
+ *
+ * Triggers a refresh for all screen components via RefreshCoordinator.
+ * Each component's UrlFeedResolver already subscribes to refresh$ events
+ * and calls reloadData() when triggered — so this hook only needs to:
+ * 1. Push events into the refresh bus
+ * 2. Show a fixed-duration spinner as UX feedback
+ *
+ * Data updates arrive reactively via Redux (silentRefresh: true keeps
+ * old data visible while loading).
+ */
+export const usePullToRefresh = (
+  screenId: string,
+  components: ZappUIComponent[] = []
+) => {
+  const [refreshing, setRefreshing] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Cleanup timer on unmount
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+
+  const onRefresh = useCallback(() => {
+    setRefreshing(true);
+    refreshCoordinator.triggerRefresh(components, screenId);
+
+    // Spinner is UX feedback for the gesture.
+    // Data updates arrive reactively via Redux (silentRefresh: true).
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+
+    timerRef.current = setTimeout(
+      () => setRefreshing(false),
+      SPINNER_DURATION_MS
+    );
+  }, [components, screenId]);
+
+  return { refreshing, onRefresh };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.0.0-rc.136",
+  "version": "15.0.0-rc.138",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "15.0.0-rc.136",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-rc.136",
-    "@applicaster/zapp-react-native-redux": "15.0.0-rc.136",
-    "@applicaster/zapp-react-native-utils": "15.0.0-rc.136",
+    "@applicaster/applicaster-types": "15.0.0-rc.138",
+    "@applicaster/zapp-react-native-bridge": "15.0.0-rc.138",
+    "@applicaster/zapp-react-native-redux": "15.0.0-rc.138",
+    "@applicaster/zapp-react-native-utils": "15.0.0-rc.138",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",