@applicaster/zapp-react-native-ui-components 13.0.0-alpha.8490438700 → 13.0.0-alpha.9103242840

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -70,6 +70,21 @@ function ComponentsMapComponent(props: Props) {
 
   const [flatListHeight, setFlatListHeight] = React.useState(null);
 
+  const {
+    isAnyLoading,
+    isAllLoaded,
+    waitForAllComponents,
+    onLoadFinished,
+    onLoadFailed,
+    shouldShowLoadingError,
+    isAnyLoaded,
+    arePreviousComponentsLoaded,
+  } = useLoadingState(feed?.entry?.length || components.length);
+
+  const theme = useTheme();
+
+  const logTimestamp = useProfilerLogging();
+
   const riverComponents = React.useMemo(() => {
     if (feed?.entry?.length < components.length) {
       return R.slice(0, feed?.entry?.length, components);
@@ -78,42 +93,55 @@ function ComponentsMapComponent(props: Props) {
     return components;
   }, [components, feed]);
 
-  const logTimestamp = useProfilerLogging();
-
-  const onLoadDone = React.useCallback(() => {
-    logTimestamp(riverId?.toString());
-  }, [logTimestamp]);
-
-  const { loadingState, onLoadFinished, onLoadFailed, shouldShowLoadingError } =
-    useLoadingState(riverComponents.length, onLoadDone);
-
-  const theme = useTheme();
-
   const renderRiverItem = React.useCallback(
     ({ item, index }) => {
-      const riverItemProps = {
-        riverId,
-        item,
-        index,
-        isScreenWrappedInContainer,
-        feed,
-        groupId,
-        onLoadFailed,
-        onLoadFinished,
-        getStaticComponentFeed,
-        isLast: isLast(index, riverComponents.length),
-        loadingState,
+      const readyToBeDisplayed = arePreviousComponentsLoaded(index);
+
+      const styles = {
+        display: !readyToBeDisplayed ? "none" : ("flex" as "none" | "flex"),
       };
 
       return (
-        <ScreenLoadingMeasurementsListItemWrapper index={index}>
-          <RiverItem {...riverItemProps} />
-        </ScreenLoadingMeasurementsListItemWrapper>
+        <View style={styles}>
+          <ScreenLoadingMeasurementsListItemWrapper index={index}>
+            <RiverItem
+              {...{
+                readyToBeDisplayed,
+                riverId,
+                item,
+                index,
+                isScreenWrappedInContainer,
+                feed,
+                groupId,
+                onLoadFailed,
+                onLoadFinished,
+                getStaticComponentFeed,
+                isLast: isLast(index, riverComponents.length),
+              }}
+            />
+          </ScreenLoadingMeasurementsListItemWrapper>
+        </View>
       );
     },
-    [feed, getStaticComponentFeed, onLoadFailed, onLoadFinished]
+    [
+      feed,
+      getStaticComponentFeed,
+      arePreviousComponentsLoaded,
+      onLoadFailed,
+      onLoadFinished,
+    ]
   );
 
+  const renderFooter = React.useCallback(() => {
+    return (
+      <RiverFooter
+        visible={isAnyLoading}
+        flatListHeight={flatListHeight}
+        isAnyLoaded={isAnyLoaded || waitForAllComponents}
+      />
+    );
+  }, [flatListHeight, isAnyLoading, isAnyLoaded]);
+
   const screenStyle = React.useMemo(
     () => ({
       paddingTop: ifEmptyUseFallback(
@@ -151,6 +179,12 @@ function ComponentsMapComponent(props: Props) {
 
   usePipesCacheReset(riverId, riverComponents);
 
+  React.useEffect(() => {
+    if (isAllLoaded) {
+      logTimestamp(riverId?.toString());
+    }
+  }, [isAllLoaded]);
+
   const refreshControl = React.useMemo(
     () =>
       pullToRefreshEnabled ? (
@@ -246,11 +280,6 @@ function ComponentsMapComponent(props: Props) {
     }
   }, []);
 
-  const contentContainerStyle = React.useMemo(
-    () => (isScreenWrappedInContainer ? {} : screenStyle),
-    [isScreenWrappedInContainer, screenStyle]
-  );
-
   if (shouldShowLoadingError) {
     return <RiverError />;
   }
@@ -262,7 +291,7 @@ function ComponentsMapComponent(props: Props) {
     <View style={styles.container}>
       <ScreenLoadingMeasurements
         riverId={riverId}
-        numberOfComponents={riverComponents.length}
+        numberOfComponents={feed?.entry?.length || components.length}
       >
         <ViewportTracker>
           <FlatList
@@ -283,13 +312,10 @@ function ComponentsMapComponent(props: Props) {
             keyExtractor={keyExtractor}
             renderItem={renderRiverItem}
             data={riverComponents}
-            contentContainerStyle={contentContainerStyle}
-            ListFooterComponent={
-              <RiverFooter
-                flatListHeight={flatListHeight}
-                loadingState={loadingState}
-              />
+            contentContainerStyle={
+              isScreenWrappedInContainer ? {} : screenStyle
             }
+            ListFooterComponent={renderFooter}
             refreshControl={refreshControl}
             onScrollBeginDrag={onScrollBeginDrag}
             onScroll={onScroll}

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

@@ -1,86 +1,50 @@
 import * as React from "react";
-import { isNil, set, lensIndex, T, slice } from "ramda";
-import { BehaviorSubject } from "rxjs";
-import { useRefWithInitialValue } from "@applicaster/zapp-react-native-utils/reactHooks/state/useRefWithInitialValue";
+import * as R from "ramda";
+
+const allTrue = R.all(R.equals(true));
+const anyFalse = R.any(R.equals(false));
+const anyTrue = R.any(R.equals(true));
 
 const reducer = (state, { payload }) => {
-  if (!isNil(payload) && !state[payload]) {
-    return set(lensIndex(payload), true)(state);
+  if (!R.isNil(payload) && !state[payload]) {
+    return R.set(R.lensIndex(payload), true)(state);
   }
 
   return state;
 };
 
-type LoadingState = {
-  index: number;
-  done: boolean;
-  waitForAllComponents: boolean;
-};
-
 type Return = {
-  loadingState: BehaviorSubject<LoadingState>;
+  isAnyLoading: boolean;
+  isAllLoaded: boolean;
+  waitForAllComponents: boolean;
   onLoadFinished: (index: number) => void;
   onLoadFailed: ({ error, index }: { error: Error; index: number }) => void;
   shouldShowLoadingError: boolean;
+  isAnyLoaded: boolean;
   arePreviousComponentsLoaded: (index: number) => boolean;
 };
 
-// TODO: Take this value from Zapp configuration, when feature is added to GeneralScreen
-const SHOULD_FAIL_ON_COMPONENT_LOADING = false;
+type Action = { payload: { index: number } };
 
-const createLoadingStateObservable = () =>
-  new BehaviorSubject<LoadingState>({
-    index: -1,
-    done: false,
-    waitForAllComponents: SHOULD_FAIL_ON_COMPONENT_LOADING,
-  });
+type Loaded = true;
+type Loading = false;
 
-export const useLoadingState = (
-  count: number,
-  onLoadDone: () => void
-): Return => {
-  const componentStateRef = React.useRef(new Array(count).fill(false));
-  const [loadingError, setLoadingError] = React.useState(null);
-
-  const loadingState = useRefWithInitialValue<BehaviorSubject<LoadingState>>(
-    createLoadingStateObservable
-  );
-
-  const arePreviousComponentsLoaded = React.useCallback((index) => {
-    if (index === 0) {
-      return true;
-    }
-
-    const componentsBefore = slice(0, index, componentStateRef.current);
-
-    return componentsBefore.every(T);
-  }, []);
+type LoadingState = Array<Loaded | Loading>;
 
-  const dispatch = React.useCallback(({ payload }) => {
-    const newState = reducer(componentStateRef.current, { payload });
-    componentStateRef.current = newState;
-    const isDone = arePreviousComponentsLoaded(count - 1);
-
-    const state = loadingState.current.getValue();
+// TODO: Take this value from Zapp configuration, when feature is added to GeneralScreen
+const SHOULD_FAIL_ON_COMPONENT_LOADING = false;
 
-    const newLoadingState = {
-      ...state,
-      index: state.index < payload ? payload : state.index,
-      done: isDone,
-    };
+export const useLoadingState = (count: number): Return => {
+  const [loadingError, setLoadingError] = React.useState(null);
 
-    loadingState.current.next(newLoadingState);
+  const [componentsState, dispatch] = React.useReducer<
+    React.Reducer<LoadingState, Action>
+  >(reducer, new Array(count).fill(false));
 
-    if (isDone) {
-      onLoadDone();
-    }
+  const handleComponentLoaded = React.useCallback((index) => {
+    dispatch({ payload: index });
   }, []);
 
-  const handleComponentLoaded = React.useCallback(
-    (index) => dispatch({ payload: index }),
-    []
-  );
-
   const handleComponentLoadErrorWhenNeedToFail = React.useCallback(
     ({ error }) => {
       if (error !== loadingError) {
@@ -91,26 +55,35 @@ export const useLoadingState = (
   );
 
   const handleComponentLoadErrorWhenNoNeedToFail = React.useCallback(
-    ({ index }) => handleComponentLoaded(index),
+    ({ index }) => {
+      handleComponentLoaded(index);
+    },
     []
   );
 
-  return React.useMemo(
-    () => ({
-      loadingState: loadingState.current,
-      onLoadFinished: handleComponentLoaded,
-      onLoadFailed: SHOULD_FAIL_ON_COMPONENT_LOADING
-        ? handleComponentLoadErrorWhenNeedToFail
-        : handleComponentLoadErrorWhenNoNeedToFail,
-      shouldShowLoadingError: SHOULD_FAIL_ON_COMPONENT_LOADING && loadingError,
-      arePreviousComponentsLoaded,
-    }),
-    [
-      loadingError,
-      handleComponentLoaded,
-      handleComponentLoadErrorWhenNeedToFail,
-      handleComponentLoadErrorWhenNoNeedToFail,
-      arePreviousComponentsLoaded,
-    ]
+  const arePreviousComponentsLoaded = React.useCallback(
+    (index) => {
+      if (index === 0) {
+        return true;
+      }
+
+      const componentsBefore = R.slice(0, index, componentsState);
+
+      return allTrue(componentsBefore);
+    },
+    [componentsState]
   );
+
+  return {
+    isAnyLoading: anyFalse(componentsState),
+    isAllLoaded: allTrue(componentsState),
+    onLoadFinished: handleComponentLoaded,
+    onLoadFailed: SHOULD_FAIL_ON_COMPONENT_LOADING
+      ? handleComponentLoadErrorWhenNeedToFail
+      : handleComponentLoadErrorWhenNoNeedToFail,
+    shouldShowLoadingError: SHOULD_FAIL_ON_COMPONENT_LOADING && loadingError,
+    isAnyLoaded: anyTrue(componentsState),
+    waitForAllComponents: SHOULD_FAIL_ON_COMPONENT_LOADING,
+    arePreviousComponentsLoaded,
+  };
 };

package/Components/River/RiverFooter.tsx

@@ -1,23 +1,11 @@
-import React, { useCallback } from "react";
+import React from "react";
 import { StyleSheet, View } from "react-native";
 import { Spinner } from "@applicaster/zapp-react-native-ui-components/Components/Spinner";
-import type { Subject } from "rxjs";
-import { useStateFromSubscribe } from "@applicaster/zapp-react-native-utils/reactHooks/state/useStateFromSubscribe";
-
-type LoadingState = {
-  waitForAllComponents: boolean;
-  index: number;
-  done: boolean;
-};
-
-type State = {
-  visible: boolean;
-  isAnyLoaded: boolean;
-};
 
 type Props = {
+  visible?: boolean;
   flatListHeight?: number;
-  loadingState: Subject<LoadingState>;
+  isAnyLoaded: boolean;
 };
 
 const FOOTER_COMPONENT_HEIGHT = 200;
@@ -31,35 +19,17 @@ const footerStyles = StyleSheet.create({
 });
 
 function RiverFooterComponent(props: Props) {
-  const { flatListHeight, loadingState } = props;
-
-  const { visible, isAnyLoaded } = useStateFromSubscribe<LoadingState, State>(
-    loadingState,
-    useCallback(
-      ({ index, done, waitForAllComponents }, setState) =>
-        setState(() => ({
-          visible: !done,
-          isAnyLoaded: index >= 0 || waitForAllComponents,
-        })),
-      []
-    ),
-    {
-      visible: true,
-      isAnyLoaded: false,
-    }
-  );
+  const { visible = true, flatListHeight, isAnyLoaded } = props;
 
   if (!visible) return null;
 
   return (
     <View
-      renderToHardwareTextureAndroid
-      style={[
-        footerStyles.container,
-        {
-          height: isAnyLoaded ? FOOTER_COMPONENT_HEIGHT : flatListHeight,
-        },
-      ]}
+      renderToHardwareTextureAndroid={true}
+      style={{
+        ...footerStyles.container,
+        height: isAnyLoaded ? FOOTER_COMPONENT_HEIGHT : flatListHeight,
+      }}
     >
       <Spinner size={isAnyLoaded ? "small" : "large"} />
     </View>

package/Components/River/RiverItem.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import * as R from "ramda";
 
 import { applyDecorators } from "../../Decorators";
@@ -11,7 +11,6 @@ import {
 import { riverLogger } from "./logger";
 import { tvPluginsWithCellRenderer } from "../../const";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
-import type { BehaviorSubject } from "rxjs";
 
 export type RiverItemType = {
   item: ZappUIComponent;
@@ -25,7 +24,6 @@ export type RiverItemType = {
   getStaticComponentFeed: GeneralContentScreenProps["getStaticComponentFeed"];
   readyToBeDisplayed?: boolean;
   isLast: boolean;
-  loadingState: BehaviorSubject<{ index: number }>;
 };
 
 function getFeedUrl(feed: ZappFeed, index: number) {
@@ -38,33 +36,6 @@ function getFeedUrl(feed: ZappFeed, index: number) {
   }
 }
 
-/**
- * useLoadingState for RiverItemComponent
- * takes currentIndex and loadingState as arguments
- **/
-const useLoadingState = (
-  currentIndex: number,
-  loadingState: RiverItemType["loadingState"]
-) => {
-  const [readyToBeDisplayed, setReadyToBeDisplayed] = React.useState(
-    loadingState.getValue().index + 1 === currentIndex
-  );
-
-  useEffect(() => {
-    const subscription = loadingState.subscribe(({ index }) => {
-      if (index + 1 === currentIndex) {
-        setReadyToBeDisplayed(true);
-      }
-    });
-
-    return () => {
-      subscription.unsubscribe();
-    };
-  }, [loadingState, currentIndex]);
-
-  return readyToBeDisplayed;
-};
-
 function RiverItemComponent(props: RiverItemType) {
   const {
     item,
@@ -76,12 +47,10 @@ function RiverItemComponent(props: RiverItemType) {
     onLoadFinished,
     onLoadFailed,
     getStaticComponentFeed,
+    readyToBeDisplayed,
     isLast,
-    loadingState,
   } = props;
 
-  const readyToBeDisplayed = useLoadingState(index, loadingState);
-
   const feedUrl = getFeedUrl(feed, index);
 
   const Component = useComponentResolver(
@@ -121,10 +90,6 @@ function RiverItemComponent(props: RiverItemType) {
     }
   }, []);
 
-  if (!readyToBeDisplayed) {
-    return null;
-  }
-
   if (Component === null || typeof Component === "undefined") {
     riverLogger.warning({
       message: `Component ${item.component_type} is null - skipping rendering`,

package/Components/River/TV/index.tsx

@@ -1,4 +1,9 @@
+import { compose } from "ramda";
 import { River as RiverComponent } from "./River";
 import { withTvEventHandler } from "./withTVEventHandler";
+import { withComponentsMapOffsetContext } from "../../../Contexts/ComponentsMapOffsetContext";
 
-export const River = withTvEventHandler(RiverComponent);
+export const River = compose(
+  withTvEventHandler,
+  withComponentsMapOffsetContext
+)(RiverComponent);

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

@@ -17,138 +17,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
     }
   >
     <RCTScrollView
-      ListFooterComponent={
-        <Memo(RiverFooterComponent)
-          flatListHeight={null}
-          loadingState={
-            BehaviorSubject {
-              "_isScalar": false,
-              "_value": {
-                "done": false,
-                "index": -1,
-                "waitForAllComponents": false,
-              },
-              "closed": false,
-              "hasError": false,
-              "isStopped": false,
-              "observers": [
-                Subscriber {
-                  "_parentOrParents": null,
-                  "_subscriptions": [
-                    SubjectSubscription {
-                      "_parentOrParents": [Circular],
-                      "_subscriptions": null,
-                      "closed": false,
-                      "subject": [Circular],
-                      "subscriber": [Circular],
-                    },
-                  ],
-                  "closed": false,
-                  "destination": SafeSubscriber {
-                    "_complete": undefined,
-                    "_context": [Circular],
-                    "_error": undefined,
-                    "_next": [Function],
-                    "_parentOrParents": null,
-                    "_parentSubscriber": [Circular],
-                    "_subscriptions": null,
-                    "closed": false,
-                    "destination": {
-                      "closed": true,
-                      "complete": [Function],
-                      "error": [Function],
-                      "next": [Function],
-                    },
-                    "isStopped": false,
-                    "syncErrorThrowable": false,
-                    "syncErrorThrown": false,
-                    "syncErrorValue": null,
-                  },
-                  "isStopped": false,
-                  "syncErrorThrowable": true,
-                  "syncErrorThrown": false,
-                  "syncErrorValue": null,
-                },
-                Subscriber {
-                  "_parentOrParents": null,
-                  "_subscriptions": [
-                    SubjectSubscription {
-                      "_parentOrParents": [Circular],
-                      "_subscriptions": null,
-                      "closed": false,
-                      "subject": [Circular],
-                      "subscriber": [Circular],
-                    },
-                  ],
-                  "closed": false,
-                  "destination": SafeSubscriber {
-                    "_complete": undefined,
-                    "_context": [Circular],
-                    "_error": undefined,
-                    "_next": [Function],
-                    "_parentOrParents": null,
-                    "_parentSubscriber": [Circular],
-                    "_subscriptions": null,
-                    "closed": false,
-                    "destination": {
-                      "closed": true,
-                      "complete": [Function],
-                      "error": [Function],
-                      "next": [Function],
-                    },
-                    "isStopped": false,
-                    "syncErrorThrowable": false,
-                    "syncErrorThrown": false,
-                    "syncErrorValue": null,
-                  },
-                  "isStopped": false,
-                  "syncErrorThrowable": true,
-                  "syncErrorThrown": false,
-                  "syncErrorValue": null,
-                },
-                Subscriber {
-                  "_parentOrParents": null,
-                  "_subscriptions": [
-                    SubjectSubscription {
-                      "_parentOrParents": [Circular],
-                      "_subscriptions": null,
-                      "closed": false,
-                      "subject": [Circular],
-                      "subscriber": [Circular],
-                    },
-                  ],
-                  "closed": false,
-                  "destination": SafeSubscriber {
-                    "_complete": undefined,
-                    "_context": [Circular],
-                    "_error": undefined,
-                    "_next": [Function],
-                    "_parentOrParents": null,
-                    "_parentSubscriber": [Circular],
-                    "_subscriptions": null,
-                    "closed": false,
-                    "destination": {
-                      "closed": true,
-                      "complete": [Function],
-                      "error": [Function],
-                      "next": [Function],
-                    },
-                    "isStopped": false,
-                    "syncErrorThrowable": false,
-                    "syncErrorThrown": false,
-                    "syncErrorValue": null,
-                  },
-                  "isStopped": false,
-                  "syncErrorThrowable": true,
-                  "syncErrorThrown": false,
-                  "syncErrorValue": null,
-                },
-              ],
-              "thrownError": null,
-            }
-          }
-        />
-      }
+      ListFooterComponent={[Function]}
       contentContainerStyle={
         {
           "paddingBottom": undefined,
@@ -211,14 +80,22 @@ exports[`componentsMap renders renders components map correctly 1`] = `
           style={null}
         >
           <View
-            onLayout={[Function]}
             style={
               {
-                "flex": 1,
+                "display": "flex",
               }
             }
           >
-            <View />
+            <View
+              onLayout={[Function]}
+              style={
+                {
+                  "flex": 1,
+                }
+              }
+            >
+              <View />
+            </View>
           </View>
         </View>
         <View
@@ -226,13 +103,23 @@ exports[`componentsMap renders renders components map correctly 1`] = `
           style={null}
         >
           <View
-            onLayout={[Function]}
             style={
               {
-                "flex": 1,
+                "display": "none",
               }
             }
-          />
+          >
+            <View
+              onLayout={[Function]}
+              style={
+                {
+                  "flex": 1,
+                }
+              }
+            >
+              <View />
+            </View>
+          </View>
         </View>
         <View
           onLayout={[Function]}
@@ -240,16 +127,12 @@ exports[`componentsMap renders renders components map correctly 1`] = `
           <View
             renderToHardwareTextureAndroid={true}
             style={
-              [
-                {
-                  "alignItems": "center",
-                  "justifyContent": "center",
-                  "width": "100%",
-                },
-                {
-                  "height": null,
-                },
-              ]
+              {
+                "alignItems": "center",
+                "height": null,
+                "justifyContent": "center",
+                "width": "100%",
+              }
             }
           >
             <ActivityIndicator