@zezosoft/zezo-ott-react-native-ui-kit 1.1.2 → 1.1.3

package/src/components/Content/Card/Styles/Four.tsx

@@ -14,30 +14,48 @@ import {
   type TextStyle,
   type ViewStyle,
   type AccessibilityProps,
-  type ListRenderItemInfo,
 } from 'react-native';
+
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { moderateScale, verticalScale } from 'react-native-size-matters';
-import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
+import FastImage from 'react-native-fast-image';
+import { RFValue } from 'react-native-responsive-fontsize';
+
 import NavigateToMore from '../components/NavigateToMore';
-import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
+import { AdsPoster } from '../components';
 import CardPoster from '../components/CardPoster';
-import FastImage from 'react-native-fast-image';
+
+import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
+
 import type {
+  IAdItem,
   IGetSectionData,
   ISectionContent,
   MoreFetchData,
 } from '../../../../types';
 import type { ITheme, ThemeOverride } from '../../../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
-import type { IContentData } from '@zezosoft/zezo-ott-api-client';
+import type { IContentData, IServeAd } from '@zezosoft/zezo-ott-api-client';
+import { useCards } from '../../../../hooks';
 
-// default values
+// Constants
 const DEFAULT_ITEM_WIDTH = moderateScale(100);
 const DEFAULT_BORDER_RADIUS = moderateScale(5);
 const DEFAULT_SKELETON_COUNT = 5;
 const ASPECT_RATIO = 0.7 / 1;
+const END_REACHED_THRESHOLD = 0.5;
+const ITEM_ACTIVE_OPACITY = 0.8;
+const SKELETON_TITLE_WIDTH = moderateScale(100);
+const SKELETON_TITLE_HEIGHT = moderateScale(20);
+const SKELETON_TITLE_BORDER_RADIUS = moderateScale(4);
+const SKELETON_TITLE_MARGIN_HORIZONTAL = moderateScale(15);
+const SKELETON_TITLE_MARGIN_BOTTOM = verticalScale(6);
+const SKELETON_ITEM_MARGIN_LEFT = moderateScale(12);
+const SKELETON_ITEM_MARGIN_RIGHT = moderateScale(12);
+const ITEM_MARGIN_LEFT = moderateScale(10);
+const LIST_CONTENT_PADDING_RIGHT = moderateScale(12);
+const SKELETON_LIST_PADDING_RIGHT = moderateScale(15);
 
+// Types
 type MovieCardFourProps = {
   title: string;
   section_id: string;
@@ -60,53 +78,76 @@ type MovieCardFourProps = {
   skeletonCount?: number;
   containerStyle?: StyleProp<ViewStyle>;
   titleStyle?: StyleProp<TextStyle>;
+  paginationSkeletonCount?: number;
   itemStyle?: StyleProp<ViewStyle>;
   isLoading?: boolean;
   theme?: ThemeOverride;
+  onDisplayAds?: (ad: IServeAd) => void;
+  screenDimensions?: { width: number; height: number };
+  viewportOffsets?: {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+  };
 } & AccessibilityProps;
 
+// Main Component
 const MovieCardFour: React.FC<MovieCardFourProps> = ({
   title,
   section_id,
   type,
-  data: initialData,
+  data: externalData,
   moreFetchData,
   onPressItem,
   onPressMore,
-  renderItemImage,
   itemWidth = DEFAULT_ITEM_WIDTH,
   itemHeight = DEFAULT_ITEM_WIDTH / ASPECT_RATIO,
   borderRadius = DEFAULT_BORDER_RADIUS,
   skeletonCount = DEFAULT_SKELETON_COUNT,
   containerStyle,
+  paginationSkeletonCount,
   titleStyle,
   itemStyle,
   isLoading = false,
   theme,
   accessibilityLabel,
   accessibilityHint,
+  onDisplayAds,
+  screenDimensions,
+  viewportOffsets,
 }) => {
-  const flatListRef = useRef<FlatList<IContentData>>(null);
+  // Refs
+  const flatListRef = useRef<FlatList<IContentData | IAdItem>>(null);
   const onEndReachedCalledDuringMomentum = useRef(false);
+
+  // Theme
   const { theme: appliedTheme } = useInternalTheme(theme);
 
+  // Styles
   const styles = useMemo(
     () => getStyles(appliedTheme, itemWidth, itemHeight, borderRadius),
     [appliedTheme, itemWidth, itemHeight, borderRadius]
   );
 
+  // Data Management
   const {
-    data,
+    listData,
     pagination,
-    loading: isPaginating,
-    loadMoreData,
-  } = usePaginatedSection(
-    section_id,
-    moreFetchData,
-    initialData?.data || [],
-    isLoading
-  );
+    loadMore,
+    isEmpty,
+    isPaging: isPaginating,
+  } = useCards({
+    sectionId: section_id,
+    data: externalData,
+    fetchMore: moreFetchData,
+    loading: isLoading,
+    initialSkeleton: skeletonCount,
+    pagingSkeleton: paginationSkeletonCount,
+    adsRender: true,
+  });
 
+  // Event Handlers
   const handleItemPress = useCallback(
     (item: IContentData) => onPressItem?.(item),
     [onPressItem]
@@ -123,66 +164,113 @@ const MovieCardFour: React.FC<MovieCardFourProps> = ({
       pagination?.nextPage
     ) {
       onEndReachedCalledDuringMomentum.current = true;
-      loadMoreData(pagination.nextPage);
+      loadMore(pagination.nextPage);
     }
-  }, [loadMoreData, pagination]);
+  }, [loadMore, pagination]);
 
