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

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

@@ -3,7 +3,7 @@
  * @LastModified Sat 28 Jun 2025 at 01:00 AM
  **/
 
-import React, { memo, useCallback, useRef } from 'react';
+import React, { memo, useCallback, useMemo, useRef } from 'react';
 import {
   View,
   FlatList,
@@ -24,7 +24,6 @@ import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
 import NavigateToMore from '../components/NavigateToMore';
 import { ThumbnailCard } from '../components/ThumbnailCard';
 import { Text } from '../../../Text';
-import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
 import type { ThemeOverride } from '../../../../theme/themes';
 import type {
   IGetSectionData,
@@ -34,10 +33,42 @@ import type {
 import { RFValue } from 'react-native-responsive-fontsize';
 import RentOrBuyIcon from '../components/RentOrBuyIcon';
 import type { IContentData } from '@zezosoft/zezo-ott-api-client';
+import { useCards } from '../../../../hooks';
+
+// Default dimensions and styling constants
 const DEFAULT_ITEM_WIDTH = moderateScale(160);
 const DEFAULT_BORDER_RADIUS = moderateScale(5);
 const DEFAULT_SKELETON_COUNT = 3;
 
+// Spacing constants
+const ITEM_MARGIN_LEFT = moderateScale(10);
+const ITEM_MARGIN_TOP = verticalScale(4);
+const FIRST_SKELETON_MARGIN_LEFT = moderateScale(12);
+const SKELETON_MARGIN_RIGHT = moderateScale(12);
+const CONTAINER_PADDING_HORIZONTAL = moderateScale(10);
+const CONTAINER_MARGIN_BOTTOM = verticalScale(8);
+const ROOT_MARGIN_VERTICAL = verticalScale(6);
+const LIST_PADDING_RIGHT = moderateScale(15);
+
+// Skeleton styling constants
+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_THUMBNAIL_HEIGHT_RATIO = 9 / 16;
+const SKELETON_TEXT_WIDTH_RATIO = 0.8;
+const SKELETON_TEXT_HEIGHT = moderateScale(13);
+const SKELETON_TEXT_BORDER_RADIUS = moderateScale(3);
+const SKELETON_TEXT_MARGIN_TOP = verticalScale(6);
+
+// FlatList performance constants
+const INITIAL_NUM_TO_RENDER = 5;
+const ON_END_REACHED_THRESHOLD = 0.5;
+
+// Touchable opacity constant
+const ACTIVE_OPACITY = 0.8;
+
 type MovieCardSixProps = {
   theme?: ThemeOverride;
   title: string;
@@ -54,6 +85,7 @@ type MovieCardSixProps = {
   itemWidth?: number;
   borderRadius?: number;
   skeletonCount?: number;
+  paginationSkeletonCount?: number;
   containerStyle?: StyleProp<ViewStyle>;
   titleStyle?: StyleProp<TextStyle>;
   itemStyle?: StyleProp<ViewStyle>;
@@ -65,13 +97,14 @@ const MovieCardSix: React.FC<MovieCardSixProps> = ({
   title,
   section_id,
   type,
-  data: initialData,
+  data: externalData,
   moreFetchData,
   onPressItem,
   onPressMore,
   itemWidth = DEFAULT_ITEM_WIDTH,
   borderRadius = DEFAULT_BORDER_RADIUS,
   skeletonCount = DEFAULT_SKELETON_COUNT,
+  paginationSkeletonCount,
   containerStyle,
   titleStyle,
   itemStyle,
@@ -79,22 +112,31 @@ const MovieCardSix: React.FC<MovieCardSixProps> = ({
   accessibilityLabel,
   accessibilityHint,
 }) => {
+  // Refs
   const flatListRef = useRef<FlatList<IContentData>>(null);
   const onEndReachedCalledDuringMomentum = useRef(false);
-  const { theme: appliedTheme } = useInternalTheme(theme);
 
-  const paginated = usePaginatedSection(
-    section_id,
-    moreFetchData,
-    initialData?.data,
-    isLoading
-  );
+  // Theme
+  const { theme: appliedTheme } = useInternalTheme(theme);
 
-  const sectionData = paginated.data;
-  const pagination = paginated.pagination;
-  const isPaginating = paginated.loading;
-  const loadMoreData = paginated.loadMoreData;
+  // Data management using custom hook
+  const {
+    listData,
+    pagination,
+    loadMore,
+    isEmpty,
+    isPaging: isPaginating,
+  } = useCards({
+    sectionId: section_id,
+    data: externalData,
+    fetchMore: moreFetchData,
+    loading: isLoading,
+    initialSkeleton: skeletonCount,
+    pagingSkeleton: paginationSkeletonCount,
+    adsRender: false,
+  });
 
+  // Event handlers
   const handleItemPress = useCallback(
     (item: IContentData) => {
       onPressItem?.(item);
@@ -113,161 +155,219 @@ const MovieCardSix: React.FC<MovieCardSixProps> = ({
       pagination?.nextPage
     ) {
       onEndReachedCalledDuringMomentum.current = true;
-      loadMoreData(pagination.nextPage);
+      loadMore(pagination.nextPage);
     }
-  }, [pagination?.hasNextPage, pagination?.nextPage, loadMoreData]);
+  }, [pagination?.hasNextPage, pagination?.nextPage, loadMore]);
+
+  const handleScrollBeginDrag = useCallback(() => {
+    onEndReachedCalledDuringMomentum.current = false;
+  }, []);
 
+  const handleMomentumScrollBegin = useCallback(() => {
+    onEndReachedCalledDuringMomentum.current = false;
+  }, []);
+
+  // Generate key for FlatList items
+  const keyExtractor = useCallback(
+    (item: IContentData, index: number) => `${item._id}-${index}`,
+    []
+  );
+
+  // Render functions
   const renderItem = useCallback(
-    ({ item }: ListRenderItemInfo<IContentData>) => (
-      <TouchableOpacity
-        style={[styles.item, itemStyle]}
-        onPress={() => handleItemPress(item)}
-        activeOpacity={0.8}
-      >
-        <RentOrBuyIcon
-          theme={appliedTheme}
-          content_offering_type={item.content_offering_type}
-        />
-        <ThumbnailCard
-          thumbnailUri={item.thumbnail}
-          theme={appliedTheme}
-          isLoading={false}
-          borderRadius={borderRadius}
-          wrapperStyle={{ width: itemWidth }}
-          resizeMode={FastImage.resizeMode.cover}
-        />
-        <View style={{ width: itemWidth, marginTop: verticalScale(4) }}>
-          <Text
-            style={[
-              styles.itemTitle,
-              { color: appliedTheme.colors.textPrimary },
-            ]}
-            numberOfLines={1}
-          >
-            {item.name}
-          </Text>
-        </View>
-      </TouchableOpacity>
-    ),
+    ({ item }: ListRenderItemInfo<IContentData>) => {
+      const thumbnailWrapperStyle = { width: itemWidth };
+      const titleContainerStyle = {
+        width: itemWidth,
+        marginTop: ITEM_MARGIN_TOP,
+      };
+      const titleTextStyle = {
+        color: appliedTheme.colors.textPrimary,
+      };
+
+      return (
+        <TouchableOpacity
+          style={[styles.item, itemStyle]}
+          onPress={() => handleItemPress(item)}
+          activeOpacity={ACTIVE_OPACITY}
+        >
+          <RentOrBuyIcon
+            theme={appliedTheme}
+            content_offering_type={item.content_offering_type}
+          />
+          <ThumbnailCard
+            thumbnailUri={item.thumbnail}
+            theme={appliedTheme}
+            isLoading={false}
+            borderRadius={borderRadius}
+            wrapperStyle={thumbnailWrapperStyle}
+            resizeMode={FastImage.resizeMode.cover}
+          />
+          <View style={titleContainerStyle}>
+            <Text style={[styles.itemTitle, titleTextStyle]} numberOfLines={1}>
+              {item.name}
+            </Text>
+          </View>
+        </TouchableOpacity>
+      );
+    },
     [handleItemPress, itemStyle, appliedTheme, borderRadius, itemWidth]
   );
 
   const renderSkeletonItem = useCallback(
-    (index: number) => (
-      <SkeletonPlaceholder
-        key={`skeleton-${index}`}
-        highlightColor={appliedTheme.colors.skeletonHighlightColor}
-        backgroundColor={appliedTheme.colors.skeletonBaseColor}
-        borderRadius={borderRadius}
-      >
-        <SkeletonPlaceholder.Item
-          flexDirection="column"
-          alignItems="flex-start"
-          marginLeft={index === 0 ? moderateScale(12) : moderateScale(0)}
-          marginRight={moderateScale(12)}
+    (index: number) => {
+      const isFirstSkeleton = index === 0;
+      const thumbnailHeight = itemWidth * SKELETON_THUMBNAIL_HEIGHT_RATIO;
+      const textWidth = itemWidth * SKELETON_TEXT_WIDTH_RATIO;
+
+      return (
+        <SkeletonPlaceholder
+          key={`skeleton-${index}`}
+          highlightColor={appliedTheme.colors.skeletonHighlightColor}
+          backgroundColor={appliedTheme.colors.skeletonBaseColor}
+          borderRadius={borderRadius}
         >
-          {/* Thumbnail */}
           <SkeletonPlaceholder.Item
-            width={itemWidth}
-            height={(itemWidth * 9) / 16}
-            borderRadius={borderRadius}
-          />
+            flexDirection="column"
+            alignItems="flex-start"
+            marginLeft={isFirstSkeleton ? FIRST_SKELETON_MARGIN_LEFT : 0}
+            marginRight={SKELETON_MARGIN_RIGHT}
+          >
+            {/* Thumbnail */}
+            <SkeletonPlaceholder.Item
+              width={itemWidth}
+              height={thumbnailHeight}
+              borderRadius={borderRadius}
+            />
 
-          {/* Title */}
-          <SkeletonPlaceholder.Item
-            width={itemWidth * 0.8}
-            height={moderateScale(13)}
-            borderRadius={moderateScale(3)}
-            marginTop={verticalScale(6)}
-          />
-        </SkeletonPlaceholder.Item>
-      </SkeletonPlaceholder>
-    ),
+            {/* Title */}
+            <SkeletonPlaceholder.Item
+              width={textWidth}
+              height={SKELETON_TEXT_HEIGHT}
+              borderRadius={SKELETON_TEXT_BORDER_RADIUS}
+              marginTop={SKELETON_TEXT_MARGIN_TOP}
+            />
+          </SkeletonPlaceholder.Item>
+        </SkeletonPlaceholder>
+      );
+    },
     [appliedTheme.colors, itemWidth, borderRadius]
   );
-  if (!initialData) {
+
+  // Filter out ads to ensure only IContentData items are passed to FlatList
+  const contentData = useMemo(
+    () =>
+      listData.filter(
+        (item): item is IContentData => !('type' in item && item.type === 'ads')
+      ),
+    [listData]
+  );
+
+  // Render pagination skeleton footer
+  const renderPaginationSkeleton = useCallback(() => {
+    if (!isPaginating) {
+      return null;
+    }
+    return renderSkeletonItem(0);
+  }, [isPaginating, renderSkeletonItem]);
+
+  // Early returns for edge cases
+  if (!externalData) {
+    return null;
+  }
+
+  const shouldHideSection = !isLoading && contentData.length === 0 && !isEmpty;
+  if (shouldHideSection) {
     return null;
   }
-  if (!isLoading && sectionData.length === 0) return null;
 
+  // Loading skeleton state
+  if (isLoading) {
+    const skeletonDataLength = isPaginating ? 1 : skeletonCount;
+    const skeletonData = Array.from(
+      { length: skeletonDataLength },
+      (_, i) => i
+    );
+
+    return (
+      <View
+        style={[styles.root, containerStyle]}
+        accessibilityLabel={accessibilityLabel || `Movie section: ${title}`}
+        accessibilityHint={accessibilityHint || 'Scroll to view content'}
+      >
+        <SkeletonPlaceholder
+          highlightColor={appliedTheme.colors.skeletonHighlightColor}
+          backgroundColor={appliedTheme.colors.skeletonBaseColor}
+        >
+          <SkeletonPlaceholder.Item
+            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}
+        >
+          {skeletonData.map((index) => renderSkeletonItem(index))}
+        </ScrollView>
+      </View>
+    );
+  }
+
+  // Main content render
   return (
     <View
       style={[styles.root, containerStyle]}
       accessibilityLabel={accessibilityLabel || `Movie section: ${title}`}
       accessibilityHint={accessibilityHint || 'Scroll to view content'}
     >
-      {isLoading ? (
-        <>
-          <SkeletonPlaceholder
-            highlightColor={appliedTheme.colors.skeletonHighlightColor}
-            backgroundColor={appliedTheme.colors.skeletonBaseColor}
-          >
-            <SkeletonPlaceholder.Item
-              width={moderateScale(100)}
-              height={moderateScale(20)}
-              borderRadius={moderateScale(4)}
-              marginHorizontal={moderateScale(15)}
-              marginBottom={verticalScale(6)}
-            />
-          </SkeletonPlaceholder>
-          <ScrollView
-            horizontal
-            showsHorizontalScrollIndicator={false}
-            contentContainerStyle={styles.skeletonList}
-          >
-            {Array.from({ length: isPaginating ? 1 : skeletonCount }).map(
-              (_, index) => renderSkeletonItem(index)
-            )}
-          </ScrollView>
-        </>
-      ) : (
-        <>
-          <NavigateToMore
-            title={title}
-            onPress={handlePressMore}
-            titleStyle={[
-              styles.title,
-              { color: appliedTheme.colors.textPrimary },
-              titleStyle,
-            ]}
-            containerStyle={styles.navigateToMoreContainer}
-            showAllProps={{ iconColor: appliedTheme.colors.textPrimary, theme }}
-          />
-          <FlatList
-            ref={flatListRef}
-            data={sectionData}
-            horizontal
-            keyExtractor={(item, index) => `${item._id}-${index}`}
-            renderItem={renderItem}
-            showsHorizontalScrollIndicator={false}
-            contentContainerStyle={styles.listContent}
-            initialNumToRender={5}
-            onEndReached={handleEndReached}
-            onEndReachedThreshold={0.5}
-            onScrollBeginDrag={() => {
-              onEndReachedCalledDuringMomentum.current = false;
-            }}
-            onMomentumScrollBegin={() => {
-              onEndReachedCalledDuringMomentum.current = false;
-            }}
-            ListFooterComponent={isPaginating ? renderSkeletonItem(0) : null}
-          />
-        </>
-      )}
+      <NavigateToMore
+        title={title}
+        onPress={handlePressMore}
+        titleStyle={[
+          styles.title,
+          { color: appliedTheme.colors.textPrimary },
+          titleStyle,
+        ]}
+        containerStyle={styles.navigateToMoreContainer}
+        showAllProps={{
+          iconColor: appliedTheme.colors.textPrimary,
+          theme,
+        }}
+      />
+      <FlatList
+        ref={flatListRef}
+        data={contentData}
+        horizontal
+        keyExtractor={keyExtractor}
+        renderItem={renderItem}
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.listContent}
+        initialNumToRender={INITIAL_NUM_TO_RENDER}
+        onEndReached={handleEndReached}
+        onEndReachedThreshold={ON_END_REACHED_THRESHOLD}
+        onScrollBeginDrag={handleScrollBeginDrag}
+        onMomentumScrollBegin={handleMomentumScrollBegin}
+        ListFooterComponent={renderPaginationSkeleton}
+      />
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   root: {
-    marginVertical: verticalScale(6),
+    marginVertical: ROOT_MARGIN_VERTICAL,
   },
   item: {
-    marginLeft: moderateScale(10),
+    marginLeft: ITEM_MARGIN_LEFT,
   },
   navigateToMoreContainer: {
-    paddingHorizontal: moderateScale(10),
-    marginBottom: verticalScale(8),
+    paddingHorizontal: CONTAINER_PADDING_HORIZONTAL,
+    marginBottom: CONTAINER_MARGIN_BOTTOM,
   },
   title: {
     fontSize: RFValue(13),
@@ -276,16 +376,16 @@ const styles = StyleSheet.create({
   itemTitle: {
     fontSize: RFValue(9),
     fontWeight: '500',
-    lineHeight: moderateScale(13),
-    height: moderateScale(13),
+    lineHeight: SKELETON_TEXT_HEIGHT,
+    height: SKELETON_TEXT_HEIGHT,
   },
   listContent: {
-    paddingRight: moderateScale(15),
+    paddingRight: LIST_PADDING_RIGHT,
   },
   skeletonList: {
     flexDirection: 'row',
     alignItems: 'flex-start',
-    paddingRight: moderateScale(15),
+    paddingRight: LIST_PADDING_RIGHT,
   },
 });