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

package/src/hooks/useCards.ts

@@ -0,0 +1,228 @@
+/**
+ * Global Card Hook (No duplicates + single data key)
+ *
+ * Provides a unified interface for managing card data with:
+ * - Automatic deduplication
+ * - Skeleton loading states
+ * - Pagination support
+ * - Optimized performance
+ */
+
+import { useMemo, useCallback } from 'react';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
+import { usePaginatedSection } from './usePaginatedSection';
+import type { IAdItem, MoreFetchData } from '../types';
+import { dummyContentData } from '../constants/dummySections';
+
+export type CardSource =
+  | { data: (IContentData | IAdItem)[] }
+  | (IContentData | IAdItem)[]
+  | null;
+
+export type UseCardsOptions = {
+  sectionId: string;
+  data?: CardSource;
+  fetchMore?: MoreFetchData<IContentData>;
+  loading?: boolean;
+  initialSkeleton?: number;
+  pagingSkeleton?: number;
+  adsRender?: boolean; // If false, ads will be filtered out from listData
+};
+
+export type UseCardsReturn = {
+  listData: (IContentData | IAdItem)[]; // ✔ Mixed array of content and ads
+  pagination: {
+    hasNextPage: boolean;
+    nextPage: number | null;
+  } | null;
+  isPaging: boolean;
+  hasMore: boolean;
+  loadMore: (page: number | null) => Promise<void>;
+  isEmpty: boolean;
+};
+
+// -----------------------------------------------------------
+// Constants
+// -----------------------------------------------------------
+
+const DEFAULT_INITIAL_SKELETON = 5;
+const DEFAULT_PAGING_SKELETON = 3;
+
+// -----------------------------------------------------------
+// Helpers
+// -----------------------------------------------------------
+
+/**
+ * Normalizes different data source formats into a single array
+ */
+const normalize = (src: CardSource): (IContentData | IAdItem)[] => {
+  if (!src) return [];
+  if (Array.isArray(src)) return src;
+  return src.data ?? [];
+};
+
+/**
+ * Removes duplicate items by _id using Map for O(n) performance
+ * Preserves order of first occurrence
+ * Handles both IContentData and IAdItem types
+ */
+const uniqueById = (
+  list: (IContentData | IAdItem)[]
+): (IContentData | IAdItem)[] => {
+  if (list.length === 0) return [];
+
+  const seen = new Map<string, IContentData | IAdItem>();
+  const result: (IContentData | IAdItem)[] = [];
+
+  for (const item of list) {
+    // Handle ads - check for type property and use appropriate ID field
+    if ('type' in item && item.type === 'ads') {
+      const adItem = item as IAdItem;
+      // Ads might have _id (from IServeAd) or use mediaUrl as identifier
+      let id: string;
+      if ('_id' in adItem && adItem._id) {
+        id = String(adItem._id);
+      } else if ('mediaUrl' in adItem && adItem.mediaUrl) {
+        id = `ad-${adItem.mediaUrl}`;
+      } else {
+        id = `ad-${Math.random()}`;
+      }
+
+      if (!seen.has(id)) {
+        seen.set(id, adItem);
+        result.push(adItem);
+      }
+      continue;
+    }
+
+    // Handle content items
+    const contentItem = item as IContentData;
+    if (!contentItem?._id) continue; // Skip items without valid IDs
+
+    const id = String(contentItem._id);
+    if (!seen.has(id)) {
+      seen.set(id, contentItem);
+      result.push(contentItem);
+    }
+  }
+
+  return result;
+};
+
+/**
+ * Creates skeleton items for loading states
+ * Memoized by count to avoid unnecessary recreations
+ * Returns IContentData[] for skeleton loading (ads don't need skeletons)
+ */
+const createSkeletonItems = (count: number, prefix: string): IContentData[] => {
+  if (count <= 0) return [];
+  return Array.from({ length: count }, (_, i) =>
+    dummyContentData(`${prefix}-${i}`)
+  );
+};
+
+// -----------------------------------------------------------
+// Hook
+// -----------------------------------------------------------
+
+export function useCards({
+  sectionId,
+  data,
+  fetchMore,
+  loading = false,
+  initialSkeleton = DEFAULT_INITIAL_SKELETON,
+  pagingSkeleton = DEFAULT_PAGING_SKELETON,
+  adsRender = false,
+}: UseCardsOptions): UseCardsReturn {
+  // Normalize input data
+  const baseItems = useMemo(() => normalize(data ?? { data: [] }), [data]);
+
+  // Use pagination hook for data management
+  const {
+    data: list,
+    pagination,
+    loadMoreData,
+    isPaginating,
+    hasMore,
+  } = usePaginatedSection<IContentData | IAdItem>(
+    sectionId,
+    fetchMore,
+    baseItems,
+    loading
+  );
+
+  // Apply deduplication to the list (handles both content and ads)
+  const uniqueList = useMemo(
+    () => uniqueById(list as (IContentData | IAdItem)[]),
+    [list]
+  );
+
+  // Memoize skeleton items - only recreate when count changes
+  const initialSkeletonItems = useMemo(
+    () => createSkeletonItems(initialSkeleton, 'sk'),
+    [initialSkeleton]
+  );
+
+  const pagingSkeletonItems = useMemo(
+    () => createSkeletonItems(pagingSkeleton, 'pagination-skeleton'),
+    [pagingSkeleton]
+  );
+
+  // Filter ads if adsRender is false
+  const filteredList = useMemo(() => {
+    if (adsRender) return uniqueList;
+    return uniqueList.filter(
+      (item): item is IContentData => item.type !== 'ads'
+    );
+  }, [uniqueList, adsRender]);
+
+  // Final data array for UI rendering
+  // Handles loading states and pagination skeletons
+  // Returns mixed array of IContentData | IAdItem (or only IContentData if adsRender is false)
+  const items = useMemo(() => {
+    // Show initial skeleton during initial load
+    if (loading) return initialSkeletonItems as (IContentData | IAdItem)[];
+
+    // Show data with pagination skeleton when loading more
+    if (isPaginating && filteredList.length > 0) {
+      return [
+        ...filteredList,
+        ...(pagingSkeletonItems as (IContentData | IAdItem)[]),
+      ];
+    }
+
+    // Return filtered list (with or without ads based on adsRender)
+    return filteredList;
+  }, [
+    loading,
+    isPaginating,
+    filteredList,
+    initialSkeletonItems,
+    pagingSkeletonItems,
+  ]);
+
+  // Determine if section is empty (only when not loading and no data)
+  const isEmpty = useMemo(
+    () => !loading && filteredList.length === 0,
+    [loading, filteredList.length]
+  );
+
+  // Memoize loadMore callback to prevent unnecessary re-renders
+  const handleLoadMore = useCallback(
+    async (page: number | null) => {
+      if (page && hasMore && !isPaginating) {
+        await loadMoreData(page);
+      }
+    },
+    [loadMoreData, hasMore, isPaginating]
+  );
+
+  return {
+    listData: items,
+    pagination,
+    isPaging: isPaginating,
+    hasMore,
+    loadMore: handleLoadMore,
+    isEmpty,
+  };
+}

