Features

src/components/common/Pagination.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+}
+
+const Pagination: React.FC<PaginationProps> = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+}) => {
+  const handlePrev = () => {
+    if (currentPage > 1) {
+      onPageChange(currentPage - 1);
+    }
+  };
+
+  const handleNext = () => {
+    if (currentPage < totalPages) {
+      onPageChange(currentPage + 1);
+    }
+  };
+
+  return (
+    <div className="flex justify-center items-center space-x-4 my-8">
+      <button
+        onClick={handlePrev}
+        disabled={currentPage <= 1}
+        className="px-4 py-2 bg-cyan-600 text-white rounded disabled:bg-gray-400"
+      >
+        Previous
+      </button>
+      <span className="text-white">
+        Page {currentPage} of {totalPages}
+      </span>
+      <button
+        onClick={handleNext}
+        disabled={currentPage >= totalPages}
+        className="px-4 py-2 bg-cyan-600 text-white rounded disabled:bg-gray-400"
+      >
+        Next
+      </button>
+    </div>
+  );
+};
+
+export default Pagination;

src/components/movies/MovieList.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import MovieCard from './MovieCard';
+import Pagination from '../common/Pagination'; // Import Pagination
 import { useMovies } from '../../hooks/useMovies';
 import { Movie } from '../../types';
 
@@ -12,10 +13,19 @@ const MovieListContent: React.FC<{
   movies: Movie[];
   loading: boolean;
   error: string | null;
-  hasMore: boolean;
-  loadMore: () => void;
+  page: number;
+  totalPages: number;
+  handlePageChange: (page: number) => void;
   onMovieSelect: (id: number) => void;
-}> = ({ movies, loading, error, hasMore, loadMore, onMovieSelect }) => {
+}> = ({
+  movies,
+  loading,
+  error,
+  page,
+  totalPages,
+  handlePageChange,
+  onMovieSelect,
+}) => {
   if (loading && movies.length === 0) {
     return <p className="text-gray-400 text-center mt-10">Loading movies...</p>;
   }
@@ -35,16 +45,12 @@ const MovieListContent: React.FC<{
           <MovieCard key={movie.id} movie={movie} onClick={onMovieSelect} />
         ))}
       </div>
-      {hasMore && (
-        <div className="flex justify-center mt-4">
-          <button
-            onClick={loadMore}
-            className="bg-cyan-600 hover:bg-cyan-500 text-white font-bold py-2 px-4 rounded"
-            disabled={loading}
-          >
-            {loading ? 'Loading...' : 'Load More'}
-          </button>
-        </div>
+      {totalPages > 1 && (
+        <Pagination
+          currentPage={page}
+          totalPages={totalPages}
+          onPageChange={handlePageChange}
+        />
       )}
     </div>
   );
@@ -58,14 +64,14 @@ const MovieList: React.FC<MovieListProps> = ({
 
   if (moviesProp) {
     // If movies are passed as a prop, render them directly.
-    // We can create dummy values for the other props since they won't be used.
     return (
       <MovieListContent
         movies={moviesProp}
         loading={false}
         error={null}
-        hasMore={false}
-        loadMore={() => {}}
+        page={1}
+        totalPages={1}
+        handlePageChange={() => {}}
         onMovieSelect={onMovieSelect}
       />
     );

src/hooks/useMovies.tsx

@@ -28,8 +28,8 @@ export const useMovies = () => {
       try {
         const url = query
           ? `${API_BASE}/movies/search?query=${encodeURIComponent(
-              query
-            )}&page=${pageNum}`
+            query
+          )}&page=${pageNum}`
           : `${API_BASE}/movies/popular?page=${pageNum}`;
 
         const res = await API.get<MoviesResponse>(url);
@@ -42,12 +42,7 @@ export const useMovies = () => {
           );
         }
 
-        setMovies(prevMovies => {
-          if (pageNum === 1) return newMovies;
-          const existingIds = new Set(prevMovies.map(m => m.id));
-          const uniqueNewMovies = newMovies.filter(m => !existingIds.has(m.id));
-          return [...prevMovies, ...uniqueNewMovies];
-        });
+        setMovies(newMovies);
         setPage(res.data.page);
         setTotalPages(res.data.total_pages);
       } catch (e) {
@@ -64,9 +59,9 @@ export const useMovies = () => {
     fetchMovies(1, searchQuery);
   }, [fetchMovies, searchQuery, selectedGenre]);
 
-  const loadMore = () => {
-    if (loading || page >= totalPages) return;
-    fetchMovies(page + 1, searchQuery);
+  const handlePageChange = (newPage: number) => {
+    if (loading || newPage < 1 || newPage > totalPages) return;
+    fetchMovies(newPage, searchQuery);
   };
 
   return {
@@ -75,9 +70,8 @@ export const useMovies = () => {
     error,
     searchQuery,
     setSearchQuery,
-    loadMore,
     page,
     totalPages,
-    hasMore: page < totalPages,
+    handlePageChange,
   };
 };