Skip to content

Commit 76c58ae

Browse files
ckersey2ckersey2
committed
✨ 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.
1 parent fac1baf commit 76c58ae

File tree

3 files changed

+29
-64
lines changed

3 files changed

+29
-64
lines changed

‎src/components/paginator-ui-component.ts‎

Lines changed: 25 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@ import type {
1010
Nullable,
1111
} from '../internal/types';
1212

13-
export type PaginatorActionIdFn = StringReturnableFn<PaginatorState
14-
& { buttonId: PaginatorButtonId }>;
13+
export type PaginatorActionIdFn = StringReturnableFn<PaginatorState & { buttonId: PaginatorButtonId }>;
1514

1615
export interface PageCountTextFnParams {
1716
page: number;
@@ -28,7 +27,7 @@ interface PaginatorUIComponentParams<T> {
2827
previousButtonText: Nullable<string>;
2928
pageCountTextFunction: Nullable<PaginatorPageCountTextFn>;
3029
actionIdFunction: PaginatorActionIdFn;
31-
builderFunction: PaginatorBuilderFn<T>,
30+
builderFunction: PaginatorBuilderFn<T>;
3231
}
3332

3433
const defaultPageCountText = ({ page, totalPages }: PageCountTextFnParams) => `Page ${page} of ${totalPages}`;
@@ -65,6 +64,28 @@ export class PaginatorUIComponent<T> {
6564
blocksForEach.push(this.builderFunction({ item: this.items[i] }).flat());
6665
}
6766

67+
const actionButtons = [];
68+
69+
if (this.paginator.getPage() > 1) {
70+
actionButtons.push(Elements.Button({
71+
text: this.previousButtonText,
72+
actionId: this.actionIdFunction({
73+
buttonId: PaginatorButtonId.Previous,
74+
...this.paginator.getPreviousPageState(),
75+
}),
76+
}));
77+
}
78+
79+
if (this.paginator.getPage() < this.paginator.getTotalPages()) {
80+
actionButtons.push(Elements.Button({
81+
text: this.nextButtonText,
82+
actionId: this.actionIdFunction({
83+
buttonId: PaginatorButtonId.Next,
84+
...this.paginator.getNextPageState(),
85+
}),
86+
}));
87+
}
88+
6889
const unpruned = this.paginator.getTotalPages() > 1
6990
? [
7091
...blocksForEach.flat(),
@@ -73,23 +94,7 @@ export class PaginatorUIComponent<T> {
7394
totalPages: this.paginator.getTotalPages(),
7495
})),
7596
Blocks.Divider(),
76-
Blocks.Actions()
77-
.elements(
78-
Elements.Button({
79-
text: this.previousButtonText,
80-
actionId: this.actionIdFunction({
81-
buttonId: PaginatorButtonId.Previous,
82-
...this.paginator.getPreviousPageState(),
83-
}),
84-
}),
85-
Elements.Button({
86-
text: this.nextButtonText,
87-
actionId: this.actionIdFunction({
88-
buttonId: PaginatorButtonId.Next,
89-
...this.paginator.getNextPageState(),
90-
}),
91-
}),
92-
),
97+
Blocks.Actions().elements(...actionButtons),
9398
]
9499
: blocksForEach.flat();
95100

