refactor(pagination): 👌 review changes done

adaptui · Sep 10, 2020 · 9f04462 · 9f04462
1 parent f9a6918
commit 9f04462
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 34 deletions.
diff --git a/src/pagination/PaginationButton.ts b/src/pagination/PaginationButton.ts
@@ -1,11 +1,13 @@
-import { callAllHandlers, isNumber } from "@chakra-ui/utils";
 import React from "react";
 import { createComponent, createHook } from "reakit-system";
+import { callAllHandlers, isNumber } from "@chakra-ui/utils";
 import { ButtonHTMLProps, ButtonOptions, useButton } from "reakit";
 
 import { PAGINATION_ITEM_KEYS } from "./__keys";
 import { PaginationStateReturn } from "./PaginationState";
 
+export type TGoto = "next" | "prev" | "last" | "first" | number;
+
 export type PaginationButtonOptions = ButtonOptions &
   Pick<
     PaginationStateReturn,
@@ -18,8 +20,8 @@ export type PaginationButtonOptions = ButtonOptions &
     | "isAtMax"
     | "isAtMin"
   > & {
-    goto: string | number;
-    getAriaLabel?: (goto: string | number, isCurrent: boolean) => string;
+    goto: TGoto;
+    getAriaLabel?: (goto: TGoto, isCurrent: boolean) => string;
   };
 
 export type PaginationButtonHTMLProps = ButtonHTMLProps;
@@ -53,42 +55,22 @@ export const usePaginationButton = createHook<
     };
   },
 
-  useProps(
-    { currentPage, move, last, first, next, prev, goto, getAriaLabel },
-    { onClick: htmlOnClick, ...htmlProps },
-  ) {
+  useProps(options, { onClick: htmlOnClick, ...htmlProps }) {
+    const { currentPage, goto, getAriaLabel } = options;
     const isCurrent = currentPage === goto;
 
     const onClick = React.useCallback(() => {
-      switch (goto) {
-        case "next":
-          next?.();
-          break;
-
-        case "prev":
-          prev?.();
-          break;
-
-        case "first":
-          first?.();
-          break;
-
-        case "last":
-          last?.();
-          break;
-
-        default:
-          if (isNumber(goto)) {
-            move?.(goto);
-          }
-          break;
+      if (isNumber(goto)) {
+        options.move?.(goto);
+      } else {
+        options[goto]?.();
       }
-    }, [goto, next, prev, first, last, move]);
+    }, [goto, options]);
 
     const ariaLabel =
       getAriaLabel?.(goto, isCurrent) ?? isCurrent
         ? `Page ${goto}`
-        : `Go to ${goto} Page`;
+        : `Go to ${goto === "prev" ? "previous" : goto} Page`;
 
     return {
       "aria-label": ariaLabel,

diff --git a/src/pagination/stories/Pagination.stories.tsx b/src/pagination/stories/Pagination.stories.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 import { Meta } from "@storybook/react";
 import { Pagination } from "../Pagination";
-import { PaginationButton } from "../PaginationButton";
+import { PaginationButton, TGoto } from "../PaginationButton";
 import { UsePaginationProps, usePaginationState } from "../PaginationState";
 
 export default {
@@ -11,7 +11,6 @@ export default {
 
 const PaginationComp: React.FC<UsePaginationProps> = props => {
   const state = usePaginationState({ count: 10, ...props });
-  console.log("%c state", "color: #cc0088", state);
 
   return (
     <Pagination {...state}>
@@ -34,7 +33,7 @@ const PaginationComp: React.FC<UsePaginationProps> = props => {
           return (
             <li key={page}>
               <PaginationButton
-                goto={page}
+                goto={page as TGoto}
                 style={{
                   fontWeight: state.currentPage === page ? "bold" : undefined,
                 }}