From a71648625d65aeee2c959ebc53c260630dde155d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20S=C3=BDkora?= <sykora@altamira.sk>
Date: Wed, 17 Mar 2021 08:54:49 +0100
Subject: [PATCH] feat(pagination): added support to programmatically change
 active page

There are cases where users needs to programmatically change the active page number, eg. when
searching, the page should change to first page.

feat #42
---
 .gitignore                         |  4 +++-
 README.md                          |  1 +
 src/Pagination.tsx                 | 10 +++++++---
 src/__tests__/Pagination.test.tsx  | 12 ++++++++++++
 src/stories/Pagination.stories.tsx | 30 ++++++++++++++++++++++++++++++
 5 files changed, 53 insertions(+), 4 deletions(-)
 create mode 100644 src/stories/Pagination.stories.tsx

diff --git a/.gitignore b/.gitignore
index 6f64360..3c86603 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,4 +4,6 @@ dist
 dev
 style/output.css
 lib
-.env
\ No newline at end of file
+.env
+.DS_Store
+.idea
diff --git a/README.md b/README.md
index 9d41b86..4daffc0 100644
--- a/README.md
+++ b/README.md
@@ -73,6 +73,7 @@ export default App
 - Fork
 - Clone
 - `npm install`
+- `npm rum predev`
 - `npm run storybook`
 
 It will start a local server at `localhost:6006` with all components rendered.
diff --git a/src/Pagination.tsx b/src/Pagination.tsx
index fa362c5..7139e31 100644
--- a/src/Pagination.tsx
+++ b/src/Pagination.tsx
@@ -76,7 +76,7 @@ export const PageButton: React.FC<PageButtonProps> = function PageButton({
 
 export const EmptyPageButton = () => <span className="px-2 py-1">...</span>
 
-interface PaginationProps {
+export interface PaginationProps {
   /**
    * The total number of results
    */
@@ -89,6 +89,10 @@ interface PaginationProps {
    * The accessible name of the pagination (what does it refer to?)
    */
   label: string
+  /**
+   * The current active page
+   */
+  activePage?: number
   /**
    * The function executed on page change
    */
@@ -98,9 +102,9 @@ interface PaginationProps {
 type Ref = HTMLDivElement
 
 const Pagination = React.forwardRef<Ref, PaginationProps>(function Pagination(props, ref) {
-  const { totalResults, resultsPerPage = 10, label, onChange, ...other } = props
+  const { totalResults, activePage: page = 1, resultsPerPage = 10, label, onChange, ...other } = props
   const [pages, setPages] = useState<(number | string)[]>([])
-  const [activePage, setActivePage] = useState(1)
+  const [activePage, setActivePage] = useState(page)
 
   const TOTAL_PAGES = Math.ceil(totalResults / resultsPerPage)
   const FIRST_PAGE = 1
diff --git a/src/__tests__/Pagination.test.tsx b/src/__tests__/Pagination.test.tsx
index 86b56fb..f4f1569 100644
--- a/src/__tests__/Pagination.test.tsx
+++ b/src/__tests__/Pagination.test.tsx
@@ -298,4 +298,16 @@ describe('Pagination', () => {
     wrapper.update()
     expect(wrapper.find(PageButton).children().length).toBe(expectedAfterUpdate)
   })
+
+  it('should start with different active page', () => {
+    const onChange = () => {}
+    const expected = 'bg-purple-600'
+
+    const wrapper = mount(
+      <Pagination totalResults={30} resultsPerPage={5} activePage={3} label="Navigation" onChange={onChange} />
+    )
+
+    // Active page
+    expect(wrapper.find('button').at(3).getDOMNode().getAttribute('class')).toContain(expected)
+  })
 })
diff --git a/src/stories/Pagination.stories.tsx b/src/stories/Pagination.stories.tsx
new file mode 100644
index 0000000..5f451fe
--- /dev/null
+++ b/src/stories/Pagination.stories.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+
+import { Story, Meta } from '@storybook/react/types-6-0'
+
+import Pagination, { PaginationProps } from '../Pagination'
+
+export default {
+  title: 'Pagination',
+  component: Pagination,
+} as Meta
+
+const Template: Story<PaginationProps> = (args) => <Pagination {...args} />
+
+export const Current = Template.bind({})
+Current.args = {
+  totalResults: 120,
+  resultsPerPage: 10,
+  onChange: () => {},
+  label: "Table navigation",
+}
+
+// With programmatically adjusted active page
+export const ActivePage = Template.bind({})
+ActivePage.args = {
+  totalResults: 50,
+  resultsPerPage: 15,
+  onChange: () => {},
+  label: "Table navigation",
+  activePage: 3,
+}