package/src/hooks/useDebounce.ts

@@ -1,16 +1,35 @@
-import React from 'react';
+import { useCallback, useRef, useEffect } from 'react';
 
 export const useDebounce = (
   callback: (value: string) => void,
   delay: number
 ) => {
-  const timeoutRef = React.useRef<NodeJS.Timeout | null>(null);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const callbackRef = useRef(callback);
 
-  return React.useCallback(
+  // Update callback ref when it changes
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  return useCallback(
     (value: string) => {
-      if (timeoutRef.current) clearTimeout(timeoutRef.current);
-      timeoutRef.current = setTimeout(() => callback(value), delay);
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(() => {
+        callbackRef.current(value);
+      }, delay);
     },
-    [callback, delay]
+    [delay]
   );
 };

package/src/hooks/useKeyboard.ts

@@ -3,7 +3,7 @@
  * @lastModified Sat 14 Jun 2025 at 03:01 PM
  */
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback, useMemo } from 'react';
 import { Keyboard, Platform } from 'react-native';
 
 export const useKeyboard = () => {
@@ -29,8 +29,15 @@ export const useKeyboard = () => {
     };
   }, []);
 
-  return {
-    isKeyboardOpen,
-    hideKeyboard: () => Keyboard.dismiss(),
-  };
+  const hideKeyboard = useCallback(() => {
+    Keyboard.dismiss();
+  }, []);
+
+  return useMemo(
+    () => ({
+      isKeyboardOpen,
+      hideKeyboard,
+    }),
+    [isKeyboardOpen, hideKeyboard]
+  );
 };

package/src/hooks/useNavigationMode.ts

