feat: added pagination in blog page

components/helpers/applyFilter.ts

@@ -137,6 +137,9 @@ export const onFilterApply = (
 
   if (query && Object.keys(query).length >= 1) {
     Object.keys(query).forEach((property) => {
+      if (property === 'page') {
+        return;
+      }
       const res = result.filter((e) => {
         if (!query[property] || e[property] === query[property]) {
           return e[property];

components/navigation/BlogPagination.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import { useState, useEffect } from 'react';
+import IconArrowRight from '../icons/ArrowRight';
+import IconArrowLeft from '../icons/ArrowLeft';
+import Button from '../buttons/Button';
+import { ButtonIconPosition } from '@/types/components/buttons/ButtonPropsType';
+
+
+interface BlogPaginationProps {
+    blogsPerPage: number;
+    totalBlogs: number;
+    paginate: (pageNumber: number) => void;
+}
+
+export default function BlogPagination({ blogsPerPage, totalBlogs, paginate }: BlogPaginationProps) {
+    const router = useRouter();
+    const { page } = router.query;
+    const currentPage: number = parseInt(page as string);
+    const totalPages: number = Math.ceil(totalBlogs / blogsPerPage);
+    const pagesToShow: number = 6;
+    const [pageNumbers, setPageNumbers] = useState<(number | string)[]>([]);
+
+    const calculatePageNumbers = () => {
+        const pageNumbers: (number | string)[] = [];
+        if (totalPages <= pagesToShow) {
+            for (let i = 1; i <= totalPages; i++) {
+                pageNumbers.push(i);
+            }
+        } else {
+            if (currentPage <= 2) {
+                for (let i = 1; i <= 3; i++) {
+                    pageNumbers.push(i);
+                }
+                pageNumbers.push('...');
+                pageNumbers.push(totalPages - 2);
+                pageNumbers.push(totalPages - 1);
+                pageNumbers.push(totalPages);
+            } else if (currentPage >= totalPages - 1) {
+                pageNumbers.push(1);
+                pageNumbers.push(2);
+                pageNumbers.push(3);
+                pageNumbers.push('...');
+                for (let i = totalPages - 2; i <= totalPages; i++) {
+                    pageNumbers.push(i);
+                }
+            } else {
+                pageNumbers.push(1);
+                pageNumbers.push('...');
+                pageNumbers.push(currentPage - 1);
+                pageNumbers.push(currentPage);
+                pageNumbers.push(currentPage + 1);
+                pageNumbers.push('...');
+                pageNumbers.push(totalPages);
+            }
+        }
+        return pageNumbers;
+    };
+
+    useEffect(() => {
+        setPageNumbers(calculatePageNumbers());
+    }, [currentPage, totalBlogs]);
+
+    return (
+        <div 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`}
+                bgClassName='bg-white'
+                textClassName='text-[#212525] font-inter text-[14px] font-normal'
+                text='Previous'
+                disabled={currentPage === 1}
+                onClick={() => paginate(currentPage - 1)}
+                icon={<IconArrowLeft className='w-4 h-4 inline-block' />}
+                iconPosition={ButtonIconPosition.LEFT}
+            />
+            <div className='flex justify-center gap-3 w-[35vw]'>
+                {pageNumbers.map((number, index) => (
+                    <button
+                        key={index}
+                        className={`w-[40px] h-[40px] ${number === currentPage ? 'border rounded bg-[#6200EE] text-white' : 'text-[#6B6B6B'}`}
+                        onClick={() => typeof number === 'number' && paginate(number)}
+                        disabled={number === '...'}
+                    >
+                        {number}
+                    </button>
+                ))}
+            </div>
+            <Button
+                className={`${currentPage === totalPages && 'opacity-50 cursor-not-allowed'} w-[120px] h-[35px] py-2 px-4 rounded-l-md`}
+                bgClassName='bg-white'
+                textClassName='text-[#212525] font-inter text-[14px] font-normal'
+                text='Next'
+                disabled={currentPage === totalPages}
+                onClick={() => paginate(currentPage + 1)}
+                icon={<IconArrowRight className='w-4 h-4 inline-block' />}
+                iconPosition={ButtonIconPosition.RIGHT}
+            />
+        </div>
+    );
+}
+

pages/blog/index.tsx

@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router';
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState, useRef } from 'react';
 
 import Empty from '@/components/illustrations/Empty';
 import GenericLayout from '@/components/layout/GenericLayout';
@@ -13,7 +13,7 @@ import BlogContext from '@/context/BlogContext';
 import type { IBlogPost } from '@/types/post';
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
-
+import BlogPagination from '@/components/navigation/BlogPagination';
 /**
  * @description The BlogIndexPage is the blog index page of the website.
  */
@@ -24,19 +24,21 @@ export default function BlogIndexPage() {
   const [posts, setPosts] = useState<IBlogPost[]>(
     navItems
       ? navItems.sort((i1: IBlogPost, i2: IBlogPost) => {
-          const i1Date = new Date(i1.date);
-          const i2Date = new Date(i2.date);
+        const i1Date = new Date(i1.date);
+        const i2Date = new Date(i2.date);
 
-          if (i1.featured && !i2.featured) return -1;
-          if (!i1.featured && i2.featured) return 1;
+        if (i1.featured && !i2.featured) return -1;
+        if (!i1.featured && i2.featured) return 1;
 
-          return i2Date.getTime() - i1Date.getTime();
-        })
+        return i2Date.getTime() - i1Date.getTime();
+      })
       : []
   );
   const [isClient, setIsClient] = useState(false);
 
-  const onFilter = (data: IBlogPost[]) => setPosts(data);
+  const onFilter = (data: IBlogPost[]) => {
+    setPosts(data);
+  };
   const toFilter = [
     {
       name: 'type'
@@ -50,14 +52,61 @@ export default function BlogIndexPage() {
     }
   ];
   const clearFilters = () => {
-    router.push(`${router.pathname}`, undefined, {
-      shallow: true
-    });
+    const { page } = router.query; 
+    router.push(
+      {
+        pathname: router.pathname,
+        query: { ...(page && { page }) }, 
+      },
+      undefined,
+      {
+        shallow: true,
+      }
+    );
   };
-  const showClearFilters = Object.keys(router.query).length > 0;
+  const showClearFilters = Object.keys(router.query).length > 1;
 
   const description = 'Find the latest and greatest stories from our community';
   const image = '/img/social/blog.webp';
+  const blogsPerPage = 9;
+
+  const [currentPosts, setCurrentPosts] = useState<IBlogPost[]>([]);
+
+  const paginate = (pageNumber: number) => {
+    const { query } = router;
+    const newQuery = {
+      ...query,
+      page: pageNumber
+    };
+    router.push(
+      {
+        pathname: router.pathname,
+        query: newQuery
+      },
+      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));
+    }
+  }, [router.isReady, router.query.page, posts]);
 
   useEffect(() => {
     setIsClient(true);
@@ -114,15 +163,15 @@ export default function BlogIndexPage() {
             )}
           </div>
           <div>
-            {Object.keys(posts).length === 0 && (
+            {(Object.keys(posts).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>
               </div>
             )}
             {Object.keys(posts).length > 0 && isClient && (
               <ul className='mx-auto mt-12 grid max-w-lg gap-5 lg:max-w-none lg:grid-cols-3'>
-                {posts.map((post, index) => (
+                {currentPosts.map((post, index) => (
                   <BlogPostItem key={index} post={post} />
                 ))}
               </ul>
@@ -132,6 +181,11 @@ export default function BlogIndexPage() {
                 <Loader loaderText='Loading Blogs' className='mx-auto my-60' pulsating />
               </div>
             )}
+            <BlogPagination
+              blogsPerPage={blogsPerPage}
+              totalBlogs={posts.length}
+              paginate={paginate}
+            />
           </div>
         </div>
       </div>