@djangocfg/ui-nextjs 2.1.320 → 2.1.321

package/src/components/ssr-pagination.tsx

@@ -1,214 +0,0 @@
-'use client';
-
-import { usePathname } from 'next/navigation';
-import React from 'react';
-
-import { useIsMobile } from '@djangocfg/ui-core/hooks';
-import { cn } from '@djangocfg/ui-core/lib';
-
-import { useQueryParams } from '@djangocfg/api/auth';
-
-import {
-    Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink,
-    PaginationNext, PaginationPrevious
-} from './pagination';
-
-interface SSRPaginationProps {
-  currentPage: number;
-  totalPages: number;
-  totalItems: number;
-  itemsPerPage: number;
-  hasNextPage: boolean;
-  hasPreviousPage: boolean;
-  className?: string;
-  showInfo?: boolean;
-  maxVisiblePages?: number;
-  baseUrl?: string;
-  pathname?: string;
-  preserveQuery?: boolean;
-}
-
-export const SSRPagination: React.FC<SSRPaginationProps> = ({
-  currentPage,
-  totalPages,
-  totalItems,
-  itemsPerPage,
-  hasNextPage,
-  hasPreviousPage: _hasPreviousPage,
-  className,
-  showInfo = true,
-  maxVisiblePages = 7,
-  baseUrl,
-  pathname: propPathname,
-  preserveQuery = true,
-}) => {
-  const queryParams = useQueryParams();
-  const pathname = usePathname();
-  const isMobile = useIsMobile();
-
-  // Get current page from URL if available, otherwise use prop
-  const getCurrentPageFromUrl = (): number => {
-    const pageParam = queryParams.get('page');
-    if (pageParam) {
-      const pageNum = parseInt(pageParam, 10);
-      return isNaN(pageNum) ? 1 : pageNum;
-    }
-    return 1;
-  };
-
-  const actualCurrentPage = getCurrentPageFromUrl() || currentPage;
-
-  // Calculate actual navigation state based on current page from URL
-  const actualHasPreviousPage = actualCurrentPage > 1;
-  
-  // actualHasNextPage kept for clarity, even though it equals hasNextPage
-  // @ts-ignore reserved for future use
-  const _actualHasNextPage = hasNextPage;
-
-  // Generate URL for a specific page
-  const getPageUrl = (page: number): string => {
-    if (baseUrl) {
-      return `${baseUrl}?page=${page}`;
-    }
-
-    // Use current route with updated page parameter
-    const newSearchParams = preserveQuery 
-      ? new URLSearchParams(queryParams.toString())
-      : new URLSearchParams();
-
-    newSearchParams.set('page', page.toString());
-
-    // Remove page=1 from URL to keep URLs clean
-    if (page === 1) {
-      newSearchParams.delete('page');
-    }
-
-    const queryString = newSearchParams.toString();
-    const basePath = propPathname || pathname || '';
-    return queryString ? `${basePath}?${queryString}` : basePath;
-  };
-
-  // Generate array of page numbers to display
-  const getVisiblePages = (): (number | 'ellipsis')[] => {
-    // On mobile, show fewer pages
-    const mobileMaxVisible = 3;
-    const effectiveMaxVisible = isMobile ? mobileMaxVisible : maxVisiblePages;
-    
-    if (totalPages <= effectiveMaxVisible) {
-      return Array.from({ length: totalPages }, (_, i) => i + 1);
-    }
-
-    const pages: (number | 'ellipsis')[] = [];
-    const halfVisible = Math.floor(effectiveMaxVisible / 2);
-
-    if (isMobile) {
-      // Mobile: Show only current page and adjacent pages
-      if (actualCurrentPage > 1) {
-        pages.push(actualCurrentPage - 1);
-      }
-      pages.push(actualCurrentPage);
-      if (actualCurrentPage < totalPages) {
-        pages.push(actualCurrentPage + 1);
-      }
-    } else {
-      // Desktop: Full pagination logic
-      // Always show first page
-      pages.push(1);
-
-      let start = Math.max(2, actualCurrentPage - halfVisible);
-      let end = Math.min(totalPages - 1, actualCurrentPage + halfVisible);
-
-      // Adjust range if we're near the beginning or end
-      if (actualCurrentPage <= halfVisible + 1) {
-        end = Math.min(totalPages - 1, effectiveMaxVisible - 1);
-      } else if (actualCurrentPage >= totalPages - halfVisible) {
-        start = Math.max(2, totalPages - effectiveMaxVisible + 2);
-      }
-
-      // Add ellipsis after first page if needed
-      if (start > 2) {
-        pages.push('ellipsis');
-      }
-
-      // Add middle pages
-      for (let i = start; i <= end; i++) {
-        pages.push(i);
-      }
-
-      // Add ellipsis before last page if needed
-      if (end < totalPages - 1) {
-        pages.push('ellipsis');
-      }
-
-      // Always show last page (if more than 1 page)
-      if (totalPages > 1) {
-        pages.push(totalPages);
-      }
-    }
-
-    return pages;
-  };
-
-  const visiblePages = getVisiblePages();
-  const startItem = (actualCurrentPage - 1) * itemsPerPage + 1;
-  const endItem = Math.min(actualCurrentPage * itemsPerPage, totalItems);
-
-  // Don't render if no items
-  if (totalItems === 0) {
-    return null;
-  }
-
-  return (
-    <div className={cn("space-y-4", className)}>
-      {/* Pagination Info */}
-      {showInfo && (
-        <div className="text-sm text-muted-foreground text-center">
-          {isMobile ? (
-            `Page ${actualCurrentPage} of ${totalPages}`
-          ) : (
-            `Showing ${startItem.toLocaleString()} to ${endItem.toLocaleString()} of ${totalItems.toLocaleString()} results`
-          )}
-        </div>
-      )}
-
-      {/* Pagination Controls */}
-      <Pagination>
-        <PaginationContent>
-          {/* Previous Button */}
-          <PaginationItem>
-            <PaginationPrevious
-              href={actualHasPreviousPage ? getPageUrl(actualCurrentPage - 1) : undefined}
-              className={!actualHasPreviousPage ? "pointer-events-none opacity-50" : undefined}
-            />
-          </PaginationItem>
-
-          {/* Page Numbers */}
-          {visiblePages.map((page, index) => (
-            <PaginationItem key={index}>
-              {page === 'ellipsis' ? (
-                <PaginationEllipsis />
-              ) : (
-                <PaginationLink
-                  href={getPageUrl(page)}
-                  isActive={page === actualCurrentPage}
-                >
-                  {page}
-                </PaginationLink>
-              )}
-            </PaginationItem>
-          ))}
-
-          {/* Next Button */}
-          <PaginationItem>
-            <PaginationNext
-              href={hasNextPage ? getPageUrl(actualCurrentPage + 1) : undefined}
-              className={!hasNextPage ? "pointer-events-none opacity-50" : undefined}
-            />
-          </PaginationItem>
-        </PaginationContent>
-      </Pagination>
-    </div>
-  );
-};
-
-SSRPagination.displayName = 'SSRPagination';