feat: add pagination in blog page

asyncapi · Feb 2, 2025 · 1ff9f2f · 1ff9f2f
1 parent a1d2be6
commit 1ff9f2f
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 15 deletions.
diff --git a/components/helpers/applyFilter.ts b/components/helpers/applyFilter.ts
@@ -133,12 +133,13 @@ export const onFilterApply = (
   onFilter: (result: DataObject[], query: Filter) => void,
   query: Filter
 ): void => {
+  const nonFilterableKeys = ['page'];
   let result = inputData;
 
   if (query && Object.keys(query).length >= 1) {
     Object.keys(query).forEach((property) => {
-      if (property === 'page') {
-        return;
+      if (nonFilterableKeys.includes(property)) {
+        return; // Skip non-filterable keys like 'page'
       }
       const res = result.filter((e) => {
         if (!query[property] || e[property] === query[property]) {

diff --git a/components/icons/Next.tsx b/components/icons/Next.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+/* eslint-disable max-len */
+/**
+ * @description Icons for Next button
+ */
+export default function IconNext() {
+  return (
+    <svg
+      width='20'
+      height='20'
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className='stroke-current'
+    >
+      <path d='M9 6L15 12L9 18' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' />
+    </svg>
+  );
+}
diff --git a/components/icons/Previous.tsx b/components/icons/Previous.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+/* eslint-disable max-len */
+/**
+ * @description Icons for Previous button in pagination
+ */
+export default function IconPrevious() {
+  return (
+    <svg
+      width='20'
+      height='20'
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className='stroke-current'
+    >
+      <path d='M15 18L9 12L15 6' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' />
+    </svg>
+  );
+}
diff --git a/components/navigation/BlogPagination.tsx b/components/navigation/BlogPagination.tsx
@@ -3,8 +3,8 @@ import React, { useEffect, useState } from 'react';
 import { ButtonIconPosition } from '@/types/components/buttons/ButtonPropsType';
 
 import Button from '../buttons/Button';
-import IconArrowLeft from '../icons/ArrowLeft';
-import IconArrowRight from '../icons/ArrowRight';
+import IconNext from '../icons/Next';
+import IconPrevious from '../icons/Previous';
 
 /**
  * Props for the BlogPagination component
@@ -85,14 +85,14 @@ export default function BlogPagination({
     >
       {/* Previous button */}
       <Button
-        className={`${currentPage === 1 ? 'cursor-not-allowed opacity-50' : ''} size-[120px] rounded-l-md px-4 py-2`}
+        className={`flex items-center gap-2 ${currentPage === 1 ? 'cursor-not-allowed opacity-50' : ''} size-[120px] rounded-l-md px-4 py-2`}
         aria-label="Previous page"
         bgClassName="bg-white"
         textClassName="text-[#212525] font-inter text-[14px] font-normal"
         text="Previous"
         disabled={currentPage === 1}
         onClick={() => paginate(currentPage - 1)}
-        icon={<IconArrowLeft className="inline-block size-4" />}
+        icon={<IconPrevious />}
         iconPosition={ButtonIconPosition.LEFT}
       />
       {/* Page numbers */}
@@ -112,13 +112,13 @@ export default function BlogPagination({
       </div>
       {/* Next button */}
       <Button
-        className={`${currentPage === totalPages && 'cursor-not-allowed opacity-50'} h-[35px] w-[120px] rounded-l-md px-4 py-2`}
+        className={`flex items-center gap-2 ${currentPage === totalPages && 'cursor-not-allowed opacity-50'} h-[35px] w-[120px] rounded-l-md px-4 py-2`}
         bgClassName="bg-white"
         textClassName="text-[#212525] font-inter text-[14px] font-normal"
         text="Next"
         disabled={currentPage === totalPages}
         onClick={() => paginate(currentPage + 1)}
-        icon={<IconArrowRight className="inline-block size-4" />}
+        icon={<IconNext />}
         iconPosition={ButtonIconPosition.RIGHT}
       />
     </nav>

diff --git a/pages/blog/index.tsx b/pages/blog/index.tsx
@@ -170,18 +170,18 @@ export default function BlogIndexPage() {
                 ))}
               </ul>
             )}
-            {Object.keys(posts).length > 0 && !isClient && (
+            {Object.keys(currentPosts).length > 0 && !isClient && (
               <div className='h-screen w-full'>
                 <Loader loaderText='Loading Blogs' className='mx-auto my-60' pulsating />
               </div>
             )}
             {/* Pagination component */}
-            <BlogPagination
-              blogsPerPage={blogsPerPage}
-              totalBlogs={posts.length}
-              paginate={paginate}
-              currentPage={currentPage}
-            />
+              <BlogPagination
+                blogsPerPage={blogsPerPage}
+                totalBlogs={posts.length}
+                paginate={paginate}
+                currentPage={currentPage}
+              />
           </div>
         </div>
       </div>