`cc2f7b1`

add pagination for pages that exceed limits

Authored by mfwolffe <wolffemf@dukes.jmu.edu> 7 months ago

SHA: cc2f7b128fb053cc9f8182d0e853eac1cc1d9865
Parents: 67edab5
Tree: 438cac0

3 changed files

Status	File	+	-
M	`app/memorial/conflict/[id]/page.tsx`	76	33
A	`components/Pagination.tsx`	157	0
M	`lib/api.ts`	1	1

app/memorial/conflict/[id]/page.tsxmodified

  import { getConflicts, getPeopleByConflict, Conflict, PersonDetail } from '@/lib/api';
  import Header from '@/components/Header';
  import DocumentIcon from '@/components/DocumentIcon';
++import Pagination from '@/components/Pagination';
  export default function ConflictPage() {
    const params = useParams();
    const conflictId = parseInt(params.id as string);
--
++
    const [conflict, setConflict] = useState<Conflict | null>(null);
    const [people, setPeople] = useState<PersonDetail[]>([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);
++  const [currentPage, setCurrentPage] = useState(1);
++  const [itemsPerPage, setItemsPerPage] = useState(30);
--  useEffect(() => {
++useEffect(() => {
      async function fetchData() {
        try {
          const conflicts = await getConflicts();
          const currentConflict = conflicts.find(c => c.id === conflictId);
--
++
          if (!currentConflict) {
            throw new Error('Conflict not found');
+         }
--
++
          setConflict(currentConflict);
          const peopleData = await getPeopleByConflict(conflictId);
          setPeople(peopleData);
          setLoading(false);
+       }
+     }
--
++
      fetchData();
    }, [conflictId]);
++  // Calculate paginated data
++  const totalItems = people.length;
++  const totalPages = Math.ceil(totalItems / itemsPerPage);
++  const startIndex = (currentPage - 1) * itemsPerPage;
++  const endIndex = startIndex + itemsPerPage;
++  const paginatedPeople = people.slice(startIndex, endIndex);
++
++  // Handlers for pagination
++  const handlePageChange = (page: number) => {
++    setCurrentPage(page);
++    // Scroll to top of results
++    window.scrollTo({ top: 0, behavior: 'smooth' });
++  };
++
++  const handleItemsPerPageChange = (newItemsPerPage: number) => {
++    setItemsPerPage(newItemsPerPage);
++    setCurrentPage(1); // Reset to first page when changing items per page
++  };
++
    if (loading) {
      return (
        <div className="min-h-screen bg-vmi-cream flex items-center justify-center">
            <h2 className="text-3xl font-bold mb-8 text-center text-vmi-red">
              Honor Roll
            </h2>
--
++
            {people.length === 0 ? (
              <p className="text-center text-gray-600 text-lg">No casualties recorded yet.</p>
            ) : (
--            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
++            <>
--              {people.map((person) => (
++              {/* Pagination Controls - Top */}
--                <Link
++              <Pagination
--                  key={person.id}
++                currentPage={currentPage}
--                  href={`/memorial/person/${person.id}`}
++                totalItems={totalItems}
--                  className="block p-6 border-2 border-gray-200 rounded-lg hover:border-vmi-gold hover:bg-vmi-light-gold transition-all duration-200 group"
++                itemsPerPage={itemsPerPage}
--                >
++                onPageChange={handlePageChange}
--                  <h3 className="text-xl font-bold text-gray-800 group-hover:text-vmi-red transition-colors mb-2 flex items-center gap-2">
++                onItemsPerPageChange={handleItemsPerPageChange}
--                    {person.full_display_name ?
++              />
--                      person.full_display_name.replace(person.rank + ' ', '').replace(person.rank + ', ', '')
++
--                      : person.display_name.replace(person.rank + ' ', '').replace(person.rank + ', ', '')}
++              {/* People Grid */}
--                    {person.pdf_key && <DocumentIcon className="flex-shrink-0" />}
++              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
--                  </h3>
++                {paginatedPeople.map((person) => (
--                  {person.rank && (
++                  <Link
--                    <p className="text-gray-700 font-semibold">{person.rank}</p>
++                    key={person.id}
--                  )}
++                    href={`/memorial/person/${person.id}`}
--                  {person.unit && (
++                    className="block p-6 border-2 border-gray-200 rounded-lg hover:border-vmi-gold hover:bg-vmi-light-gold transition-all duration-200 group"
--                    <p className="text-gray-600 text-sm italic">{person.unit}</p>
++                  >
--                  )}
++                    <h3 className="text-xl font-bold text-gray-800 group-hover:text-vmi-red transition-colors mb-2 flex items-center gap-2">
--                  {person.death_description && (
++                      {person.full_display_name ?
--                    <p className="text-gray-600 text-sm italic mt-3 line-clamp-3">
++                        person.full_display_name.replace(person.rank + ' ', '').replace(person.rank + ', ', '')
--                      {person.death_description}
++                        : person.display_name.replace(person.rank + ' ', '').replace(person.rank + ', ', '')}
--                    </p>
++                      {person.pdf_key && <DocumentIcon className="flex-shrink-0" />}
--                  )}
++                    </h3>
--                </Link>
++                    {person.rank && (
--              ))}
++                      <p className="text-gray-700 font-semibold">{person.rank}</p>
--            </div>
++                    )}
++                    {person.unit && (
++                      <p className="text-gray-600 text-sm italic">{person.unit}</p>
++                    )}
++                    {person.death_description && (
++                      <p className="text-gray-600 text-sm italic mt-3 line-clamp-3">
++                        {person.death_description}
++                      </p>
++                    )}
++                  </Link>
++                ))}
++              </div>
++
++              {/* Pagination Controls - Bottom */}
++              <Pagination
++                currentPage={currentPage}
++                totalItems={totalItems}
++                itemsPerPage={itemsPerPage}
++                onPageChange={handlePageChange}
++                onItemsPerPageChange={handleItemsPerPageChange}
++              />
++            </>
            )}
          </div>
        </main>

components/Pagination.tsxadded

++import React from 'react';
++
++interface PaginationProps {
++  currentPage: number;
++  totalItems: number;
++  itemsPerPage: number;
++  onPageChange: (page: number) => void;
++  onItemsPerPageChange: (itemsPerPage: number) => void;
++  itemsPerPageOptions?: number[];
++}
++
++export default function Pagination({
++  currentPage,
++  totalItems,
++  itemsPerPage,
++  onPageChange,
++  onItemsPerPageChange,
++  itemsPerPageOptions = [30, 40, 50],
++}: PaginationProps) {
++  const totalPages = Math.ceil(totalItems / itemsPerPage);
++
++  // Don't show pagination if there's only one page or less
++  if (totalPages <= 1) {
++    return null;
++  }
++
++  const startItem = (currentPage - 1) * itemsPerPage + 1;
++  const endItem = Math.min(currentPage * itemsPerPage, totalItems);
++
++  // Generate page numbers to display
++  const getPageNumbers = () => {
++    const pages: (number | string)[] = [];
++    const maxVisiblePages = 7;
++
++    if (totalPages <= maxVisiblePages) {
++      // Show all pages if total is small
++      for (let i = 1; i <= totalPages; i++) {
++        pages.push(i);
++      }
++    } else {
++      // Always show first page
++      pages.push(1);
++
++      if (currentPage <= 4) {
++        // Near the beginning
++        for (let i = 2; i <= 5; i++) {
++          pages.push(i);
++        }
++        pages.push('...');
++        pages.push(totalPages);
++      } else if (currentPage >= totalPages - 3) {
++        // Near the end
++        pages.push('...');
++        for (let i = totalPages - 4; i <= totalPages; i++) {
++          pages.push(i);
++        }
++      } else {
++        // In the middle
++        pages.push('...');
++        for (let i = currentPage - 1; i <= currentPage + 1; i++) {
++          pages.push(i);
++        }
++        pages.push('...');
++        pages.push(totalPages);
++      }
++    }
++
++    return pages;
++  };
++
++  const pageNumbers = getPageNumbers();
++
++  return (
++    <div className="flex flex-col sm:flex-row items-center justify-between gap-4 py-6">
++      {/* Items per page selector */}
++      <div className="flex items-center gap-3">
++        <label htmlFor="items-per-page" className="text-gray-700 font-semibold">
++          Per page:
++        </label>
++        <select
++          id="items-per-page"
++          value={itemsPerPage}
++          onChange={(e) => onItemsPerPageChange(Number(e.target.value))}
++          className="px-3 py-2 border-2 border-gray-300 rounded bg-white text-gray-800 font-semibold hover:border-vmi-gold focus:border-vmi-gold focus:outline-none focus:ring-2 focus:ring-vmi-light-gold transition-colors"
++        >
++          {itemsPerPageOptions.map((option) => (
++            <option key={option} value={option}>
++              {option}
++            </option>
++          ))}
++          <option value={totalItems}>All ({totalItems})</option>
++        </select>
++        <span className="text-gray-600 text-sm">
++          Showing {startItem}-{endItem} of {totalItems}
++        </span>
++      </div>
++
++      {/* Page navigation */}
++      <div className="flex items-center gap-2">
++        {/* Previous button */}
++        <button
++          onClick={() => onPageChange(currentPage - 1)}
++          disabled={currentPage === 1}
++          className="px-4 py-2 border-2 border-gray-300 rounded font-semibold text-gray-700 hover:border-vmi-gold hover:bg-vmi-light-gold disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:border-gray-300 disabled:hover:bg-transparent transition-all"
++          aria-label="Previous page"
++        >
++          ← Prev
++        </button>
++
++        {/* Page numbers */}
++        <div className="flex gap-1">
++          {pageNumbers.map((page, index) => {
++            if (page === '...') {
++              return (
++                <span
++                  key={`ellipsis-${index}`}
++                  className="px-3 py-2 text-gray-500"
++                >
++                  ...
++                </span>
++              );
++            }
++
++            const pageNum = page as number;
++            const isCurrentPage = pageNum === currentPage;
++
++            return (
++              <button
++                key={pageNum}
++                onClick={() => onPageChange(pageNum)}
++                className={`px-4 py-2 border-2 rounded font-semibold transition-all ${
++                  isCurrentPage
++                    ? 'bg-vmi-red text-white border-vmi-red'
++                    : 'border-gray-300 text-gray-700 hover:border-vmi-gold hover:bg-vmi-light-gold'
++                }`}
++                aria-label={`Page ${pageNum}`}
++                aria-current={isCurrentPage ? 'page' : undefined}
++              >
++                {pageNum}
++              </button>
++            );
++          })}
++        </div>
++
++        {/* Next button */}
++        <button
++          onClick={() => onPageChange(currentPage + 1)}
++          disabled={currentPage === totalPages}
++          className="px-4 py-2 border-2 border-gray-300 rounded font-semibold text-gray-700 hover:border-vmi-gold hover:bg-vmi-light-gold disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:border-gray-300 disabled:hover:bg-transparent transition-all"
++          aria-label="Next page"
++        >
++          Next →
++        </button>
++      </div>
++    </div>
++  );
++}

lib/api.tsmodified


 
 // Fetch people by conflict
 export async function getPeopleByConflict(conflictId: number): Promise<PersonDetail[]> {
+  const response = await fetch(`${API_BASE_URL}/memorial/persons/?conflict=${conflictId}&paginate=false`);
   if (!response.ok) {
     throw new Error('Failed to fetch people');
   }

`@@ -140,7 +140,7 @@` export async function getConflicts(): Promise<Conflict[]> {
140		140
141	// Fetch people by conflict	141	// Fetch people by conflict
142	export async function getPeopleByConflict(conflictId: number): Promise<PersonDetail[]> {	142	export async function getPeopleByConflict(conflictId: number): Promise<PersonDetail[]> {
143	- const response = await fetch(`${API_BASE_URL}/memorial/persons/?conflict=${conflictId}`);	143	+ const response = await fetch(`${API_BASE_URL}/memorial/persons/?conflict=${conflictId}&paginate=false`);
144	if (!response.ok) {	144	if (!response.ok) {
145	throw new Error('Failed to fetch people');	145	throw new Error('Failed to fetch people');
146	}	146	}