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

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

@@ -13,13 +13,12 @@ import {
   type TextStyle,
   type ViewStyle,
   type AccessibilityProps,
-  type ListRenderItem,
 } from 'react-native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
 import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
 import NavigateToMore from '../components/NavigateToMore';
-import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
+
 import type {
   IGetSectionData,
   ISectionContent,
@@ -27,17 +26,63 @@ import type {
 } from '../../../../types';
 import type { ITheme, ThemeOverride } from '../../../../theme/themes';
 import FastImage from 'react-native-fast-image';
-import LinearGradient from 'react-native-linear-gradient';
-import { Text } from '../../../Text';
 import CardPoster from '../components/CardPoster';
 import { RFValue } from 'react-native-responsive-fontsize';
 import type { IContentData } from '@zezosoft/zezo-ott-api-client';
+import { useCards } from '../../../../hooks';
+
+// ============================================
+// Constants
+// ============================================
 
 const DEFAULT_ITEM_WIDTH = moderateScale(120);
 const DEFAULT_ITEM_HEIGHT = moderateScale(180);
 const DEFAULT_BORDER_RADIUS = moderateScale(8);
 const DEFAULT_SKELETON_COUNT = 5;
 
+// Spacing
+const ITEM_MARGIN_RIGHT = moderateScale(12);
+const ITEM_MARGIN_LEFT = moderateScale(10);
+const FIRST_ITEM_MARGIN_LEFT = moderateScale(12);
+const LIST_PADDING_RIGHT = moderateScale(20);
+const CONTAINER_PADDING_HORIZONTAL = moderateScale(16);
+const CONTAINER_MARGIN_BOTTOM = verticalScale(8);
+const ROOT_MARGIN_VERTICAL = verticalScale(6);
+
+// Skeleton
+const SKELETON_TITLE_WIDTH = moderateScale(100);
+const SKELETON_TITLE_HEIGHT = verticalScale(14);
+const SKELETON_TITLE_BORDER_RADIUS = moderateScale(4);
+const SKELETON_TITLE_MARGIN_LEFT = moderateScale(12);
+const SKELETON_TITLE_MARGIN_BOTTOM = verticalScale(6);
+
+// FlatList Performance
+const INITIAL_NUM_TO_RENDER = 5;
+const MAX_TO_RENDER_PER_BATCH = 10;
+const WINDOW_SIZE = 5;
+const ON_END_REACHED_THRESHOLD = 0.5;
+
+// Interaction
+const ACTIVE_OPACITY = 0.8;
+
+// ============================================
+// Helper Functions
+// ============================================
+
+/**
+ * Checks if an item is a skeleton placeholder
+ */
+const isSkeletonItem = (item: IContentData): boolean => {
+  const hasEmptyPoster = !item.poster || item.poster.trim() === '';
+  const isSkeletonId =
+    item._id?.startsWith('sk-') || item._id?.startsWith('pagination-skeleton-');
+  return hasEmptyPoster || isSkeletonId;
+};
+
+// ============================================
+// Types
+// ============================================
+
 type TopTenCardProps = {
   title: string;
   section_id: string;
@@ -54,6 +99,7 @@ type TopTenCardProps = {
   itemHeight?: number;
   borderRadius?: number;
   skeletonCount?: number;
+  paginationSkeletonCount?: number;
   containerStyle?: StyleProp<ViewStyle>;
   titleStyle?: StyleProp<TextStyle>;
   itemStyle?: StyleProp<ViewStyle>;
@@ -64,7 +110,7 @@ type TopTenCardProps = {
 const TopTenCard: React.FC<TopTenCardProps> = ({
   title,
   section_id,
-  data: initialData,
+  data: externalData,
   moreFetchData,
   onPressMore,
   type,
@@ -76,218 +122,245 @@ const TopTenCard: React.FC<TopTenCardProps> = ({
   containerStyle,
   titleStyle,
   itemStyle,
+  paginationSkeletonCount,
   isLoading = false,
   theme,
   accessibilityLabel,
   accessibilityHint,
 }) => {
+  // ============================================
+  // Refs
+  // ============================================
   const flatListRef = useRef<FlatList<IContentData>>(null);
   const onEndReachedDuringMomentum = useRef(false);
+
+  // ============================================
+  // Theme & Styles
+  // ============================================
   const { theme: appliedTheme } = useInternalTheme(theme);
   const styles = useMemo(
     () => getStyles(appliedTheme, itemWidth, itemHeight, borderRadius),
     [appliedTheme, itemWidth, itemHeight, borderRadius]
   );
 
+  // ============================================
+  // Data Management
+  // ============================================
   const {
-    data,
-    pagination: paginated,
-    loading: isPaginating,
-    loadMoreData,
-  } = usePaginatedSection(
-    section_id,
-    moreFetchData,
-    initialData?.data || [],
-    isLoading
+    listData,
+    pagination,
+    loadMore,
+    isEmpty,
+    isPaging: isPaginating,
+  } = useCards({
+    sectionId: section_id,
+    data: externalData,
+    fetchMore: moreFetchData,
+    loading: isLoading,
+    initialSkeleton: skeletonCount,
+    pagingSkeleton: paginationSkeletonCount,
+    adsRender: false,
+  });
+  const contentData = useMemo(
+    () =>
+      listData.filter(
+        (item): item is IContentData => !('type' in item && item.type === 'ads')
+      ),
+    [listData]
   );
 
-  const listData = useMemo(() => (Array.isArray(data) ? data : []), [data]);
-
-  const handleEndReached = useCallback(() => {
-    if (
-      !onEndReachedDuringMomentum.current &&
-      paginated?.hasNextPage &&
-      paginated?.nextPage
-    ) {
-      onEndReachedDuringMomentum.current = true;
-      loadMoreData(paginated.nextPage);
-    }
-  }, [loadMoreData, paginated?.hasNextPage, paginated?.nextPage]);
+  // ============================================
+  // Event Handlers
+  // ============================================
   const handleItemPress = useCallback(
     (item: IContentData) => {
       onPressItem?.(item);
     },
     [onPressItem]
   );
+
+  const handleMorePress = useCallback(() => {
+    onPressMore?.({
+      section_id,
+      name: title,
+      type,
+    });
+  }, [onPressMore, section_id, title, type]);
+
+  const handleEndReached = useCallback(() => {
+    const canLoadMore =
+      !onEndReachedDuringMomentum.current &&
+      pagination?.hasNextPage &&
+      pagination?.nextPage;
+
+    if (canLoadMore) {
+      onEndReachedDuringMomentum.current = true;
+      loadMore(pagination.nextPage);
+    }
+  }, [loadMore, pagination?.hasNextPage, pagination?.nextPage]);
+
+  const handleMomentumScrollBegin = useCallback(() => {
+    onEndReachedDuringMomentum.current = false;
+  }, []);
+
+  // ============================================
+  // Render Functions
+  // ============================================
+  const renderSkeleton = useCallback(
+    (isFirst: boolean) => (
+      <SkeletonPlaceholder
+        highlightColor={appliedTheme.colors.skeletonHighlightColor}
+        backgroundColor={appliedTheme.colors.skeletonBaseColor}
+        borderRadius={borderRadius}
+      >
+        <SkeletonPlaceholder.Item
+          width={itemWidth}
+          height={itemHeight}
+          borderRadius={borderRadius}
+          marginRight={ITEM_MARGIN_RIGHT}
+          marginLeft={isFirst ? FIRST_ITEM_MARGIN_LEFT : 0}
+        />
+      </SkeletonPlaceholder>
+    ),
+    [appliedTheme, borderRadius, itemWidth, itemHeight]
+  );
+
   const renderItem = useCallback(
     ({ item, index }: { item: IContentData; index: number }) => {
+      const isFirstItem = index === 0;
+      const rankNumber = index + 1;
+
+      if (isSkeletonItem(item)) {
+        return renderSkeleton(isFirstItem);
+      }
+
       return (
         <TouchableOpacity
-          style={[styles.item, index === 0 && styles.firstItem, itemStyle]}
+          style={[styles.item, isFirstItem && styles.firstItem, itemStyle]}
           onPress={() => handleItemPress(item)}
-          activeOpacity={0.8}
+          activeOpacity={ACTIVE_OPACITY}
         >
-          <LinearGradient
-            colors={['rgba(0,0,0,0)', 'rgba(0,0,0,0.8)']}
-            style={styles.imageOverlay}
-          >
-            <CardPoster
-              content_offering_type={item.content_offering_type}
-              posterUri={item.poster}
-              isLoading={isLoading}
-              borderRadius={borderRadius}
-              posterWrapperStyle={[styles.image]}
-              resizeMode={FastImage.resizeMode.cover}
-              theme={appliedTheme}
-            />
-            <View style={styles.numberContainer}>
-              <LinearGradient
-                colors={appliedTheme.colors.backgroundLayoutGradient}
-                start={{ x: 1, y: 0.5 }}
-                end={{ x: 0.5, y: 1 }}
-                style={styles.rankNumberBox}
-              >
-                <Text style={styles.rankNumberText}>{index + 1}</Text>
-              </LinearGradient>
-            </View>
-          </LinearGradient>
+          <CardPoster
+            content_offering_type={item.content_offering_type}
+            posterUri={item.poster}
+            isLoading={isLoading}
+            borderRadius={borderRadius}
+            posterWrapperStyle={[styles.image]}
+            resizeMode={FastImage.resizeMode.cover}
+            theme={appliedTheme}
+            showRankNumber={true}
+            rankNumber={rankNumber}
+          />
         </TouchableOpacity>
       );
     },
     [
       styles.item,
       styles.firstItem,
-      styles.imageOverlay,
       styles.image,
-      styles.numberContainer,
-      styles.rankNumberBox,
-      styles.rankNumberText,
       itemStyle,
       isLoading,
       borderRadius,
       appliedTheme,
       handleItemPress,
+      renderSkeleton,
     ]
   );
 
-  const renderSkeletonItem: ListRenderItem<null> = useCallback(
-    ({ index }) => (
-      <SkeletonPlaceholder
-        key={`skeleton-${index}`}
-        highlightColor={appliedTheme.colors.skeletonHighlightColor}
-        backgroundColor={appliedTheme.colors.skeletonBaseColor}
-        borderRadius={borderRadius}
-      >
-        <SkeletonPlaceholder.Item
-          width={itemWidth}
-          height={itemHeight}
+  const renderPaginationSkeleton = useCallback(() => {
+    if (!isPaginating) return null;
+
+    return (
+      <View style={[styles.item, styles.skeletonItem]}>
+        <CardPoster
+          posterUri=""
+          theme={appliedTheme}
+          isLoading={true}
           borderRadius={borderRadius}
-          marginRight={moderateScale(12)}
-          marginLeft={index === 0 ? moderateScale(12) : 0}
+          showRankNumber={true}
         />
-      </SkeletonPlaceholder>
-    ),
-    [appliedTheme, itemWidth, itemHeight, borderRadius]
+      </View>
+    );
+  }, [
+    isPaginating,
+    appliedTheme,
+    borderRadius,
+    styles.item,
+    styles.skeletonItem,
+  ]);
+
+  const keyExtractor = useCallback(
+    (item: IContentData, index: number) => `${item._id ?? item.name}-${index}`,
+    []
   );
-  if (!initialData) {
-    return null;
-  }
-  if (!isLoading && (!listData || listData.length === 0)) return null;
 
-  if (isLoading) {
-    return (
-      <View
-        style={[styles.root, containerStyle]}
-        testID={`movie-card-skeleton-${section_id}`}
-      >
+  // ============================================
+  // Early Returns
+  // ============================================
+  if (!externalData) return null;
+  if (!isLoading && contentData.length === 0 && !isEmpty) return null;
+
+  // ============================================
+  // Render
+  // ============================================
+  return (
+    <View
+      style={[styles.root, containerStyle]}
+      accessibilityLabel={accessibilityLabel || `Top Ten Section: ${title}`}
+      accessibilityHint={accessibilityHint || 'Scroll to view top content'}
+      testID={isLoading ? `movie-card-skeleton-${section_id}` : undefined}
+    >
+      {/* Title Section */}
+      {isLoading ? (
         <SkeletonPlaceholder
           highlightColor={appliedTheme.colors.skeletonHighlightColor}
           backgroundColor={appliedTheme.colors.skeletonBaseColor}
         >
           <SkeletonPlaceholder.Item
-            width={moderateScale(100)}
-            height={verticalScale(14)}
-            borderRadius={moderateScale(4)}
-            marginLeft={moderateScale(12)}
-            marginBottom={verticalScale(6)}
+            width={SKELETON_TITLE_WIDTH}
+            height={SKELETON_TITLE_HEIGHT}
+            borderRadius={SKELETON_TITLE_BORDER_RADIUS}
+            marginLeft={SKELETON_TITLE_MARGIN_LEFT}
+            marginBottom={SKELETON_TITLE_MARGIN_BOTTOM}
           />
         </SkeletonPlaceholder>
-        <FlatList
-          data={Array.from({ length: skeletonCount }, () => null)}
-          horizontal
-          keyExtractor={(_, index) => `skeleton-${index}`}
-          renderItem={renderSkeletonItem}
-          showsHorizontalScrollIndicator={false}
-          contentContainerStyle={styles.listContent}
+      ) : (
+        <NavigateToMore
+          title={title}
+          onPress={handleMorePress}
+          titleStyle={[styles.title, titleStyle]}
+          containerStyle={styles.navigateToMoreContainer}
+          showAllProps={{
+            iconColor: appliedTheme.colors.textPrimary,
+            theme,
+          }}
         />
-      </View>
-    );
-  }
-  return (
-    <View
-      style={[styles.root, containerStyle]}
-      accessibilityLabel={accessibilityLabel || `Top Ten Section: ${title}`}
-      accessibilityHint={accessibilityHint || 'Scroll to view top content'}
-    >
-      <NavigateToMore
-        title={title}
-        onPress={() =>
-          onPressMore?.({
-            section_id,
-            name: title,
-            type,
-          })
-        }
-        titleStyle={[styles.title, titleStyle]}
-        containerStyle={styles.navigateToMoreContainer}
-        showAllProps={{ iconColor: appliedTheme.colors.textPrimary, theme }}
-      />
+      )}
+
+      {/* Content List */}
       <FlatList
         ref={flatListRef}
-        data={listData}
+        data={contentData}
         horizontal
         showsHorizontalScrollIndicator={false}
-        keyExtractor={(item, index) => `${item._id ?? item.name}-${index}`}
+        keyExtractor={keyExtractor}
         renderItem={renderItem}
         contentContainerStyle={styles.listContent}
-        initialNumToRender={5}
-        maxToRenderPerBatch={10}
-        windowSize={5}
-        onEndReachedThreshold={0.5}
-        onMomentumScrollBegin={() => {
-          onEndReachedDuringMomentum.current = false;
-        }}
+        initialNumToRender={INITIAL_NUM_TO_RENDER}
+        maxToRenderPerBatch={MAX_TO_RENDER_PER_BATCH}
+        windowSize={WINDOW_SIZE}
+        onEndReachedThreshold={ON_END_REACHED_THRESHOLD}
+        onMomentumScrollBegin={handleMomentumScrollBegin}
         onEndReached={handleEndReached}
-        ListFooterComponent={
-          isPaginating ? (
-            <SkeletonPlaceholder
-              highlightColor={appliedTheme.colors.skeletonHighlightColor}
-              backgroundColor={appliedTheme.colors.skeletonBaseColor}
-              borderRadius={borderRadius}
-              speed={800}
-            >
-              <View style={[styles.item, styles.skeletonItem]}>
-                <SkeletonPlaceholder.Item
-                  width={itemWidth}
-                  height={itemHeight}
-                  borderRadius={borderRadius}
-                />
-                <View style={styles.numberContainer}>
-                  <SkeletonPlaceholder.Item
-                    width={scale(40)}
-                    height={scale(40)}
-                    borderRadius={borderRadius}
-                  />
-                </View>
-              </View>
-            </SkeletonPlaceholder>
-          ) : null
-        }
+        ListFooterComponent={renderPaginationSkeleton}
       />
     </View>
   );
 };
 
+// ============================================
+// Styles
+// ============================================
 const getStyles = (
   theme: ITheme,
   width: number,
@@ -296,64 +369,30 @@ const getStyles = (
 ) =>
   StyleSheet.create({
     root: {
-      marginVertical: verticalScale(6),
+      marginVertical: ROOT_MARGIN_VERTICAL,
     },
     item: {
       width,
       height,
-      marginRight: moderateScale(12),
-      overflow: 'hidden',
+      marginRight: ITEM_MARGIN_RIGHT,
       borderColor: theme.colors.outlineDisabled,
-      borderWidth: scale(0.5),
-      aspectRatio: 2 / 3,
+      borderWidth: scale(0.7),
       borderRadius: radius,
       position: 'relative',
     },
     firstItem: {
-      marginLeft: moderateScale(10),
-    },
-    imageOverlay: {
-      width: '100%',
-      height: '100%',
-      justifyContent: 'flex-end',
-      alignItems: 'flex-start',
+      marginLeft: ITEM_MARGIN_LEFT,
     },
     image: {
       width: '100%',
       height: '100%',
-      borderRadius: radius,
-    },
-
-    rankNumberBox: {
-      width: scale(40),
-      height: scale(40),
-      borderTopRightRadius: scale(30),
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
-    rankNumberText: {
-      fontSize: RFValue(27),
-      fontWeight: '900',
-      color: theme.colors.textPrimary,
-      textShadowColor: 'rgba(0, 0, 0, 0.6)',
-      textShadowOffset: { width: 1, height: 1 },
-      textShadowRadius: 3,
-      marginTop: scale(5),
-      marginRight: scale(5),
-      letterSpacing: 0.5,
-    },
-    numberContainer: {
-      position: 'absolute',
-      bottom: 0,
-      left: 0,
-      zIndex: 10,
     },
     navigateToMoreContainer: {
-      paddingHorizontal: moderateScale(16),
-      marginBottom: verticalScale(8),
+      paddingHorizontal: CONTAINER_PADDING_HORIZONTAL,
+      marginBottom: CONTAINER_MARGIN_BOTTOM,
     },
     listContent: {
-      paddingRight: moderateScale(20),
+      paddingRight: LIST_PADDING_RIGHT,
     },
     title: {
       fontSize: RFValue(13),