@@ -3,7 +3,7 @@
  * @lastModified Thu 06 Nov 2025 at 11:52 AM
  */
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import NavigationMode from 'react-native-navigation-mode';
 
 /**
@@ -16,20 +16,31 @@ export const useNavigationMode = () => {
   const [isThreeButtonNav, setIsThreeButtonNav] = useState(false);
 
   useEffect(() => {
+    let mounted = true;
+
     (async () => {
       try {
         const navMode = (await NavigationMode.getNavigationMode()) as any;
         const isThreeButton =
           navMode?.navigationMode === 'THREE_BUTTON' ||
           navMode?.mode === 'THREE_BUTTON';
-        setIsThreeButtonNav(isThreeButton);
+        if (mounted) {
+          setIsThreeButtonNav(isThreeButton);
+        }
       } catch (err) {
         console.log('Navigation mode detect error:', err);
       }
     })();
+
+    return () => {
+      mounted = false;
+    };
   }, []);
 
-  return {
-    isGestureNav: !isThreeButtonNav,
-  };
+  return useMemo(
+    () => ({
+      isGestureNav: !isThreeButtonNav,
+    }),
+    [isThreeButtonNav]
+  );
 };

package/src/hooks/usePaginatedSection.ts

@@ -3,7 +3,21 @@
  * @lastModified Wed 25 Jun 2025 at 12:00 PM
  */
 import React, { useCallback, useState } from 'react';
-import type { MoreFetchData } from '../types';
+import type { ISectionMeta } from '../types';
+
+export type MoreFetchData<T> = ({
+  sectionId,
+  meta,
+}: {
+  sectionId: string;
+  meta: {
+    hasNextPage: boolean;
+    nextPage: number;
+  };
+}) => Promise<{
+  data: T[];
+  meta: ISectionMeta;
+} | null>;
 
 export function usePaginatedSection<T>(
   sectionId: string,
@@ -19,20 +33,20 @@ export function usePaginatedSection<T>(
     hasNextPage: true,
     nextPage: 2,
   });
