From 76c58ae51750dbf93f1ff406057f73b241677189 Mon Sep 17 00:00:00 2001 From: Chase K <83299247+ckersey2@users.noreply.github.com> Date: Fri, 19 Jul 2024 15:33:46 +0000 Subject: [PATCH 1/2] :sparkles: Add new feature for pagination 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. --- src/components/paginator-ui-component.ts | 45 +++++++++++++----------- tests/components/easy-paginator.spec.ts | 20 ++--------- tests/components/paginator.spec.ts | 28 ++------------- 3 files changed, 29 insertions(+), 64 deletions(-) diff --git a/src/components/paginator-ui-component.ts b/src/components/paginator-ui-component.ts index 446c85a..1412a96 100644 --- 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; +export type PaginatorActionIdFn = StringReturnableFn; export interface PageCountTextFnParams { page: number; @@ -28,7 +27,7 @@ interface PaginatorUIComponentParams { previousButtonText: Nullable; pageCountTextFunction: Nullable; actionIdFunction: PaginatorActionIdFn; - builderFunction: PaginatorBuilderFn, + builderFunction: PaginatorBuilderFn; } const defaultPageCountText = ({ page, totalPages }: PageCountTextFnParams) => `Page ${page} of ${totalPages}`; @@ -65,6 +64,28 @@ export class PaginatorUIComponent { 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 { 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 index 0e5b8bf..7e66f9c 100644 --- 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({ 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 index ab7e065..8f71e04 100644 --- 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({ 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', From 124df2e8ed0d6db309ee1a73d4fc141bd663e780 Mon Sep 17 00:00:00 2001 From: Chase K <83299247+ckersey2@users.noreply.github.com> Date: Sat, 20 Jul 2024 00:55:25 +0000 Subject: [PATCH 2/2] :pencil2: Fix line length issues to conform to max-len rule --- src/components/paginator-ui-component.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/paginator-ui-component.ts b/src/components/paginator-ui-component.ts index 1412a96..d39cc76 100644 --- a/src/components/paginator-ui-component.ts +++ b/src/components/paginator-ui-component.ts @@ -10,7 +10,8 @@ import type { Nullable, } from '../internal/types'; -export type PaginatorActionIdFn = StringReturnableFn; +export type PaginatorActionIdFn = +StringReturnableFn; export interface PageCountTextFnParams { page: number; @@ -30,7 +31,8 @@ interface PaginatorUIComponentParams { builderFunction: PaginatorBuilderFn; } -const defaultPageCountText = ({ page, totalPages }: PageCountTextFnParams) => `Page ${page} of ${totalPages}`; +const defaultPageCountText = ({ page, totalPages }: PageCountTextFnParams) => + `Page ${page} of ${totalPages}`; export class PaginatorUIComponent { private readonly items: T[];