From 77bcf0ef1a8cc0ada39887f71dd6871c3cc27781 Mon Sep 17 00:00:00 2001
From: Navin <navin007.a@gmail.com>
Date: Fri, 6 Nov 2020 20:38:24 +0530
Subject: [PATCH] =?UTF-8?q?refactor(pagination):=20=E2=99=BB=EF=B8=8F=20?=
 =?UTF-8?q?=20update=20pagination=20state,=20stories=20&=20types?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pagination/PaginationState.ts             | 49 +++++++++++++------
 .../__tests__/PaginationState.test.ts         | 10 ++--
 src/pagination/stories/Pagination.stories.tsx |  7 +--
 3 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/src/pagination/PaginationState.ts b/src/pagination/PaginationState.ts
index 032481520..87af9eb26 100644
--- a/src/pagination/PaginationState.ts
+++ b/src/pagination/PaginationState.ts
@@ -3,16 +3,11 @@
  * Based on the logic from [usePagination Hook](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-lab/src/Pagination/usePagination.js)
  */
 import React from "react";
-import {
-  SealedInitialState,
-  useSealedState,
-} from "reakit-utils/useSealedState";
+import { useControllableState } from "@chakra-ui/hooks";
 
 export type PaginationState = {
   /**
    * The current active page
-   *
-   * @default 1
    */
   currentPage: number;
   /**
@@ -52,20 +47,37 @@ export type PaginationAction = {
   lastPage: () => void;
 };
 
-export type PaginationInitialState = Pick<
-  Partial<PaginationState>,
-  "currentPage"
-> & {
+export type PaginationInitialState = {
+  /**
+   * Set the default page(uncontrollable)
+   *
+   * @default 1
+   */
+  defaultPage?: number;
+  /**
+   * Set the page(controllable)
+   */
+  page?: number;
+  /**
+   *
+   */
+  onChange?: (page: number) => void;
   /**
    * Total no. of pages
+   *
+   * @default 1
    */
   count?: number;
   /**
    * No. of boundary pages to be visible
+   *
+   * @default 1
    */
   boundaryCount?: number;
   /**
    * No. of sibiling pages allowed before/after the current page
+   *
+   * @default 1
    */
   siblingCount?: number;
 };
@@ -73,16 +85,23 @@ export type PaginationInitialState = Pick<
 export type PaginationStateReturn = PaginationState & PaginationAction;
 
 export const usePaginationState = (
-  props: SealedInitialState<PaginationInitialState> = {},
+  props: PaginationInitialState = {},
 ): PaginationStateReturn => {
   const {
-    currentPage: initialCurrentPage = 1,
+    defaultPage = 1,
+    page: currentPageProp,
+    onChange,
     count = 1,
     boundaryCount = 1,
     siblingCount = 1,
-  } = useSealedState(props);
-
-  const [currentPage, setCurrentPage] = React.useState(initialCurrentPage);
+  } = props;
+
+  const [currentPage, setCurrentPage] = useControllableState({
+    value: currentPageProp,
+    defaultValue: defaultPage,
+    onChange,
+    shouldUpdate: (prev, next) => prev !== next,
+  });
 
   const startPages = range(1, Math.min(boundaryCount, count));
   const endPages = range(
diff --git a/src/pagination/__tests__/PaginationState.test.ts b/src/pagination/__tests__/PaginationState.test.ts
index 86b7a6f36..49d6bd5e4 100644
--- a/src/pagination/__tests__/PaginationState.test.ts
+++ b/src/pagination/__tests__/PaginationState.test.ts
@@ -89,7 +89,7 @@ describe("usePaginationState", () => {
 
   it("should have disabled next button if currentPage === count & enabled previous button", () => {
     const { isAtFirstPage, isAtLastPage } = renderHook(() =>
-      usePaginationState({ count: 2, currentPage: 2 }),
+      usePaginationState({ count: 2, defaultPage: 2 }),
     ).result.current;
 
     expect(isAtFirstPage).toBe(false);
@@ -114,7 +114,7 @@ describe("usePaginationState", () => {
 
   it("should have start-ellipses when currentPage >= 5", () => {
     const { pages } = renderHook(() =>
-      usePaginationState({ count: 8, currentPage: 5 }),
+      usePaginationState({ count: 8, defaultPage: 5 }),
     ).result.current;
 
     expect(pages).toContain("start-ellipsis");
@@ -122,7 +122,7 @@ describe("usePaginationState", () => {
 
   it("should have start-ellipses & end-ellipsis when count >= 5", () => {
     const { pages } = renderHook(() =>
-      usePaginationState({ count: 9, currentPage: 5 }),
+      usePaginationState({ count: 9, defaultPage: 5 }),
     ).result.current;
 
     expect(pages).toContain("start-ellipsis");
@@ -138,7 +138,7 @@ describe("usePaginationState", () => {
       usePaginationState({
         count: 40,
         boundaryCount: 5,
-        currentPage: 20,
+        defaultPage: 20,
       }),
     );
 
@@ -156,7 +156,7 @@ describe("usePaginationState", () => {
       usePaginationState({
         count: 11,
         siblingCount: 2,
-        currentPage: 6,
+        defaultPage: 6,
       }),
     );
 
diff --git a/src/pagination/stories/Pagination.stories.tsx b/src/pagination/stories/Pagination.stories.tsx
index 6fbaabe26..cd1641c87 100644
--- a/src/pagination/stories/Pagination.stories.tsx
+++ b/src/pagination/stories/Pagination.stories.tsx
@@ -22,19 +22,20 @@ export const Default = Base.bind({});
 
 export const DefaultPage = Base.bind({});
 DefaultPage.args = {
-  currentPage: 5,
+  defaultPage: 5,
+  count: 10,
 };
 
 export const BoundaryCount = Base.bind({});
 BoundaryCount.args = {
-  currentPage: 25,
+  defaultPage: 25,
   count: 50,
   boundaryCount: 5,
 };
 
 export const SibilingCount = Base.bind({});
 SibilingCount.args = {
-  currentPage: 25,
+  defaultPage: 25,
   count: 50,
   sibilingCount: 5,
 };