Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chakra-components pagination #126

Merged
merged 2 commits into from
Sep 6, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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.2",
"@vocdoni/extended-sdk": "~0.2.0",
"@vocdoni/sdk": "~0.9.0",
"date-fns": "^2.29.3",
Expand Down
6 changes: 3 additions & 3 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -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()

Expand Down
2 changes: 1 addition & 1 deletion src/components/Accounts/Card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
8 changes: 4 additions & 4 deletions src/components/Accounts/Detail.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down
2 changes: 1 addition & 1 deletion src/components/Accounts/Details/AccountDetails.tsx
Original file line number Diff line number Diff line change
@@ -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()
Expand Down
14 changes: 6 additions & 8 deletions src/components/Accounts/Details/Elections.tsx
Original file line number Diff line number Diff line change
@@ -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()
Expand All @@ -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}>
Expand Down
23 changes: 10 additions & 13 deletions src/components/Accounts/Details/Fees.tsx
Original file line number Diff line number Diff line change
@@ -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: {
Expand All @@ -48,6 +43,8 @@ const AccountFeesTable = () => {
},
})

if (!organization) return null

return (
<PaginatedAsyncTable
isLoading={isPlaceholderData}
Expand Down
28 changes: 11 additions & 17 deletions src/components/Accounts/Details/Transfers.tsx
Original file line number Diff line number Diff line change
@@ -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'

Expand All @@ -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,
Expand All @@ -71,6 +63,8 @@ const AccountTransfersTable = () => {
},
})

if (!organization) return null

return (
<PaginatedAsyncTable
isLoading={isPlaceholderData}
Expand Down
6 changes: 3 additions & 3 deletions src/components/Accounts/List.tsx
Original file line number Diff line number Diff line change
@@ -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
Expand Down
8 changes: 3 additions & 5 deletions src/components/Blocks/BlocksList.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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

Expand All @@ -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
Expand Down Expand Up @@ -58,8 +58,6 @@ export const BlocksList = () => {
refetchInterval: RefreshIntervalBlocks,
})

const blockCount = stats?.height || 0

const {
data,
isLoading: isLoadingBlocks,
Expand Down
7 changes: 3 additions & 4 deletions src/components/Envelope/EnvelopeList.tsx
Original file line number Diff line number Diff line change
@@ -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()
Expand Down
27 changes: 7 additions & 20 deletions src/components/Layout/AsyncList.tsx
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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} />
Expand All @@ -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}
Expand All @@ -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 (
Expand Down
2 changes: 1 addition & 1 deletion src/components/Layout/ContentError.tsx
Original file line number Diff line number Diff line change
@@ -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 }) => {
Expand Down
3 changes: 2 additions & 1 deletion src/components/Layout/CopyButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}

Expand Down
6 changes: 3 additions & 3 deletions src/components/Layout/IconLink.tsx
Original file line number Diff line number Diff line change
@@ -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 }) => (
Expand Down
4 changes: 2 additions & 2 deletions src/components/Layout/RouteParamsTabs.tsx
Original file line number Diff line number Diff line change
@@ -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
Expand Down
Loading
Loading