Pagination via components (this time is true) (#127)

* Refactor adding chakra-components pagination components (and other fixes)

* Upgrade chakra-components version

* Update packages fixing dependency error

* Update packages fixing missing exports

* Eat this, node

package.json

@@ -18,7 +18,7 @@
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@tanstack/react-query": "^5.40.0",
-    "@vocdoni/chakra-components": "~0.9.0",
+    "@vocdoni/chakra-components": "~0.9.1",
     "@vocdoni/extended-sdk": "~0.2.0",
     "@vocdoni/sdk": "~0.9.0",
     "date-fns": "^2.29.3",

src/App.tsx

@@ -1,10 +1,10 @@
 import { ColorModeScript } from '@chakra-ui/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ClientProvider } from '@vocdoni/chakra-components'
+import { ExtendedSDKClient } from '@vocdoni/extended-sdk'
 import { EnvOptions } from '@vocdoni/sdk'
-import { RoutesProvider } from './router'
 import { VocdoniEnvironment } from '~constants'
-import { ExtendedSDKClient } from '@vocdoni/extended-sdk'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { RoutesProvider } from './router'
 
 const queryClient = new QueryClient()
 

src/components/Accounts/Card.tsx

@@ -4,8 +4,8 @@ import { OrganizationProvider, useOrganization } from '@vocdoni/react-providers'
 import { Trans, useTranslation } from 'react-i18next'
 import { generatePath, Link as RouterLink } from 'react-router-dom'
 import { ReducedTextAndCopy } from '~components/Layout/CopyButton'
-import { FallbackAccountImg, RoutePath } from '~constants'
 import LinkCard from '~components/Layout/LinkCard'
+import { FallbackAccountImg, RoutePath } from '~constants'
 
 type IAccountCardProps = {
   id?: string

src/components/Accounts/Detail.tsx

@@ -2,16 +2,16 @@ import { Tab, TabList, TabPanel, TabPanels, VStack } from '@chakra-ui/react'
 import { OrganizationHeader, OrganizationName } from '@vocdoni/chakra-components'
 import { useOrganization } from '@vocdoni/react-providers'
 import { Trans, useTranslation } from 'react-i18next'
+import AccountFees from '~components/Accounts/Details/Fees'
+import AccountTransfers from '~components/Accounts/Details/Transfers'
 import { ReducedTextAndCopy } from '~components/Layout/CopyButton'
 import { HeroHeaderLayout } from '~components/Layout/HeroHeaderLayout'
 import { RouteParamsTabs } from '~components/Layout/RouteParamsTabs'
 import { RawContentBox } from '~components/Layout/ShowRawButton'
+import TextAndTag from '~components/Layout/TextAndTag'
 import { FallbackHeaderImg, RoutePath } from '~constants'
-import AccountTransfers from '~components/Accounts/Details/Transfers'
-import AccountElections from './Details/Elections'
 import AccountDetails from './Details/AccountDetails'
-import AccountFees from '~components/Accounts/Details/Fees'
-import TextAndTag from '~components/Layout/TextAndTag'
+import AccountElections from './Details/Elections'
 
 const AccountDetail = () => {
   const { organization } = useOrganization()

src/components/Accounts/Details/AccountDetails.tsx

@@ -1,11 +1,11 @@
 import { Flex, Icon, Link } from '@chakra-ui/react'
 import { OrganizationDescription } from '@vocdoni/chakra-components'
+import { useOrganization } from '@vocdoni/react-providers'
 import { ensure0x } from '@vocdoni/sdk'
 import { Trans, useTranslation } from 'react-i18next'
 import { FaUserAlt } from 'react-icons/fa'
 import { DetailsGrid, GridItemProps } from '~components/Layout/DetailsGrid'
 import { AppBaseURL } from '~constants'
-import { useOrganization } from '@vocdoni/react-providers'
 
 const AccountDetails = () => {
   const { t } = useTranslation()

src/components/Accounts/Details/Elections.tsx

@@ -1,12 +1,11 @@
 import { Flex } from '@chakra-ui/react'
+import { RoutedPaginationProvider, useOrganization, useRoutedPagination } from '@vocdoni/react-providers'
 import { useTranslation } from 'react-i18next'
-import { RoutedPaginationProvider, useRoutedPagination } from '~components/Pagination/PaginationProvider'
+import { PaginatedAsyncList } from '~components/Layout/AsyncList'
+import { NoResultsError } from '~components/Layout/ContentError'
 import { ElectionCard } from '~components/Process/Card'
 import { RoutePath } from '~constants'
 import { useOrganizationElections } from '~queries/accounts'
-import { NoResultsError } from '~components/Layout/ContentError'
-import { useOrganization } from '@vocdoni/react-providers'
-import { PaginatedAsyncList } from '~components/Layout/AsyncList'
 
 const AccountElections = () => {
   const { t } = useTranslation()
@@ -29,15 +28,14 @@ const AccountElectionsList = () => {
   const { page }: { page?: number } = useRoutedPagination()
   const { organization } = useOrganization()
 
-  if (!organization) return null
-
   const { data, isLoading, isError, error } = useOrganizationElections({
-    address: organization.address,
+    address: organization?.address as string,
     page: page,
     options: {
-      enabled: !!organization.address,
+      enabled: !!organization?.address,
     },
   })
+  if (!organization) return null
 
   return (
     <Flex direction={'column'} gap={4}>

src/components/Accounts/Details/Fees.tsx

@@ -1,35 +1,30 @@
 import { Flex, Link, Skeleton, Td, Text, Th, Thead, Tr } from '@chakra-ui/react'
-import { useOrganization } from '@vocdoni/react-providers'
+import { PaginationProvider, useOrganization, usePagination } from '@vocdoni/react-providers'
 import { Fee, TransactionType } from '@vocdoni/sdk'
 import { Trans } from 'react-i18next'
 import { generatePath, Link as RouterLink } from 'react-router-dom'
 import { PaginatedAsyncTable } from '~components/Layout/AsyncList'
-import { PaginationProvider, usePagination } from '~components/Pagination/PaginationProvider'
 import { TransactionTypeBadge } from '~components/Transactions/TransactionCard'
 import { RoutePath } from '~constants'
 import { useDateFns } from '~i18n/use-date-fns'
 import { useAccountFees } from '~queries/accounts'
 import { generateListStub, PaginationStub } from '~utils/stubs'
 
-const AccountFees = () => {
-  return (
-    <PaginationProvider>
-      <AccountFeesTable />
-    </PaginationProvider>
-  )
-}
+const AccountFees = () => (
+  <PaginationProvider>
+    <AccountFeesTable />
+  </PaginationProvider>
+)
 
 const AccountFeesTable = () => {
   const { page } = usePagination()
   const { organization } = useOrganization()
 
-  if (!organization) return null
-
-  const feesCount = organization.feesCount ?? 0
+  const feesCount = organization?.feesCount ?? 0
 
   const { data, isError, error, isPlaceholderData } = useAccountFees({
     params: {
-      accountId: organization.address,
+      accountId: organization?.address as string,
       page,
     },
     options: {
@@ -48,6 +43,8 @@ const AccountFeesTable = () => {
     },
   })
 
+  if (!organization) return null
+
   return (
     <PaginatedAsyncTable
       isLoading={isPlaceholderData}

src/components/Accounts/Details/Transfers.tsx

@@ -1,15 +1,13 @@
 import { Box, Flex, Icon, IconProps, Link, Skeleton, Td, Text, Th, Thead, Tooltip, Tr } from '@chakra-ui/react'
-import { useOrganization } from '@vocdoni/react-providers'
+import { PaginationProvider, useOrganization, usePagination } from '@vocdoni/react-providers'
 import { AccountData, ITransfer } from '@vocdoni/sdk'
 import { formatDistance } from 'date-fns'
 import { Trans, useTranslation } from 'react-i18next'
 import { BiLogInCircle, BiLogOutCircle } from 'react-icons/bi'
 import { generatePath, Link as RouterLink } from 'react-router-dom'
 import { PaginatedAsyncTable } from '~components/Layout/AsyncList'
 import { ReducedTextAndCopy } from '~components/Layout/CopyButton'
-import { PaginationProvider, usePagination } from '~components/Pagination/PaginationProvider'
 import { RoutePath } from '~constants'
-import { useDateFns } from '~i18n/use-date-fns'
 import { useAccountTransfers } from '~queries/accounts'
 import { generateListStub, PaginationStub } from '~utils/stubs'
 
@@ -34,29 +32,23 @@ const FromToIcon = ({ isIncoming, ...rest }: { isIncoming: boolean } & IconProps
   )
 }
 
-const AccountTransfers = () => {
-  return (
-    <PaginationProvider>
-      <AccountTransfersTable />
-    </PaginationProvider>
-  )
-}
+const AccountTransfers = () => (
+  <PaginationProvider>
+    <AccountTransfersTable />
+  </PaginationProvider>
+)
 
 const AccountTransfersTable = () => {
   const { page } = usePagination()
-  const { formatDistance } = useDateFns()
-  const { t } = useTranslation()
   const { organization } = useOrganization()
 
-  if (!organization) return null
-
-  const txCount = organization.transfersCount ?? 0
+  const txCount = organization?.transfersCount ?? 0
 
   const { data, isError, error, isPlaceholderData } = useAccountTransfers({
-    address: organization.address,
+    address: organization?.address as string,
     page: page,
     options: {
-      enabled: txCount > 0,
+      enabled: !!organization && txCount > 0,
       placeholderData: {
         transfers: generateListStub<ITransfer>({
           amount: 12,
@@ -71,6 +63,8 @@ const AccountTransfersTable = () => {
     },
   })
 
+  if (!organization) return null
+
   return (
     <PaginatedAsyncTable
       isLoading={isPlaceholderData}

src/components/Accounts/List.tsx

@@ -1,11 +1,11 @@
 import { keepPreviousData } from '@tanstack/react-query'
+import { useRoutedPagination } from '@vocdoni/react-providers'
 import { useTranslation } from 'react-i18next'
-import { InputSearch } from '~components/Layout/Inputs'
 import { AccountCard } from '~components/Accounts/Card'
-import { useRoutedPagination } from '~components/Pagination/PaginationProvider'
+import { PaginatedAsyncList } from '~components/Layout/AsyncList'
+import { InputSearch } from '~components/Layout/Inputs'
 import { useOrganizationList } from '~queries/accounts'
 import { useRoutedPaginationQueryParams } from '~src/router/use-query-params'
-import { PaginatedAsyncList } from '~components/Layout/AsyncList'
 
 type FilterQueryParams = {
   accountId?: string

src/components/Blocks/BlocksList.tsx

@@ -1,11 +1,11 @@
 import { keepPreviousData } from '@tanstack/react-query'
+import { RoutedPaginationProvider, useRoutedPagination } from '@vocdoni/react-providers'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { generatePath, useNavigate } from 'react-router-dom'
 import { BlockCard } from '~components/Blocks/BlockCard'
 import { PaginatedAsyncList } from '~components/Layout/AsyncList'
 import { PopoverInputSearch } from '~components/Layout/Inputs'
-import { RoutedPaginationProvider, useRoutedPagination } from '~components/Pagination/PaginationProvider'
 import { PaginationItemsPerPage, RefreshIntervalBlocks, RoutePath } from '~constants'
 import { useBlockList } from '~queries/blocks'
 import { useChainInfo } from '~queries/stats'
@@ -14,7 +14,7 @@ export const BlocksFilter = () => {
   const { t } = useTranslation()
   const navigate = useNavigate()
   const [blockHeight, setBlockHeight] = useState('')
-  const { data: stats, isLoading: isLoadingStats } = useChainInfo()
+  const { data: stats } = useChainInfo()
 
   const blockCount = stats?.height || 0
 
@@ -27,7 +27,7 @@ export const BlocksFilter = () => {
       throw new Error(t('blocks.invalid_block_search', { defaultValue: 'Must to be a valid block height' }))
     }
     navigate(generatePath(RoutePath.Block, { height: num.toString(), tab: null, page: null }))
-  }, [blockHeight, blockCount])
+  }, [blockHeight, blockCount, navigate, t])
 
   return (
     <PopoverInputSearch
@@ -58,8 +58,6 @@ export const BlocksList = () => {
     refetchInterval: RefreshIntervalBlocks,
   })
 
-  const blockCount = stats?.height || 0
-
   const {
     data,
     isLoading: isLoadingBlocks,

src/components/Envelope/EnvelopeList.tsx

@@ -1,14 +1,13 @@
 import { Flex, Grid } from '@chakra-ui/react'
-import { useElection } from '@vocdoni/react-providers'
+import { Pagination } from '@vocdoni/chakra-components'
+import { PaginationProvider, useElection, usePagination } from '@vocdoni/react-providers'
 import { PublishedElection, VoteSummary } from '@vocdoni/sdk'
 import { useTranslation } from 'react-i18next'
 import { ListDataDisplay } from '~components/Layout/AsyncList'
 import { NoResultsError } from '~components/Layout/ContentError'
-import { Pagination } from '~components/Pagination/Pagination'
-import { PaginationProvider, usePagination } from '~components/Pagination/PaginationProvider'
 import { useElectionVotesList } from '~queries/processes'
-import { EnvelopeCard } from './EnvelopeCard'
 import { generateListStub, PaginationStub } from '~utils/stubs'
+import { EnvelopeCard } from './EnvelopeCard'
 
 export const PaginatedEnvelopeList = () => {
   const { election: e } = useElection()

src/components/Layout/AsyncList.tsx

@@ -1,15 +1,8 @@
 import { Box, Table, TableContainer, Tbody } from '@chakra-ui/react'
-import { PaginationResponse } from '@vocdoni/sdk'
 import { PropsWithChildren, ReactNode, useMemo } from 'react'
 import { ContentError, NoResultsError } from '~components/Layout/ContentError'
 import { LoadingCards, SkeletonCardsProps } from '~components/Layout/Loading'
-import { Pagination } from '~components/Pagination/Pagination'
-import { RoutedPagination } from '~components/Pagination/RoutedPagination'
-
-type AsyncListPaginationProps = {
-  pagination?: Pick<PaginationResponse, 'pagination'>['pagination']
-  routedPagination?: boolean
-}
+import { AsyncListPaginationProps, PaginatorSelector } from './RoutedPagination'
 
 type AsyncListLayoutProps<T> = {
   elements?: T[] | null | undefined
@@ -20,12 +13,6 @@ type AsyncListLayoutProps<T> = {
   isLoading?: boolean
 } & PropsWithChildren
 
-const PaginatorSelector = ({ routedPagination = true, pagination }: AsyncListPaginationProps) => {
-  if (!pagination) return null
-  if (routedPagination) return <RoutedPagination pagination={pagination} />
-  return <Pagination pagination={pagination} />
-}
-
 export const ListDataDisplay = <T,>({ elements, isError, error, noResultsMsg, children }: AsyncListLayoutProps<T>) => {
   if (isError) {
     return <ContentError error={error} />
@@ -50,15 +37,15 @@ export const PaginatedAsyncList = <T,>({
   component: React.ComponentType<{ element: T; index: number }>
 } & AsyncListLayoutProps<T> &
   AsyncListPaginationProps) => {
-  if (isLoading) {
-    return <LoadingCards spacing={4} {...skeletonProps} />
-  }
-
   const memoizedComponents = useMemo(
     () => elements?.map((element, index) => <Component key={index} element={element} index={index} />),
-    [elements]
+    [Component, elements]
   )
 
+  if (isLoading) {
+    return <LoadingCards spacing={4} {...skeletonProps} />
+  }
+
   return (
     <ListDataDisplay elements={elements} {...rest}>
       {memoizedComponents}
@@ -84,7 +71,7 @@ export const PaginatedAsyncTable = <T,>({
   AsyncListPaginationProps) => {
   const memoizedComponents = useMemo(
     () => elements?.map((element, index) => <Component key={index} element={element} index={index} />),
-    [elements]
+    [Component, elements]
   )
 
   return (

src/components/Layout/ContentError.tsx

@@ -1,4 +1,4 @@
-import { Alert, AlertIcon, Code, Stack, Text } from '@chakra-ui/react'
+import { Alert, AlertIcon, Code, Stack } from '@chakra-ui/react'
 import { Trans, useTranslation } from 'react-i18next'
 
 export const NoResultsError = ({ msg }: { msg?: string }) => {

src/components/Layout/CopyButton.tsx

@@ -64,8 +64,9 @@ export const ReducedTextAndCopy = ({
   ...rest
 }: ReducedTextAndCopyProps) => {
   let text = children
+  const bpv = useBreakpointValue(breakPoint)
   // If breakpoint is true and the length of the string is more than 13 it shorts the string
-  if (breakPoint && useBreakpointValue(breakPoint) && children.length > 13) {
+  if (breakPoint && bpv && children.length > 13) {
     text = shortStr(children)
   }
 

src/components/Layout/IconLink.tsx

@@ -1,8 +1,8 @@
-import { Box, Flex, Icon, IconProps, Link, Text } from '@chakra-ui/react'
-import { generatePath, Link as RouterLink } from 'react-router-dom'
+import { Box, Flex, Icon, IconProps, Link } from '@chakra-ui/react'
 import { PropsWithChildren } from 'react'
-import { RoutePath } from '~constants'
 import { IconType } from 'react-icons'
+import { generatePath, Link as RouterLink } from 'react-router-dom'
+import { RoutePath } from '~constants'
 import { Icons } from '~src/theme/components/Icons'
 
 export const TxIconLink = ({ block, index }: { block: number; index: number }) => (

src/components/Layout/RouteParamsTabs.tsx

@@ -1,9 +1,9 @@
+import { Tabs } from '@chakra-ui/react'
 import { TabsProps } from '@chakra-ui/tabs/dist/tabs'
 import { useEffect, useState } from 'react'
-import { Tabs } from '@chakra-ui/react'
-import useQueryParams from '~src/router/use-query-params'
 import { generatePath, useLocation, useNavigate, useParams } from 'react-router-dom'
 import { RoutePath } from '~constants'
+import useQueryParams from '~src/router/use-query-params'
 
 /**
  * Reimplementation ob Tabs component to store the selected tab in the query params