@zezosoft/zezo-ott-react-native-ui-kit 1.3.5 → 1.3.6

package/src/hooks/useCards.ts

@@ -0,0 +1,247 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+/**
+ * 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 (let i = 0; i < list.length; i++) {
+    const item = list[i];
+    if (!item) continue;
+
+    // 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-${i}`;
+      }
+
+      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
+  );
+
+  // If no fetchMore function is provided, explicitly disable further pagination
+  const safePagination = useMemo(
+    () =>
+      fetchMore
+        ? pagination
+        : pagination
+          ? { ...pagination, hasNextPage: false, nextPage: null }
+          : pagination,
+    [pagination, fetchMore]
+  );
+
+  const safeHasMore = fetchMore ? hasMore : false;
+
+  // 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 && safeHasMore && !isPaginating) {
+        await loadMoreData(page);
+      }
+    },
+    [loadMoreData, safeHasMore, isPaginating]
+  );
+
+  return {
+    listData: items,
+    pagination: safePagination,
+    isPaging: isPaginating,
+    hasMore: safeHasMore,
+    loadMore: handleLoadMore,
+    isEmpty,
+  };
+}

package/src/hooks/useDebounce.ts

@@ -0,0 +1,40 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import { useCallback, useRef, useEffect } from 'react';
+
+export const useDebounce = (
+  callback: (value: string) => void,
+  delay: number
+) => {
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const callbackRef = useRef(callback);
+
+  // 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(() => {
+        callbackRef.current(value);
+      }, delay);
+    },
+    [delay]
+  );
+};

package/src/hooks/useKeyboard.ts

@@ -0,0 +1,43 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import { useEffect, useState, useCallback, useMemo } from 'react';
+import { Keyboard, Platform } from 'react-native';
+
+export const useKeyboard = () => {
+  const [isKeyboardOpen, setKeyboardOpen] = useState(false);
+
+  useEffect(() => {
+    const showEvent =
+      Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent =
+      Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+
+    const showListener = Keyboard.addListener(showEvent, () => {
+      setKeyboardOpen(true);
+    });
+
+    const hideListener = Keyboard.addListener(hideEvent, () => {
+      setKeyboardOpen(false);
+    });
+
+    return () => {
+      showListener.remove();
+      hideListener.remove();
+    };
+  }, []);
+
+  const hideKeyboard = useCallback(() => {
+    Keyboard.dismiss();
+  }, []);
+
+  return useMemo(
+    () => ({
+      isKeyboardOpen,
+      hideKeyboard,
+    }),
+    [isKeyboardOpen, hideKeyboard]
+  );
+};

package/src/hooks/useNavigationMode.ts

@@ -0,0 +1,48 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import { useEffect, useState, useMemo } from 'react';
+import NavigationMode from 'react-native-navigation-mode';
+
+/**
+ * Hook to detect Android navigation mode
+ * @returns {Object} Navigation mode info
+ * @returns {boolean} isGestureNav - true if using gesture navigation
+ */
+export const useNavigationMode = () => {
+  const [isThreeButtonNav, setIsThreeButtonNav] = useState(false);
+
+  useEffect(() => {
+    let mounted = true;
+
+    (async () => {
+      try {
+        const navMode = (await NavigationMode.getNavigationMode()) as {
+          navigationMode?: string;
+          mode?: string;
+        } | null;
+        const isThreeButton =
+          navMode?.navigationMode === 'THREE_BUTTON' ||
+          navMode?.mode === 'THREE_BUTTON';
+        if (mounted) {
+          setIsThreeButtonNav(isThreeButton);
+        }
+      } catch {
+        // Navigation mode detection error ignored
+      }
+    })();
+
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  return useMemo(
+    () => ({
+      isGestureNav: !isThreeButtonNav,
+    }),
+    [isThreeButtonNav]
+  );
+};

package/src/hooks/usePaginatedSection.ts

@@ -0,0 +1,108 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { useCallback, useState } from 'react';
+import type { MoreFetchData } from '../types';
+
+export function usePaginatedSection<T>(
+  sectionId: string,
+  fetchFn?: MoreFetchData<T>,
+  initialData: T[] = [],
+  isLoading?: boolean
+) {
+  const [data, setData] = useState<T[]>(initialData);
+  const [pagination, setPagination] = useState<{
+    hasNextPage: boolean;
+    nextPage: number | null;
+  }>({
+    hasNextPage: true,
+    nextPage: 2,
+  });
+  const [isPaginating, setIsPaginating] = useState(false);
+
+  // Sync initial data on mount or loading complete
+  React.useEffect(() => {
+    if (isLoading) return;
+
+    // Check if initialData prefix differs from current data
+    const hasLengthChangedToEmpty = initialData.length === 0 && data.length > 0;
+    const hasPrefixChanged =
+      initialData.length > 0 &&
+      (data.length < initialData.length ||
+        initialData.some((item, idx) => item !== data[idx]));
+
+    if (hasLengthChangedToEmpty || hasPrefixChanged) {
+      setData(initialData);
+      setPagination({
+        hasNextPage: true,
+        nextPage: 2,
+      });
+    }
+  }, [isLoading, initialData, data]);
+
+  const loadMoreData = useCallback(
+    async (page: number | null) => {
+      if (!page || isPaginating || !pagination.hasNextPage || !fetchFn) return;
+
+      setIsPaginating(true);
+      try {
+        const res = await fetchFn({
+          sectionId,
+          meta: {
+            hasNextPage: pagination.hasNextPage,
+            nextPage: page,
+          },
+        });
+
+        if (!res) {
+          setPagination({
+            hasNextPage: false,
+            nextPage: null,
+          });
+          return;
+        }
+
+        if (!res.data || !res.meta?.pagination) {
+          console.warn(`⚠️ Invalid response for section: ${sectionId}`, res);
+          setPagination({
+            hasNextPage: false,
+            nextPage: null,
+          });
+          return;
+        }
+
+        const { hasNextPage, nextPage } = res.meta.pagination;
+
+        setData((prev) => {
+          const existingIds = new Set(
+            (prev as { _id?: string | number }[]).map((item) => item._id)
+          );
+          const newItems = res.data.filter(
+            (item) => !existingIds.has((item as { _id?: string | number })._id)
+          );
+          return [...prev, ...newItems];
+        });
+
+        setPagination({
+          hasNextPage,
+          nextPage,
+        });
+      } catch (err) {
+        console.error(`❌ Error loading section [${sectionId}]:`, err);
+      } finally {
+        setIsPaginating(false);
+      }
+    },
+    [isPaginating, pagination.hasNextPage, fetchFn, sectionId]
+  );
+
+  return {
+    data,
+    pagination,
+    isPaginating,
+    hasMore: pagination.hasNextPage,
+    loadMoreData,
+  };
+}

package/src/hooks/usePrevious.ts

@@ -0,0 +1,28 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+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,29 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import { useCallback, useRef } from 'react';
+
+/**
+ * Creates a safe press handler that checks disabled state.
+ * Supports both:
+ * - React Native onPress(event)
+ * - React Hook Form handleSubmit()
+ */
+export function useSafePressHandler(
+  onPress?: (() => Promise<void> | void) | undefined,
+  disabled = false
+) {
+  const onPressRef = useRef(onPress);
+  onPressRef.current = onPress;
+
+  const disabledRef = useRef(disabled);
+  disabledRef.current = disabled;
+
+  return useCallback(async () => {
+    if (disabledRef.current || !onPressRef.current) return;
+
+    await onPressRef.current();
+  }, []);
+}

package/src/hooks/useSkeletonItems.ts

@@ -0,0 +1,30 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+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 = unknown>(
+  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]);
+}