‎tests/components/easy-paginator.spec.ts‎

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const getModalString = (blocks: BlockBuilder[]): string => Modal({ title: 'Testi
1515
.buildToJSON();
1616

1717
describe('Testing Easy Paginator:', () => {
18-
test('Creating a paginator with the default parameters creates the correct UI and callback data.', () => {
18+
test('Creating a paginator with the default parameters creates the correct UI and callback data for the first page.', () => {
1919
const result = getModalString(EasyPaginator<Human>({
2020
page: 1,
2121
perPage: 5,
@@ -184,14 +184,6 @@ describe('Testing Easy Paginator:', () => {
184184
},
185185
{
186186
elements: [
187-
{
188-
text: {
189-
type: 'plain_text',
190-
text: 'Previous',
191-
},
192-
action_id: '{"buttonId":"previous","totalItems":20,"perPage":5,"totalPages":4,"offset":15,"page":4}',
193-
type: 'button',
194-
},
195187
{
196188
text: {
197189
type: 'plain_text',
@@ -401,7 +393,7 @@ describe('Testing Easy Paginator:', () => {
401393
}));
402394
});
403395

404-
test('Creating a paginator with the default parameters creates the correct UI and callback data.', () => {
396+
test('Creating a paginator with the default parameters creates the correct UI and callback data for the last page.', () => {
405397
const result = getModalString(EasyPaginator({
406398
items: humans,
407399
page: 4,
@@ -581,14 +573,6 @@ describe('Testing Easy Paginator:', () => {
581573
action_id: '{"buttonId":"previous","totalItems":20,"perPage":5,"totalPages":4,"offset":10,"page":3}',
582574
type: 'button',
583575
},
584-
{
585-
text: {
586-
type: 'plain_text',
587-
text: 'TEST FORWARD',
588-
},
589-
action_id: '{"buttonId":"next","totalItems":20,"perPage":5,"totalPages":4,"offset":0,"page":1}',
590-
type: 'button',
591-
},
592576
],
593577
type: 'actions',
594578
},

‎tests/components/paginator.spec.ts‎

Lines changed: 2 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const getModalString = (blocks: BlockBuilder[]): string => Modal({ title: 'Testi
1919
.buildToJSON();
2020

2121
describe('Testing Paginator:', () => {
22-
test('Creating a paginator with the default parameters creates the correct UI and callback data.', () => {
22+
test('Creating a paginator with the default parameters creates the correct UI and callback data for the first page.', () => {
2323
const items = [humans[0], humans[1], humans[2], humans[3], humans[4]];
2424
const result = getModalString(Paginator<Human>({
2525
items,
@@ -190,14 +190,6 @@ describe('Testing Paginator:', () => {
190190
},
191191
{
192192
elements: [
193-
{
194-
text: {
195-
type: 'plain_text',
196-
text: 'Previous',
197-
},
198-
action_id: '{"buttonId":"previous","totalItems":20,"perPage":5,"totalPages":4,"offset":15,"page":4}',
199-
type: 'button',
200-
},
201193
{
202194
text: {
203195
type: 'plain_text',
@@ -409,7 +401,7 @@ describe('Testing Paginator:', () => {
409401
}));
410402
});
411403

412-
test('Creating a paginator with the default parameters creates the correct UI and callback data.', () => {
404+
test('Creating a paginator on the last page creates the correct UI and callback data.', () => {
413405
const items = [humans[15], humans[16], humans[17], humans[18], humans[19]];
414406
const result = getModalString(Paginator({
415407
items,
@@ -591,14 +583,6 @@ describe('Testing Paginator:', () => {
591583
action_id: '{"buttonId":"previous","totalItems":20,"perPage":5,"totalPages":4,"offset":10,"page":3}',
592584
type: 'button',
593585
},
594-
{
595-
text: {
596-
type: 'plain_text',
597-
text: 'TEST FORWARD',
598-
},
599-
action_id: '{"buttonId":"next","totalItems":20,"perPage":5,"totalPages":4,"offset":0,"page":1}',
600-
type: 'button',
601-
},
602586
],
603587
type: 'actions',
604588
},
@@ -789,14 +773,6 @@ describe('Testing Paginator:', () => {
789773
},
790774
{
791775
elements: [
792-
{
793-
text: {
794-
type: 'plain_text',
795-
text: 'Previous',
796-
},
797-
action_id: '{"buttonId":"previous","totalItems":20,"perPage":5,"totalPages":4,"offset":15,"page":4}',
798-
type: 'button',
799-
},
800776
{
801777
text: {
802778
type: 'plain_text',

0 commit comments

Comments
 (0)