add Next and Previos icon fix(filters): exclude non-filterable keys d…

…ynamically and update the function to render page number on pagination component
asyncapi · Jan 26, 2025 · 20e3d3d · 20e3d3d
1 parent 1873828
commit 20e3d3d
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 63 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 IconPrevios() {
+  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/pagination/Pagination.tsx b/components/pagination/Pagination.tsx
@@ -1,5 +1,10 @@
 import React from 'react';
 
+import { ButtonIconPosition } from '@/types/components/buttons/ButtonPropsType';
+
+import Button from '../buttons/Button';
+import IconNext from '../icons/Next';
+import IconPrevios from '../icons/Previous';
 import PaginationItem from './PaginationItem';
 
 export interface PaginationProps {
@@ -20,59 +25,53 @@ export interface PaginationProps {
  */
 export default function Pagination({ totalPages, currentPage, onPageChange }: PaginationProps) {
   const handlePageChange = (page: number) => {
-    if (page < 1 || page > totalPages) return;
-    onPageChange(page);
+    if (page >= 1 && page <= totalPages) {
+      onPageChange(page);
+    }
   };
 
-  const getPageNumbers = () => {
-    const pages = [];
-
+  /**
+   * @returns number of pages shows in Pagination.
+   */
+  const getPageNumbers = (): (number | string)[] => {
     if (totalPages <= 7) {
-      for (let i = 1; i <= totalPages; i++) pages.push(i);
-    } else {
-      pages.push(1);
-      if (currentPage > 3) {
-        pages.push('ellipsis1');
-      }
-
-      for (let i = Math.max(2, currentPage - 1); i <= Math.min(totalPages - 1, currentPage + 1); i++) {
-        pages.push(i);
-      }
-
-      if (currentPage < totalPages - 2) {
-        pages.push('ellipsis2');
-      }
-
-      pages.push(totalPages);
+      return Array.from({ length: totalPages }, (_, i) => i + 1);
+    }
+
+    const pages: (number | string)[] = [1];
+
+    if (currentPage > 3) {
+      pages.push('ellipsis1');
     }
 
+    const start = Math.max(2, currentPage - 1);
+    const end = Math.min(totalPages - 1, currentPage + 1);
+
+    for (let i = start; i <= end; i++) {
+      pages.push(i);
+    }
+
+    if (currentPage < totalPages - 2) {
+      pages.push('ellipsis2');
+    }
+
+    pages.push(totalPages);
+
     return pages;
   };
 
   return (
     <div className='font-inter flex items-center justify-center gap-8'>
       {/* Previous button */}
-      <button
+      <Button
         onClick={() => handlePageChange(currentPage - 1)}
-        disabled={currentPage === 1}
-        className={`
-          font-normal flex h-[34px] items-center justify-center gap-2 rounded bg-white px-4
-          py-[7px] text-sm leading-[17px] tracking-[-0.01em]
-          ${currentPage === 1 ? 'cursor-not-allowed text-gray-300' : 'text-[#141717] hover:bg-gray-50'}
-        `}
-      >
-        <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>
-        <span>Previous</span>
-      </button>
+        className={`font-normal flex h-[34px] items-center justify-center rounded bg-white px-3 py-[7px] text-sm leading-[17px] tracking-[-0.01em] ${
+          currentPage === 1 ? 'cursor-not-allowed text-gray-300' : 'text-[#141717] hover:bg-gray-50'
+        }`}
+        text='Previous'
+        icon={<IconPrevios />}
+        iconPosition={ButtonIconPosition.LEFT}
+      />
 
       {/* Page numbers */}
       <div className='flex gap-2'>
@@ -96,27 +95,14 @@ export default function Pagination({ totalPages, currentPage, onPageChange }: Pa
       </div>
 
       {/* Next button */}
-      <button
+      <Button
         onClick={() => handlePageChange(currentPage + 1)}
-        disabled={currentPage === totalPages}
-        className={`
-          font-normal flex h-[34px] items-center justify-center gap-2 rounded bg-white px-4
-          py-[7px] text-sm leading-[17px] tracking-[-0.01em]
-          ${currentPage === totalPages ? 'cursor-not-allowed text-gray-300' : 'text-[#141717] hover:bg-gray-50'}
-        `}
-      >
-        <span>Next</span>
-        <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>
-      </button>
+        className={`font-normal flex h-[34px] items-center justify-center rounded bg-white px-3 py-[7px] text-sm leading-[17px] tracking-[-0.01em] ${
+          currentPage === totalPages ? 'cursor-not-allowed text-gray-300' : 'text-[#141717] hover:bg-gray-50'
+        }`}
+        text='Next'
+        icon={<IconNext />}
+      />
     </div>
   );
 }