Move dataLabel prop to PaginationStatus component

Update exports from module to default
thesis · May 8, 2024 · 6a1ced0 · 6a1ced0
1 parent a4e4bd8
commit 6a1ced0
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 32 deletions.
diff --git a/dapp/src/components/shared/Pagination/Pagination.tsx b/dapp/src/components/shared/Pagination/Pagination.tsx
@@ -6,18 +6,10 @@ export type PaginationProps<T> = Omit<StackProps, "as"> & {
   data: T[]
   pageSize?: number
   defaultPage?: number
-  dataLabel?: string
 }
 
-export function Pagination<T>(props: PaginationProps<T>) {
-  const {
-    data,
-    children,
-    pageSize = 10,
-    defaultPage = 0,
-    dataLabel = "items",
-    ...restProps
-  } = props
+function Pagination<T>(props: PaginationProps<T>) {
+  const { data, children, pageSize = 10, defaultPage = 0, ...restProps } = props
 
   const [currentPage, setCurrentPage] = React.useState(defaultPage)
   const [direction, setDirection] = React.useState<"left" | "right">("right")
@@ -42,18 +34,9 @@ export function Pagination<T>(props: PaginationProps<T>) {
       direction,
       setPage: handleSetPage,
       totalSize: data.length,
-      dataLabel,
       pageData,
     }),
-    [
-      pageSize,
-      currentPage,
-      data,
-      dataLabel,
-      direction,
-      handleSetPage,
-      pageData,
-    ],
+    [pageSize, currentPage, data, direction, handleSetPage, pageData],
   )
 
   return (
@@ -64,3 +47,5 @@ export function Pagination<T>(props: PaginationProps<T>) {
     </PaginationContext.Provider>
   )
 }
+
+export default Pagination
diff --git a/dapp/src/components/shared/Pagination/PaginationButton.tsx b/dapp/src/components/shared/Pagination/PaginationButton.tsx
@@ -7,7 +7,7 @@ type PaginationButtonProps = Omit<IconButtonProps, "aria-label" | "icon"> & {
   mode: "previous" | "next"
 }
 
-export function PaginationButton(props: PaginationButtonProps) {
+function PaginationButton(props: PaginationButtonProps) {
   const { mode, ...restProps } = props
   const { currentPage, setPage, totalSize, pageSize } = usePagination()
 
@@ -42,3 +42,5 @@ export function PaginationButton(props: PaginationButtonProps) {
     />
   )
 }
+
+export default PaginationButton
diff --git a/dapp/src/components/shared/Pagination/PaginationContext.ts b/dapp/src/components/shared/Pagination/PaginationContext.ts
@@ -6,7 +6,6 @@ type PaginationContextType<T = unknown> = {
   direction: "left" | "right"
   totalSize: number
   setPage: (page: number) => void
-  dataLabel: string
   pageData: T[]
 } | null
 

diff --git a/dapp/src/components/shared/Pagination/PaginationPage.tsx b/dapp/src/components/shared/Pagination/PaginationPage.tsx
@@ -27,7 +27,7 @@ type PaginationPageProps = Omit<StackProps, "children"> & {
   children: (pageData: unknown[]) => React.ReactNode
 }
 
-export function PaginationPage(props: PaginationPageProps) {
+function PaginationPage(props: PaginationPageProps) {
   const { children, ...restProps } = props
   const { currentPage, direction, pageData } = usePagination()
 
@@ -49,3 +49,5 @@ export function PaginationPage(props: PaginationPageProps) {
     </AnimatePresence>
   )
 }
+
+export default PaginationPage
diff --git a/dapp/src/components/shared/Pagination/PaginationStatus.tsx b/dapp/src/components/shared/Pagination/PaginationStatus.tsx
@@ -3,15 +3,22 @@ import { TextProps } from "@chakra-ui/react"
 import { TextSm } from "../Typography"
 import { usePagination } from "./PaginationContext"
 
-export function PaginationStatus(props: TextProps) {
-  const { currentPage, pageSize, totalSize, dataLabel } = usePagination()
+type PaginationStatusProps = TextProps & {
+  dataLabel?: string
+}
+
+function PaginationStatus(props: PaginationStatusProps) {
+  const { dataLabel = "items", ...restProps } = props
+  const { currentPage, pageSize, totalSize } = usePagination()
 
   const rangeStart = currentPage * pageSize + 1 // Pages are indexed from 0
   const rangeEnd = Math.min(rangeStart + pageSize - 1, totalSize)
 
   return (
-    <TextSm {...props}>
+    <TextSm {...restProps}>
       Showing {rangeStart}-{rangeEnd} out of {totalSize} {dataLabel}
     </TextSm>
   )
 }
+
+export default PaginationStatus
diff --git a/dapp/src/components/shared/Pagination/index.ts b/dapp/src/components/shared/Pagination/index.ts
@@ -1,4 +1,4 @@
-export { Pagination } from "./Pagination"
-export { PaginationStatus } from "./PaginationStatus"
-export { PaginationPage } from "./PaginationPage"
-export { PaginationButton } from "./PaginationButton"
+export { default as Pagination } from "./Pagination"
+export { default as PaginationStatus } from "./PaginationStatus"
+export { default as PaginationPage } from "./PaginationPage"
+export { default as PaginationButton } from "./PaginationButton"
diff --git a/dapp/src/pages/OverviewPage/TransactionHistory.tsx b/dapp/src/pages/OverviewPage/TransactionHistory.tsx
@@ -49,7 +49,7 @@ export default function TransactionHistory(props: TransactionHistoryProps) {
           <TextMd color="grey.400">You have no transactions yet!</TextMd>
         </VStack>
       ) : (
-        <Pagination data={data} pageSize={10} dataLabel="transactions">
+        <Pagination data={data} pageSize={10}>
           <PaginationPage direction="column" spacing={2}>
             {(pageData) =>
               // TODO: Fix type assertion of `pageData`
@@ -108,7 +108,7 @@ export default function TransactionHistory(props: TransactionHistoryProps) {
               <PaginationButton mode="next" />
             </HStack>
 
-            <PaginationStatus color="grey.500" />
+            <PaginationStatus dataLabel="transactions" color="grey.500" />
           </HStack>
         </Pagination>
       )}