Updated the pagination actions buttons

If we are on the first page of the data, the "Previous" button is not shown. If we are on the last page of the data, the "Next" button is not shown. I've updated the following tests: - easy-paginator.spec.ts - paginator.spec.ts All tests pass.
raycharius · Jul 19, 2024 · a458cf6 · a458cf6
1 parent fac1baf
commit a458cf6
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 64 deletions.
diff --git a/src/components/paginator-ui-component.ts b/src/components/paginator-ui-component.ts
@@ -10,8 +10,7 @@ import type {
   Nullable,
 } from '../internal/types';
 
-export type PaginatorActionIdFn = StringReturnableFn<PaginatorState
-& { buttonId: PaginatorButtonId }>;
+export type PaginatorActionIdFn = StringReturnableFn<PaginatorState & { buttonId: PaginatorButtonId }>;
 
 export interface PageCountTextFnParams {
   page: number;
@@ -28,7 +27,7 @@ interface PaginatorUIComponentParams<T> {
   previousButtonText: Nullable<string>;
   pageCountTextFunction: Nullable<PaginatorPageCountTextFn>;
   actionIdFunction: PaginatorActionIdFn;
-  builderFunction: PaginatorBuilderFn<T>,
+  builderFunction: PaginatorBuilderFn<T>;
 }
 
 const defaultPageCountText = ({ page, totalPages }: PageCountTextFnParams) => `Page ${page} of ${totalPages}`;
@@ -65,6 +64,28 @@ export class PaginatorUIComponent<T> {
       blocksForEach.push(this.builderFunction({ item: this.items[i] }).flat());
     }
 
+    const actionButtons = [];
+
+    if (this.paginator.getPage() > 1) {
+      actionButtons.push(Elements.Button({
+        text: this.previousButtonText,
+        actionId: this.actionIdFunction({
+          buttonId: PaginatorButtonId.Previous,
+          ...this.paginator.getPreviousPageState(),
+        }),
+      }));
+    }
+
+    if (this.paginator.getPage() < this.paginator.getTotalPages()) {
+      actionButtons.push(Elements.Button({
+        text: this.nextButtonText,
+        actionId: this.actionIdFunction({
+          buttonId: PaginatorButtonId.Next,
+          ...this.paginator.getNextPageState(),
+        }),
+      }));
+    }
+
     const unpruned = this.paginator.getTotalPages() > 1
       ? [
         ...blocksForEach.flat(),
@@ -73,23 +94,7 @@ export class PaginatorUIComponent<T> {
           totalPages: this.paginator.getTotalPages(),
         })),
         Blocks.Divider(),
-        Blocks.Actions()
-          .elements(
-            Elements.Button({
-              text: this.previousButtonText,
-              actionId: this.actionIdFunction({
-                buttonId: PaginatorButtonId.Previous,
-                ...this.paginator.getPreviousPageState(),
-              }),
-            }),
-            Elements.Button({
-              text: this.nextButtonText,
-              actionId: this.actionIdFunction({
-                buttonId: PaginatorButtonId.Next,
-                ...this.paginator.getNextPageState(),
-              }),
-            }),
-          ),
+        Blocks.Actions().elements(...actionButtons),
       ]
       : blocksForEach.flat();
 

diff --git a/tests/components/easy-paginator.spec.ts b/tests/components/easy-paginator.spec.ts
@@ -15,7 +15,7 @@ const getModalString = (blocks: BlockBuilder[]): string => Modal({ title: 'Testi
   .buildToJSON();
 
 describe('Testing Easy Paginator:', () => {
-  test('Creating a paginator with the default parameters creates the correct UI and callback data.', () => {
+  test('Creating a paginator with the default parameters creates the correct UI and callback data for the first page.', () => {
     const result = getModalString(EasyPaginator<Human>({
       page: 1,
       perPage: 5,
@@ -184,14 +184,6 @@ describe('Testing Easy Paginator:', () => {
         },
         {
           elements: [
-            {
-              text: {
-                type: 'plain_text',
-                text: 'Previous',
-              },
-              action_id: '{"buttonId":"previous","totalItems":20,"perPage":5,"totalPages":4,"offset":15,"page":4}',
-              type: 'button',
-            },
             {
               text: {
                 type: 'plain_text',
@@ -401,7 +393,7 @@ describe('Testing Easy Paginator:', () => {
     }));
   });
 
-  test('Creating a paginator with the default parameters creates the correct UI and callback data.', () => {
+  test('Creating a paginator with the default parameters creates the correct UI and callback data for the last page.', () => {
     const result = getModalString(EasyPaginator({
       items: humans,
       page: 4,
@@ -581,14 +573,6 @@ describe('Testing Easy Paginator:', () => {
               action_id: '{"buttonId":"previous","totalItems":20,"perPage":5,"totalPages":4,"offset":10,"page":3}',
               type: 'button',
             },
-            {
-              text: {
-                type: 'plain_text',
-                text: 'TEST FORWARD',
-              },
-              action_id: '{"buttonId":"next","totalItems":20,"perPage":5,"totalPages":4,"offset":0,"page":1}',
-              type: 'button',
-            },
           ],
           type: 'actions',
         },

diff --git a/tests/components/paginator.spec.ts b/tests/components/paginator.spec.ts
@@ -19,7 +19,7 @@ const getModalString = (blocks: BlockBuilder[]): string => Modal({ title: 'Testi
   .buildToJSON();
 
 describe('Testing Paginator:', () => {
-  test('Creating a paginator with the default parameters creates the correct UI and callback data.', () => {
+  test('Creating a paginator with the default parameters creates the correct UI and callback data for the first page.', () => {
     const items = [humans[0], humans[1], humans[2], humans[3], humans[4]];
     const result = getModalString(Paginator<Human>({
       items,
@@ -190,14 +190,6 @@ describe('Testing Paginator:', () => {
         },
         {
           elements: [
-            {
-              text: {
-                type: 'plain_text',
-                text: 'Previous',
-              },
-              action_id: '{"buttonId":"previous","totalItems":20,"perPage":5,"totalPages":4,"offset":15,"page":4}',
-              type: 'button',
-            },
             {
               text: {
                 type: 'plain_text',
@@ -409,7 +401,7 @@ describe('Testing Paginator:', () => {
     }));
   });
 
-  test('Creating a paginator with the default parameters creates the correct UI and callback data.', () => {
+  test('Creating a paginator on the last page creates the correct UI and callback data.', () => {
     const items = [humans[15], humans[16], humans[17], humans[18], humans[19]];
     const result = getModalString(Paginator({
       items,
@@ -591,14 +583,6 @@ describe('Testing Paginator:', () => {
               action_id: '{"buttonId":"previous","totalItems":20,"perPage":5,"totalPages":4,"offset":10,"page":3}',
               type: 'button',
             },
-            {
-              text: {
-                type: 'plain_text',
-                text: 'TEST FORWARD',
-              },
-              action_id: '{"buttonId":"next","totalItems":20,"perPage":5,"totalPages":4,"offset":0,"page":1}',
-              type: 'button',
-            },
           ],
           type: 'actions',
         },
@@ -789,14 +773,6 @@ describe('Testing Paginator:', () => {
         },
         {
           elements: [
-            {
-              text: {
-                type: 'plain_text',
-                text: 'Previous',
-              },
-              action_id: '{"buttonId":"previous","totalItems":20,"perPage":5,"totalPages":4,"offset":15,"page":4}',
-              type: 'button',
-            },
             {
               text: {
                 type: 'plain_text',