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/4] :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 446c85a9..1412a96c 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 0e5b8bf1..7e66f9cc 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 ab7e0659..8f71e042 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/4] :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 1412a96c..d39cc762 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[]; From 0a001266cabfc88d09559bbf27763013b6388174 Mon Sep 17 00:00:00 2001 From: Chase K <83299247+ckersey2@users.noreply.github.com> Date: Thu, 7 Nov 2024 10:49:00 -0500 Subject: [PATCH 3/4] :lipstick: Update paginator-ui-component.ts --- src/components/paginator-ui-component.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/paginator-ui-component.ts b/src/components/paginator-ui-component.ts index d39cc762..f0219c6e 100644 --- a/src/components/paginator-ui-component.ts +++ b/src/components/paginator-ui-component.ts @@ -10,7 +10,7 @@ import type { Nullable, } from '../internal/types'; -export type PaginatorActionIdFn = +export type PaginatorActionIdFn = StringReturnableFn; export interface PageCountTextFnParams { @@ -31,8 +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[]; From 1c20c55474656f03825078a655962f67d7852f19 Mon Sep 17 00:00:00 2001 From: Chase K <83299247+ckersey2@users.noreply.github.com> Date: Thu, 7 Nov 2024 10:52:03 -0500 Subject: [PATCH 4/4] :lipstick: Update paginator-ui-component.ts Clearing linting issues --- src/components/paginator-ui-component.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/paginator-ui-component.ts b/src/components/paginator-ui-component.ts index f0219c6e..f20f6dff 100644 --- a/src/components/paginator-ui-component.ts +++ b/src/components/paginator-ui-component.ts @@ -31,8 +31,7 @@ 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[];