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

package/src/hooks/useCards.ts

@@ -1,247 +0,0 @@
-/**
- * @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

@@ -1,40 +0,0 @@
-/**
- * @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

@@ -1,43 +0,0 @@
-/**
- * @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

@@ -1,48 +0,0 @@
-/**
- * @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

@@ -1,108 +0,0 @@
-/**
- * @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

@@ -1,28 +0,0 @@
-/**
- * @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

@@ -1,29 +0,0 @@
-/**
- * @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

@@ -1,30 +0,0 @@
-/**
- * @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]);
-}