+  const handleMomentumScrollBegin = useCallback(() => {
+    onEndReachedCalledDuringMomentum.current = false;
+  }, []);
+
+  // Render Functions
   const renderItem = useCallback(
-    ({ item, index }: ListRenderItemInfo<IContentData>) => {
+    ({ item, index }: { item: IContentData | IAdItem; index: number }) => {
+      // Handle ads
+      if ('type' in item && item.type === 'ads') {
+        const adItem = item as IAdItem;
+        return (
+          <View
+            key={`ad-${adItem.tracking?.impression || index}`}
+            style={[styles.item, itemStyle]}
+          >
+            <AdsPoster
+              ad={adItem}
+              theme={appliedTheme}
+              isLoading={isLoading}
+              containerStyle={{ width: itemWidth, height: itemHeight }}
+              imageStyle={styles.image}
+              borderRadius={borderRadius}
+              onDisplayAds={onDisplayAds}
+              screenDimensions={screenDimensions}
+              viewportOffsets={viewportOffsets}
+            />
+          </View>
+        );
+      }
+      // Handle content items
+      const contentItem = item as IContentData;
+      const isSkeleton =
+        contentItem._id?.startsWith?.('pagination-skeleton') ?? false;
+
       return (
         <TouchableOpacity
+          key={contentItem._id}
           style={[styles.item, itemStyle]}
-          onPress={() => handleItemPress(item)}
-          activeOpacity={0.8}
+          activeOpacity={ITEM_ACTIVE_OPACITY}
+          onPress={() => {
+            if (!isSkeleton && !isLoading) {
+              handleItemPress(contentItem);
+            }
+          }}
         >
-          {renderItemImage ? (
-            renderItemImage({ item, index })
-          ) : (
-            <CardPoster
-              content_offering_type={item.content_offering_type}
-              posterUri={item.poster}
-              theme={appliedTheme}
-              borderRadius={borderRadius}
-              posterWrapperStyle={styles.image}
-              resizeMode={FastImage.resizeMode.cover}
-              isLoading={isLoading}
-            />
-          )}
+          <CardPoster
+            posterUri={contentItem.poster}
+            content_offering_type={contentItem.content_offering_type}
+            theme={appliedTheme}
+            borderRadius={borderRadius}
+            posterWrapperStyle={styles.image}
+            resizeMode={FastImage.resizeMode.cover}
+            isLoading={isSkeleton || isLoading}
+          />
         </TouchableOpacity>
       );
     },
     [
-      styles.item,
-      styles.image,
-      itemStyle,
-      renderItemImage,
       appliedTheme,
+      styles,
+      itemStyle,
       borderRadius,
       isLoading,
       handleItemPress,
+      itemWidth,
+      itemHeight,
+      onDisplayAds,
+      screenDimensions,
+      viewportOffsets,
     ]
   );
 
-  const renderSkeletonItem = ({ index }: { index: number }) => (
-    <SkeletonPlaceholder
-      key={`skeleton-${index}`}
-      highlightColor={appliedTheme.colors.skeletonHighlightColor}
-      backgroundColor={appliedTheme.colors.skeletonBaseColor}
-    >
-      <SkeletonPlaceholder.Item
-        width={itemWidth}
-        height={itemHeight}
-        borderRadius={borderRadius}
-        marginLeft={index === 0 ? moderateScale(12) : 0}
-        marginRight={moderateScale(12)}
-      />
-    </SkeletonPlaceholder>
+  const renderSkeletonItem = useCallback(
+    ({ index }: { index: number }) => (
+      <SkeletonPlaceholder
+        key={`skeleton-${index}`}
+        highlightColor={appliedTheme.colors.skeletonHighlightColor}
+        backgroundColor={appliedTheme.colors.skeletonBaseColor}
+      >
+        <SkeletonPlaceholder.Item
+          width={itemWidth}
+          height={itemHeight}
+          borderRadius={borderRadius}
+          marginLeft={index === 0 ? SKELETON_ITEM_MARGIN_LEFT : 0}
+          marginRight={SKELETON_ITEM_MARGIN_RIGHT}
+        />
+      </SkeletonPlaceholder>
+    ),
+    [appliedTheme, itemWidth, itemHeight, borderRadius]
+  );
+
+  const keyExtractor = useCallback(
+    (item: IContentData | IAdItem, index: number) => {
+      return '_id' in item ? item._id : `ad-${index}`;
+    },
+    []
   );
-  if (!initialData) {
-    return null;
-  }
-  if (!isLoading && data.length === 0) return null;
 
+  // Early Returns
+  if (!externalData) return null;
+  if (!isLoading && listData.length === 0 && !isEmpty) return null;
+
+  // Main Render
   return (
     <View
       style={[styles.root, containerStyle]}
@@ -196,24 +284,21 @@ const MovieCardFour: React.FC<MovieCardFourProps> = ({
             backgroundColor={appliedTheme.colors.skeletonBaseColor}
           >
             <SkeletonPlaceholder.Item
-              width={moderateScale(100)}
-              height={moderateScale(20)}
-              borderRadius={moderateScale(4)}
-              marginHorizontal={moderateScale(15)}
-              marginBottom={verticalScale(6)}
+              width={SKELETON_TITLE_WIDTH}
+              height={SKELETON_TITLE_HEIGHT}
+              borderRadius={SKELETON_TITLE_BORDER_RADIUS}
+              marginHorizontal={SKELETON_TITLE_MARGIN_HORIZONTAL}
+              marginBottom={SKELETON_TITLE_MARGIN_BOTTOM}
             />
           </SkeletonPlaceholder>
+
           <ScrollView
             horizontal
             showsHorizontalScrollIndicator={false}
             contentContainerStyle={styles.skeletonList}
           >
-            {skeletonCount > 0 && (
-              <View style={styles.skeletonList}>
-                {Array.from({ length: skeletonCount }).map((_, index) =>
-                  renderSkeletonItem({ index })
-                )}
-              </View>
+            {Array.from({ length: skeletonCount }).map((_, index) =>
+              renderSkeletonItem({ index })
             )}
           </ScrollView>
         </>
@@ -230,25 +315,18 @@ const MovieCardFour: React.FC<MovieCardFourProps> = ({
             containerStyle={styles.navigateToMoreContainer}
             showAllProps={{ iconColor: appliedTheme.colors.textPrimary, theme }}
           />
+
           <FlatList
             ref={flatListRef}
-            data={data}
+            data={listData}
             horizontal
-            keyExtractor={(item, index) =>
-              item._id || `item-${item.slug || item.name || index}`
-            }
+            keyExtractor={keyExtractor}
             renderItem={renderItem}
             showsHorizontalScrollIndicator={false}
             contentContainerStyle={styles.listContent}
-            initialNumToRender={5}
             onEndReached={handleEndReached}
-            onEndReachedThreshold={0.5}
-            onScrollBeginDrag={() => {
-              onEndReachedCalledDuringMomentum.current = false;
-            }}
-            onMomentumScrollBegin={() => {
-              onEndReachedCalledDuringMomentum.current = false;
-            }}
+            onEndReachedThreshold={END_REACHED_THRESHOLD}
+            onMomentumScrollBegin={handleMomentumScrollBegin}
             ListFooterComponent={
               isPaginating ? renderSkeletonItem({ index: 0 }) : null
             }
@@ -259,6 +337,7 @@ const MovieCardFour: React.FC<MovieCardFourProps> = ({
   );
 };
 
+// Styles
 const getStyles = (
   theme: ITheme,
   width: number,
@@ -270,7 +349,7 @@ const getStyles = (
       marginVertical: verticalScale(6),
     },
     item: {
-      marginLeft: moderateScale(10),
+      marginLeft: ITEM_MARGIN_LEFT,
     },
     image: {
       width,
@@ -287,12 +366,12 @@ const getStyles = (
       fontWeight: '600',
     },
     listContent: {
-      paddingRight: moderateScale(12),
+      paddingRight: LIST_CONTENT_PADDING_RIGHT,
     },
     skeletonList: {
       flexDirection: 'row',
       alignItems: 'flex-start',
-      paddingRight: moderateScale(15),
+      paddingRight: SKELETON_LIST_PADDING_RIGHT,
     },
   });