無限スクロールページネーション

kn1515 · Oct 26, 2024 · d4200dc · d4200dc
1 parent 3fc0230
commit d4200dc
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 25 deletions.
diff --git a/src/components/pagination.tsx b/src/components/pagination.tsx
@@ -1,39 +1,29 @@
-// components/Pagination.tsx
-
 type PaginationProps = {
   totalPosts: number;
   postsPerPage: number;
   currentPage: number;
-  paginate: (pageNumber: number) => void;
+  loadMore: () => void;
 };
 
 const Pagination: React.FC<PaginationProps> = ({
   totalPosts,
   postsPerPage,
   currentPage,
-  paginate,
+  loadMore,
 }) => {
-  const pageNumbers = Array.from(
-    { length: Math.ceil(totalPosts / postsPerPage) },
-    (_, i) => i + 1
-  );
+  const totalPages = Math.ceil(totalPosts / postsPerPage);
 
   return (
     <div className="flex justify-center mt-8">
-      {pageNumbers.map((number) => (
+      {currentPage < totalPages && (
         <button
-          key={number}
           type="button"
-          onClick={() => paginate(number)}
-          className={`mx-1 px-3 py-1 rounded ${
-            currentPage === number
-              ? "bg-blue-500 text-white"
-              : "bg-gray-200 text-gray-700"
-          }`}
+          onClick={loadMore}
+          className="mx-1 px-3 py-1 rounded bg-blue-500 text-white"
         >
-          {number}
+          Load More
         </button>
-      ))}
+      )}
     </div>
   );
 };

diff --git a/src/components/post-list.tsx b/src/components/post-list.tsx
@@ -16,15 +16,15 @@ type PostListProps = {
   totalPosts: number;
   postsPerPage: number;
   currentPage: number;
-  paginate: (pageNumber: number) => void;
+  loadMore: () => void;
 };
 
 const PostList: React.FC<PostListProps> = ({
   posts,
   totalPosts,
   postsPerPage,
   currentPage,
-  paginate,
+  loadMore,
 }) => {
   return (
     <>
@@ -37,7 +37,7 @@ const PostList: React.FC<PostListProps> = ({
         totalPosts={totalPosts}
         postsPerPage={postsPerPage}
         currentPage={currentPage}
-        paginate={paginate}
+        loadMore={loadMore}
       />
     </>
   );

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -42,11 +42,11 @@ const Home: NextPage<Props> = ({ allPosts }) => {
 
   // Calculate the current posts to display
   const indexOfLastPost = currentPage * postsPerPage;
-  const indexOfFirstPost = indexOfLastPost - postsPerPage;
+  const indexOfFirstPost = 0; // Always start from the first post
   const currentPosts = allPosts.slice(indexOfFirstPost, indexOfLastPost);
 
-  // Change page
-  const paginate = (pageNumber: number) => setCurrentPage(pageNumber);
+  // Load more posts
+  const loadMore = () => setCurrentPage((prevPage) => prevPage + 1);
 
   // Extract unique categories
   const categories = Array.from(new Set(allPosts.flatMap((post) => post.tags)));
@@ -71,7 +71,7 @@ const Home: NextPage<Props> = ({ allPosts }) => {
               totalPosts={allPosts.length}
               postsPerPage={postsPerPage}
               currentPage={currentPage}
-              paginate={paginate}
+              loadMore={loadMore}
             />
           </div>
           <Sidebar categories={categories} allPosts={allPosts} />