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

package/Components/MasterCell/DefaultComponents/__tests__/image.test.js

@@ -39,6 +39,6 @@ describe("image with no source", () => {
     );
 
     const testInstance = testRenderer.root;
-    expect(testInstance.findByType(Image).props.source).toBeUndefined();
+    expect(testInstance.findByType(Image).props.source).toEqual({ uri: "" });
   });
 });

package/Components/MasterCell/hooks/useAsyncRendering/MasterCellAsyncRenderManager.ts

@@ -16,13 +16,13 @@ export class MasterCellAsyncRenderManager {
   }
 
   public emitAsyncElementRegistrate = () => {
-    this.asyncElementRegistrate$.next(null);
+    this.asyncElementRegistrate$.next();
 
     return this.decrementAsyncElementRegistrationCount;
   };
 
   public emitAsyncElementLayout = () => {
-    this.asyncElementLayout$.next(null);
+    this.asyncElementLayout$.next();
   };
 
   public decrementAsyncElementRegistrationCount = () => {

package/Components/MasterCell/utils/index.ts

@@ -103,7 +103,7 @@ export const useFilterChildren = <
       item: any;
       pluginIdentifier: string;
     };
-  },
+  }
 >(
   children: T[]
 ): T[] => {

package/Components/ModalComponent/Header/index.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { LayoutChangeEvent, StyleSheet, View } from "react-native";
+import { View, StyleSheet, LayoutChangeEvent } from "react-native";
 import { Title, TitleProps } from "./Title";
 import { CloseButton, CloseButtonProps } from "./CloseButton";
 import { getCloseButtonProps, getTitleProps } from "./utils";
@@ -60,8 +60,8 @@ export function ModalHeader(props: Props) {
           width: width - buttonsContainerWidth,
         }}
       >
-        {title ? <Title {...titleProps} /> : null}
-        {summary ? <Title {...summaryProps} /> : null}
+        {title && <Title {...titleProps} />}
+        {summary && <Title {...summaryProps} />}
       </View>
       <View style={{ width: buttonsContainerWidth }}>
         <CloseButton {...closeButtonProps} />

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);