add pagination to search results

Author: jordan-smith721

client/app/movies/movies.module.css

@@ -148,6 +148,17 @@
   text-align: center;
 }
 
+.searchInfo {
+  margin: 2rem 0;
+  padding: 1rem;
+  background: #f8f9fa;
+  border: 1px solid #e9ecef;
+  border-radius: 8px;
+  text-align: center;
+  font-size: 0.9rem;
+  color: #666;
+}
+
 .selectAllButton {
   padding: 0.5rem 1rem;
   background: #6c757d;

client/app/movies/page.tsx

@@ -11,6 +11,17 @@ import { Movie } from "../types/movie";
 import { APP_CONFIG, ROUTES } from "../lib/constants";
 import type { SearchParams } from "../components/SearchMovieModal";
 
+/**
+ * Movies Page Component
+ * 
+ * Main page for browsing movies with the following features:
+ * - Regular movie browsing with URL-based pagination
+ * - MongoDB text search with server-side pagination
+ * - Vector search with client-side pagination
+ * - CRUD operations (create, update, delete movies)
+ * - Batch operations on selected movies
+ * 
+ */
 export default function Movies() {
   const searchParams = useSearchParams();
   const router = useRouter();
@@ -31,6 +42,9 @@ export default function Movies() {
   const [error, setError] = useState<string | null>(null);
   const [successMessage, setSuccessMessage] = useState<string | null>(null);
   const [searchResults, setSearchResults] = useState<Movie[]>([]);
+  const [allVectorSearchResults, setAllVectorSearchResults] = useState<Movie[]>([]);
+  const [vectorSearchPage, setVectorSearchPage] = useState(1);
+  const [vectorSearchPageSize, setVectorSearchPageSize] = useState(20);
   const [searchHasNextPage, setSearchHasNextPage] = useState(false);
   const [searchHasPrevPage, setSearchHasPrevPage] = useState(false);
   const [searchTotalCount, setSearchTotalCount] = useState(0);
@@ -225,22 +239,33 @@ export default function Movies() {
       let result;
 
       if (searchParams.searchType === 'vector-search') {
-        // Handle Vector Search
+        // Vector Search: Fetch all results and implement client-side pagination
         const vectorSearchParams = {
           q: searchParams.q!,
-          limit: searchParams.limit || 10,
+          limit: searchParams.limit || 50, // Get more results for better pagination experience
         };
         result = await vectorSearchMovies(vectorSearchParams);
 
         if (result.success) {
-          setSearchResults(result.movies || []);
-          setSearchHasNextPage(false); // Vector search doesn't support pagination
+          const allResults = result.movies || [];
+          const pageSize = searchParams.limit || 20;
+          setAllVectorSearchResults(allResults);
+          setVectorSearchPage(1);
+          setVectorSearchPageSize(pageSize);
+          
+          // Calculate first page of results for immediate display
+          const firstPageResults = allResults.slice(0, pageSize);
+          setSearchResults(firstPageResults);
+          
+          // Set pagination state based on total results
+          const totalPages = Math.ceil(allResults.length / pageSize);
+          setSearchHasNextPage(totalPages > 1);
           setSearchHasPrevPage(false);
-          setSearchTotalCount(result.movies?.length || 0);
+          setSearchTotalCount(allResults.length);
         }
       } else {
-        // Handle MongoDB Search
-        const searchSkip = 0; // For new searches, start from page 1
+        // MongoDB Search
+        const searchSkip = 0; // Always start from page 1 for new searches
         const searchLimitToUse = searchParams.limit || 20;
 
         const searchParamsWithPagination = {
@@ -267,15 +292,23 @@ export default function Movies() {
         setShowSearchModal(false);
         setSelectedMovies(new Set()); // Clear selection when switching to search mode
 
-        const totalCount = searchParams.searchType === 'vector-search' 
-          ? result.movies?.length || 0 
-          : (result as any).totalCount || 0;
+        if (searchParams.searchType === 'vector-search') {
+          const returnedCount = result.movies?.length || 0;
 
-        if (totalCount === 0) {
-          setSuccessMessage('Search completed, but no movies matched your criteria. Try different search terms.');
+          if (returnedCount === 0) {
+            setSuccessMessage('Vector search completed, but no movies matched your query. Try different search terms.');
+          } else {
+            setSuccessMessage(`Found ${returnedCount} results using vector search.`);
+          }
         } else {
-          const searchTypeLabel = searchParams.searchType === 'vector-search' ? 'vector search' : 'text search';
-          setSuccessMessage(`Found ${totalCount} movies using ${searchTypeLabel}.`);
+          // MongoDB text search success message
+          const totalCount = (result as any).totalCount || 0;
+          
+          if (totalCount === 0) {
+            setSuccessMessage('Search completed, but no movies matched your criteria. Try different search terms.');
+          } else {
+            setSuccessMessage(`Found ${totalCount} results using MongoDB search.`);
+          }
         }
       } else {
         setError(result.error || 'Failed to search movies');
@@ -287,9 +320,15 @@ export default function Movies() {
     setIsSearching(false);
   };
 
+  /**
+   * Clears search mode and returns to regular movie browsing
+   * Resets all search-related state including vector search pagination
+   */
   const handleClearSearch = () => {
     setIsSearchMode(false);
     setSearchResults([]);
+    setAllVectorSearchResults([]);
+    setVectorSearchPage(1);
     setSearchHasNextPage(false);
     setSearchHasPrevPage(false);
     setSearchTotalCount(0);
@@ -304,14 +343,68 @@ export default function Movies() {
   // Get the movies to display based on current mode
   const displayMovies = isSearchMode ? searchResults : movies;
 
+  /**
+   * Helper function for vector search client-side pagination
+   * Calculates pagination data for the current vector search results
+   */
+  const getVectorSearchPageData = () => {
+    if (!isSearchMode || currentSearchParams?.searchType !== 'vector-search') {
+      return { paginatedResults: [], hasNext: false, hasPrev: false, totalPages: 0 };
+    }
+
+    const startIndex = (vectorSearchPage - 1) * vectorSearchPageSize;
+    const endIndex = startIndex + vectorSearchPageSize;
+    const paginatedResults = allVectorSearchResults.slice(startIndex, endIndex);
+    const totalPages = Math.ceil(allVectorSearchResults.length / vectorSearchPageSize);
+    
+    return {
+      paginatedResults,
+      hasNext: vectorSearchPage < totalPages,
+      hasPrev: vectorSearchPage > 1,
+      totalPages
+    };
+  };
+
+  /**
+   * Handles page navigation for vector search results (client-side pagination)
+   * Slices the cached results and updates the display
+   */
+  const handleVectorSearchPageChange = (newPage: number) => {
+    if (!isSearchMode || currentSearchParams?.searchType !== 'vector-search') return;
+    
+    const totalPages = Math.ceil(allVectorSearchResults.length / vectorSearchPageSize);
+    if (newPage < 1 || newPage > totalPages) return;
+    
+    setVectorSearchPage(newPage);
+    
+    // Update the displayed results based on the new page
+    const startIndex = (newPage - 1) * vectorSearchPageSize;
+    const endIndex = startIndex + vectorSearchPageSize;
+    const paginatedResults = allVectorSearchResults.slice(startIndex, endIndex);
+    
+    setSearchResults(paginatedResults);
+    setSearchHasNextPage(newPage < totalPages);
+    setSearchHasPrevPage(newPage > 1);
+    
+    // Clear selection and scroll to top for better UX
+    setSelectedMovies(new Set());
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
   const handleSearchPageChange = async (newPage: number) => {
     if (!currentSearchParams) return;
 
-    // Vector search doesn't support pagination
+    // This function handles MongoDB search pagination (server-side)
+    // Vector search uses handleVectorSearchPageChange for client-side pagination
     if (currentSearchParams.searchType === 'vector-search') {
       return;
     }
 
+    // Validate page number and prevent invalid navigation
+    if (newPage < 1) return;
+    if (isSearching) return;
+    if (newPage > searchPage && !searchHasNextPage) return;
+    
     setIsSearching(true);
     setError(null);
 
@@ -331,10 +424,17 @@ export default function Movies() {
         setSearchHasPrevPage(result.hasPrevPage || false);
         setSearchTotalCount(result.totalCount || 0);
         setSearchPage(newPage);
+        
+        // Clear any previously selected movies when changing pages
+        setSelectedMovies(new Set());
+        
+        // Scroll to top to show new results
+        window.scrollTo({ top: 0, behavior: 'smooth' });
       } else {
         setError(result.error || 'Failed to load search results');
       }
     } catch (error) {
+      console.error('Search pagination error:', error);
       setError('Failed to load search results');
     }
 
@@ -502,52 +602,108 @@ export default function Movies() {
                 </div>
 
                 {/* Show pagination based on current mode */}
-                {isSearchMode && currentSearchParams?.searchType === 'mongodb-search' ? (
-                  <nav className={movieStyles.pagination} aria-label="Search results pagination">
-                    <div className={movieStyles.paginationContainer}>
-                      {/* Previous Button */}
-                      {searchHasPrevPage ? (
-                        <button
-                          onClick={() => handleSearchPageChange(searchPage - 1)}
-                          className={movieStyles.pageButton}
-                          disabled={isSearching}
-                          aria-label="Go to previous page"
-                        >
-                          ← Previous
-                        </button>
-                      ) : (
-                        <span className={`${movieStyles.pageButton} ${movieStyles.disabled}`}>
-                          ← Previous
-                        </span>
-                      )}
-
-                      {/* Current Page Info */}
-                      <div className={movieStyles.pageInfo}>
-                        Page {searchPage}
+                {isSearchMode ? (
+                  currentSearchParams?.searchType === 'mongodb-search' ? (
+                    <nav className={movieStyles.pagination} aria-label="Search results pagination">
+                      <div className={movieStyles.paginationContainer}>
+                        {/* Previous Button */}
+                        {searchHasPrevPage && !isSearching ? (
+                          <button
+                            onClick={() => handleSearchPageChange(searchPage - 1)}
+                            className={movieStyles.pageButton}
+                            disabled={isSearching}
+                            aria-label="Go to previous page"
+                          >
+                            ← Previous
+                          </button>
+                        ) : (
+                          <span className={`${movieStyles.pageButton} ${movieStyles.disabled}`}>
+                            ← Previous
+                          </span>
+                        )}
+
+                        {/* Current Page Info */}
+                        <div className={movieStyles.pageInfo}>
+                          Page {searchPage} {searchTotalCount > 0 ? `of ${Math.ceil(searchTotalCount / searchLimit)}` : ''}
+                        </div>
+
+                        {/* Next Button */}
+                        {searchHasNextPage && !isSearching ? (
+                          <button
+                            onClick={() => handleSearchPageChange(searchPage + 1)}
+                            className={movieStyles.pageButton}
+                            disabled={isSearching}
+                            aria-label="Go to next page"
+                          >
+                            Next →
+                          </button>
+                        ) : (
+                          <span className={`${movieStyles.pageButton} ${movieStyles.disabled}`}>
+                            Next →
+                          </span>
+                        )}
                       </div>
 
-                      {/* Next Button */}
-                      {searchHasNextPage ? (
-                        <button
-                          onClick={() => handleSearchPageChange(searchPage + 1)}
-                          className={movieStyles.pageButton}
-                          disabled={isSearching}
-                          aria-label="Go to next page"
-                        >
-                          Next →
-                        </button>
+                      {/* Additional Info */}
+                      <div className={movieStyles.additionalInfo}>
+                        {searchLimit} movies per page • {searchTotalCount} total results
+                      </div>
+                    </nav>
+                  ) : (
+                    /* Vector search results with client-side pagination */
+                    (() => {
+                      const { hasNext, hasPrev, totalPages } = getVectorSearchPageData();
+                      return totalPages > 1 ? (
+                        <nav className={movieStyles.pagination} aria-label="Vector search results pagination">
+                          <div className={movieStyles.paginationContainer}>
+                            {/* Previous Button */}
+                            {hasPrev ? (
+                              <button
+                                onClick={() => handleVectorSearchPageChange(vectorSearchPage - 1)}
+                                className={movieStyles.pageButton}
+                                aria-label="Go to previous page"
+                              >
+                                ← Previous
+                              </button>
+                            ) : (
+                              <span className={`${movieStyles.pageButton} ${movieStyles.disabled}`}>
+                                ← Previous
+                              </span>
+                            )}
+
+                            {/* Current Page Info */}
+                            <div className={movieStyles.pageInfo}>
+                              Page {vectorSearchPage} of {totalPages}
+                            </div>
+
+                            {/* Next Button */}
+                            {hasNext ? (
+                              <button
+                                onClick={() => handleVectorSearchPageChange(vectorSearchPage + 1)}
+                                className={movieStyles.pageButton}
+                                aria-label="Go to next page"
+                              >
+                                Next →
+                              </button>
+                            ) : (
+                              <span className={`${movieStyles.pageButton} ${movieStyles.disabled}`}>
+                                Next →
+                              </span>
+                            )}
+                          </div>
+
+                          {/* Additional Info */}
+                          <div className={movieStyles.additionalInfo}>
+                            {vectorSearchPageSize} movies per page • {allVectorSearchResults.length} total results
+                          </div>
+                        </nav>
                       ) : (
-                        <span className={`${movieStyles.pageButton} ${movieStyles.disabled}`}>
-                          Next →
-                        </span>
-                      )}
-                    </div>
-
-                    {/* Additional Info */}
-                    <div className={movieStyles.additionalInfo}>
-                      {searchLimit} movies per page
-                    </div>
-                  </nav>
+                        <div className={movieStyles.searchInfo}>
+                          Showing {allVectorSearchResults.length} results (vector search)
+                        </div>
+                      );
+                    })()
+                  )
                 ) : (
                   <Pagination
                     currentPage={page}