-  const [loading, setLoading] = useState(false);
+  const [isPaginating, setIsPaginating] = useState(false);
 
   // Sync initial data on mount or loading complete
   React.useEffect(() => {
     if (!isLoading && initialData.length) {
       setData(initialData);
     }
-  }, [isLoading, initialData]);
+  }, [isLoading, initialData.length, initialData]);
 
   const loadMoreData = useCallback(
     async (page: number | null) => {
-      if (!page || loading || !pagination.hasNextPage || !fetchFn) return;
+      if (!page || isPaginating || !pagination.hasNextPage || !fetchFn) return;
 
-      setLoading(true);
+      setIsPaginating(true);
       try {
         const res = await fetchFn({
           sectionId,
@@ -44,6 +58,11 @@ export function usePaginatedSection<T>(
 
         if (!res || !res.data || !res.meta?.pagination) {
           console.warn(`⚠️ Invalid response for section: ${sectionId}`, res);
+          // Stop further pagination attempts for this section
+          setPagination({
+            hasNextPage: false,
+            nextPage: null,
+          });
           return;
         }
 
@@ -66,16 +85,16 @@ export function usePaginatedSection<T>(
       } catch (err) {
         console.error(`❌ Error loading section [${sectionId}]:`, err);
       } finally {
-        setLoading(false);
+        setIsPaginating(false);
       }
     },
-    [loading, pagination.hasNextPage, fetchFn, sectionId]
+    [isPaginating, pagination.hasNextPage, fetchFn, sectionId]
   );
 
   return {
     data,
     pagination,
-    loading,
+    isPaginating,
     hasMore: pagination.hasNextPage,
     loadMoreData,
   };

package/src/hooks/usePrevious.ts

@@ -0,0 +1,28 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Optimized for performance
+ */
+
+import { useRef } from 'react';
+
+/**
+ * Hook to get the previous value of a prop or state
+ * Optimized to avoid useEffect overhead
+ * @param value - The value to track
+ * @returns The previous value
+ */
+export function usePrevious<T>(value: T): T | undefined {
+  const ref = useRef<{ value: T; previous: T | undefined }>({
+    value,
+    previous: undefined,
+  });
+
+  // Update ref synchronously during render
+  const current = ref.current;
+  if (current.value !== value) {
+    current.previous = current.value;
+    current.value = value;
+  }
+
+  return current.previous;
+}

package/src/hooks/useSafeCallback.ts

@@ -0,0 +1,43 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Optimized for performance
+ */
+
+import { useCallback } from 'react';
+import type { GestureResponderEvent } from 'react-native';
+
+/**
+ * Creates a safe callback that checks if the function exists before calling
+ * Prevents unnecessary re-renders by memoizing the callback
+ */
+export function useSafeCallback<T extends (...args: any[]) => any>(
+  callback: T | undefined,
+  deps: React.DependencyList = []
+): T {
+  return useCallback(
+    (...args: Parameters<T>) => {
+      callback?.(...args);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [callback, ...deps]
+  ) as T;
+}
+
+/**
+ * Creates a safe press handler that checks disabled state
+ */
+export function useSafePressHandler(
+  onPress: ((event: GestureResponderEvent) => void) | undefined,
+  disabled: boolean = false,
+  deps: React.DependencyList = []
+) {
+  return useCallback(
+    (event: GestureResponderEvent) => {
+      if (!disabled && onPress) {
+        onPress(event);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [disabled, onPress, ...deps]
+  );
+}

package/src/hooks/useSkeletonItems.ts

@@ -0,0 +1,30 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Optimized for performance
+ */
+
+import { useMemo, useRef } from 'react';
+
+/**
+ * Hook to create skeleton items array
+ * Memoized to prevent unnecessary recreations
+ * Generator function is stored in ref to avoid dependency issues
+ */
+export function useSkeletonItems<T = any>(
+  count: number,
+  generator?: (index: number) => T
+): T[] {
+  const generatorRef = useRef(generator);
+  generatorRef.current = generator;
+
+  return useMemo(() => {
+    if (count <= 0) return [];
+    if (generatorRef.current) {
+      return Array.from({ length: count }, (_, i) => generatorRef.current!(i));
+    }
+    return Array.from({ length: count }, (_, i) => ({
+      _id: `skeleton-${i}`,
+      isSkeleton: true,
+    })) as T[];
+  }, [count]);
+}

package/src/hooks/useSplashCache.ts

@@ -150,7 +150,8 @@ export const useSplashCache = ({
     return () => {
       mounted = false;
     };
-  }, [logoUrl, backgroundUrl, forceDownload, setLogo, setBackground]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [logoUrl, backgroundUrl, forceDownload]);
 
   const logoPath = useSplashStore((s) => s.logo.localPath);
   const bgPath = useSplashStore((s) => s.backdrop.localPath);

package/src/hooks/useThemeColors.ts

@@ -0,0 +1,51 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Optimized for performance
+ */
+
+import { useMemo } from 'react';
+import type { ITheme } from '../theme/themes';
+
+/**
+ * Hook to extract and memoize theme colors
+ * Reduces repeated color extraction patterns
+ */
+export function useThemeColors(theme: ITheme) {
+  const colors = theme.colors;
+  return useMemo(
+    () => ({
+      textPrimary: colors.textPrimary,
+      textSecondary: colors.textSecondary,
+      background: colors.background,
+      surface: colors.surface,
+      surfaceVariant: colors.surfaceVariant,
+      primary: colors.primary,
+      error: colors.error,
+      errorContainer: colors.errorContainer,
+      skeletonBaseColor: colors.skeletonBaseColor,
+      skeletonHighlightColor: colors.skeletonHighlightColor,
+      border: colors.border,
+      onBackground: colors.onBackground,
+      onPrimary: colors.onPrimary,
+      onSurface: colors.onSurface,
+      outline: colors.outline,
+    }),
+    [
+      colors.textPrimary,
+      colors.textSecondary,
+      colors.background,
+      colors.surface,
+      colors.surfaceVariant,
+      colors.primary,
+      colors.error,
+      colors.errorContainer,
+      colors.skeletonBaseColor,
+      colors.skeletonHighlightColor,
+      colors.border,
+      colors.onBackground,
+      colors.onPrimary,
+      colors.onSurface,
+      colors.outline,
+    ]
+  );
+}

package/src/theme/ThemeProvider.tsx

@@ -3,7 +3,12 @@
  * @lastModified Wed 22 Oct 2025 at 11:29 AM
  */
 
-import React, { createContext, useContext, type ReactNode } from 'react';
+import React, {
+  createContext,
+  useContext,
+  useMemo,
+  type ReactNode,
+} from 'react';
 import { StyleSheet, View } from 'react-native';
 import {
   SafeAreaProvider,
@@ -58,18 +63,29 @@ export const ZezoUIProvider: React.FC<ZezoUIProviderProps> = ({
     themeFull,
   } = useInternalTheme(overrideTheme, isDark);
 
+  // Memoize context value to prevent unnecessary re-renders
+  const contextValue = useMemo(
+    () => ({
+      theme: themeFull,
+      isDarkMode,
+      setTheme,
+      finalTheme,
+    }),
+    [themeFull, isDarkMode, setTheme, finalTheme]
+  );
+
+  // Memoize container style
+  const containerStyle = useMemo(
+    () => ({ flex: 1, backgroundColor: finalTheme.colors.background }),
+    [finalTheme.colors.background]
+  );
+
   return (
     <GestureHandlerRootView style={styles.container}>
       <SafeAreaProvider initialMetrics={initialWindowMetrics}>
-        <ThemeContext.Provider
-          value={{ theme: themeFull, isDarkMode, setTheme, finalTheme }}
-        >
+        <ThemeContext.Provider value={contextValue}>
           <AppStatusBar theme={overrideTheme} />
-          <View
-            style={{ flex: 1, backgroundColor: finalTheme.colors.background }}
-          >
-            {children}
-          </View>
+          <View style={containerStyle}>{children}</View>
         </ThemeContext.Provider>
       </SafeAreaProvider>
     </GestureHandlerRootView>