fix: coderabbitai suggestions

asyncapi · Jan 21, 2025 · 396a102 · 396a102
1 parent 5fee8c9
commit 396a102
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 32 deletions.
diff --git a/components/navigation/BlogPagination.tsx b/components/navigation/BlogPagination.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { useRouter } from 'next/router';
 import { useState, useEffect } from 'react';
 import IconArrowRight from '../icons/ArrowRight';
 import IconArrowLeft from '../icons/ArrowLeft';
@@ -11,12 +10,10 @@ interface BlogPaginationProps {
     blogsPerPage: number;
     totalBlogs: number;
     paginate: (pageNumber: number) => void;
+    currentPage: number;
 }
 
-export default function BlogPagination({ blogsPerPage, totalBlogs, paginate }: BlogPaginationProps) {
-    const router = useRouter();
-    const { page } = router.query;
-    const currentPage: number = parseInt(page as string);
+export default function BlogPagination({ blogsPerPage, totalBlogs, paginate, currentPage }: BlogPaginationProps) {
     const totalPages: number = Math.ceil(totalBlogs / blogsPerPage);
     const pagesToShow: number = 6;
     const [pageNumbers, setPageNumbers] = useState<(number | string)[]>([]);
@@ -62,9 +59,10 @@ export default function BlogPagination({ blogsPerPage, totalBlogs, paginate }: B
     }, [currentPage, totalBlogs]);
 
     return (
-        <div className='flex justify-center items-center p-4 gap-2 mt-8'>
+        <nav aria-label="Blog pagination" className='flex justify-center items-center p-4 gap-2 mt-8'>
             <Button
-                className={`${currentPage === 1 && 'opacity-50 cursor-not-allowed'} w-[120px] h-[35px] py-2 px-4 rounded-l-md`}
+                className={`${currentPage === 1 ? 'opacity-50 cursor-not-allowed' : ''} size-[120px] py-2 px-4 rounded-l-md`}
+                aria-label="Previous page"
                 bgClassName='bg-white'
                 textClassName='text-[#212525] font-inter text-[14px] font-normal'
                 text='Previous'
@@ -78,6 +76,8 @@ export default function BlogPagination({ blogsPerPage, totalBlogs, paginate }: B
                     <button
                         key={index}
                         className={`w-[40px] h-[40px] ${number === currentPage ? 'border rounded bg-[#6200EE] text-white' : 'text-[#6B6B6B'}`}
+                        aria-label={`${typeof number === 'number' ? `Go to page ${number}` : 'More pages'}`}
+                        aria-current={number === currentPage ? 'page' : undefined}
                         onClick={() => typeof number === 'number' && paginate(number)}
                         disabled={number === '...'}
                     >
@@ -95,7 +95,7 @@ export default function BlogPagination({ blogsPerPage, totalBlogs, paginate }: B
                 icon={<IconArrowRight className='w-4 h-4 inline-block' />}
                 iconPosition={ButtonIconPosition.RIGHT}
             />
-        </div>
+        </nav>
     );
 }
 
diff --git a/pages/blog/index.tsx b/pages/blog/index.tsx
@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router';
-import React, { useContext, useEffect, useState, useRef } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 
 import Empty from '@/components/illustrations/Empty';
 import GenericLayout from '@/components/layout/GenericLayout';
@@ -52,11 +52,11 @@ export default function BlogIndexPage() {
     }
   ];
   const clearFilters = () => {
-    const { page } = router.query; 
+    const { page } = router.query;
     router.push(
       {
         pathname: router.pathname,
-        query: { ...(page && { page }) }, 
+        query: { ...(page && { page }) },
       },
       undefined,
       {
@@ -70,7 +70,13 @@ export default function BlogIndexPage() {
   const image = '/img/social/blog.webp';
   const blogsPerPage = 9;
 
-  const [currentPosts, setCurrentPosts] = useState<IBlogPost[]>([]);
+  const currentPage = parseInt(router.query.page as string) || 1;
+
+  const currentPosts = useMemo(() => {
+    const indexOfLastPost = currentPage * blogsPerPage;
+    const indexOfFirstPost = indexOfLastPost - blogsPerPage;
+    return posts.slice(indexOfFirstPost, indexOfLastPost);
+  }, [currentPage, posts]);
 
   const paginate = (pageNumber: number) => {
     const { query } = router;
@@ -83,34 +89,24 @@ export default function BlogIndexPage() {
         pathname: router.pathname,
         query: newQuery
       },
-      undefined, 
+      undefined,
       {
         shallow: true
       }
     );
   };
+
   useEffect(() => {
-    if(router.isReady){
-      const pageFromQuery = parseInt(router.query.page as string);
-      if(!pageFromQuery){
-        router.replace(
-          {
-            pathname: router.pathname,
-            query: { ...router.query, page: '1' },
-          },
-          undefined,
-          { shallow: true }
-        );
-      }
-      const indexOfLastPost = pageFromQuery * blogsPerPage;
-      const indexOfFirstPost = indexOfLastPost - blogsPerPage;
-      setCurrentPosts(posts.slice(indexOfFirstPost, indexOfLastPost));
+    if (router.isReady && !router.query.page) {
+      router.replace({ pathname: router.pathname, query: { page: '1' } }, undefined, { shallow: true });
     }
-  }, [router.isReady, router.query.page, posts]);
+  }, [router.isReady]);
 
   useEffect(() => {
-    setIsClient(true);
-  }, []);
+    if (router.isReady) {
+      setIsClient(true);
+    }
+  }, [router.isReady]);
 
   return (
     <GenericLayout title='Blog' description={description} image={image} wide>
@@ -163,7 +159,7 @@ export default function BlogIndexPage() {
             )}
           </div>
           <div>
-            {(Object.keys(posts).length === 0) && (
+            {(Object.keys(posts).length === 0 || Object.keys(currentPosts).length === 0) && (
               <div className='mt-16 flex flex-col items-center justify-center'>
                 <Empty />
                 <p className='mx-auto mt-3 max-w-2xl text-xl leading-7 text-gray-500'>No post matches your filter</p>
@@ -185,6 +181,7 @@ export default function BlogIndexPage() {
               blogsPerPage={blogsPerPage}
               totalBlogs={posts.length}
               paginate={paginate}
+              currentPage={currentPage}
             />
           </div>
         </div>