Purchase Content

import PurchaseContent from "@/components/zezo/users/purchase-content/PurchaseContent";
import type { IPageData, IPurchaseItem } from "@/components/zezo/users/purchase-content/PurchaseContentInner";

// Fetch function
const fetchPurchaseList = async ({ 
  pageParam = 1 
}: { 
  pageParam?: number 
}): Promise<IPageData> => {
  const response = await fetch(`/api/purchases?page=${pageParam}`);
  return response.json();
};

// Component usage
<PurchaseContent
  fetchPurchaseList={fetchPurchaseList}
  onItemClick={(item: IPurchaseItem) => {
    console.log("Clicked:", item.name);
    // Navigate to content page
  }}
/>

export interface IPurchaseItem {
  _id: string;           // Required: Unique item identifier
  name: string;          // Required: Item name/title
  slug: string;         // Required: URL-friendly identifier
  poster: string;       // Required: Poster image URL (displayed if available)
  thumbnail: string;    // Required: Thumbnail image URL (fallback if poster missing)
}

export interface IPageData {
  data: IPurchaseItem[];  // Required: Array of purchase items for this page
  meta: {                 // Required: Pagination metadata
    pagination: {
      page: number;        // Current page number
      limit: number;       // Items per page
      pages: number;       // Total number of pages
      total: number;       // Total number of items
      hasNextPage: boolean; // Whether more pages are available
      nextPage: number | null; // Next page number or null
    };
  };
}

npm install @tanstack/react-query react-infinite-scroll-component