Skip to content

Commit

Permalink
Revert "chakra-components pagination (#126)"
Browse files Browse the repository at this point in the history
This reverts commit 7a6101a.
  • Loading branch information
elboletaire committed Sep 6, 2024
1 parent 7a6101a commit d07e4a9
Show file tree
Hide file tree
Showing 52 changed files with 494 additions and 182 deletions.
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.2",
"@vocdoni/chakra-components": "~0.9.0",
"@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 { VocdoniEnvironment } from '~constants'
import { RoutesProvider } from './router'
import { VocdoniEnvironment } from '~constants'
import { ExtendedSDKClient } from '@vocdoni/extended-sdk'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

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 LinkCard from '~components/Layout/LinkCard'
import { FallbackAccountImg, RoutePath } from '~constants'
import LinkCard from '~components/Layout/LinkCard'

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 AccountDetails from './Details/AccountDetails'
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'

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: 8 additions & 6 deletions src/components/Accounts/Details/Elections.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { Flex } from '@chakra-ui/react'
import { RoutedPaginationProvider, useOrganization, useRoutedPagination } from '@vocdoni/react-providers'
import { useTranslation } from 'react-i18next'
import { PaginatedAsyncList } from '~components/Layout/AsyncList'
import { NoResultsError } from '~components/Layout/ContentError'
import { RoutedPaginationProvider, useRoutedPagination } from '~components/Pagination/PaginationProvider'
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 @@ -28,14 +29,15 @@ const AccountElectionsList = () => {
const { page }: { page?: number } = useRoutedPagination()
const { organization } = useOrganization()

if (!organization) return null

const { data, isLoading, isError, error } = useOrganizationElections({
address: organization?.address as string,
address: organization.address,
page: page,
options: {
enabled: !!organization?.address,
enabled: !!organization.address,
},
})
if (!organization) return null

return (
<Flex direction={'column'} gap={4}>
Expand Down
23 changes: 13 additions & 10 deletions src/components/Accounts/Details/Fees.tsx
Original file line number Diff line number Diff line change
@@ -1,30 +1,35 @@
import { Flex, Link, Skeleton, Td, Text, Th, Thead, Tr } from '@chakra-ui/react'
import { PaginationProvider, useOrganization, usePagination } from '@vocdoni/react-providers'
import { useOrganization } 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 = () => (
<PaginationProvider>
<AccountFeesTable />
</PaginationProvider>
)
const AccountFees = () => {
return (
<PaginationProvider>
<AccountFeesTable />
</PaginationProvider>
)
}

const AccountFeesTable = () => {
const { page } = usePagination()
const { organization } = useOrganization()

const feesCount = organization?.feesCount ?? 0
if (!organization) return null

const feesCount = organization.feesCount ?? 0

const { data, isError, error, isPlaceholderData } = useAccountFees({
params: {
accountId: organization?.address as string,
accountId: organization.address,
page,
},
options: {
Expand All @@ -43,8 +48,6 @@ const AccountFeesTable = () => {
},
})

if (!organization) return null

return (
<PaginatedAsyncTable
isLoading={isPlaceholderData}
Expand Down
28 changes: 17 additions & 11 deletions src/components/Accounts/Details/Transfers.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
import { Box, Flex, Icon, IconProps, Link, Skeleton, Td, Text, Th, Thead, Tooltip, Tr } from '@chakra-ui/react'
import { PaginationProvider, useOrganization, usePagination } from '@vocdoni/react-providers'
import { useOrganization } 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 @@ -32,23 +34,29 @@ const FromToIcon = ({ isIncoming, ...rest }: { isIncoming: boolean } & IconProps
)
}

const AccountTransfers = () => (
<PaginationProvider>
<AccountTransfersTable />
</PaginationProvider>
)
const AccountTransfers = () => {
return (
<PaginationProvider>
<AccountTransfersTable />
</PaginationProvider>
)
}

const AccountTransfersTable = () => {
const { page } = usePagination()
const { formatDistance } = useDateFns()
const { t } = useTranslation()
const { organization } = useOrganization()

const txCount = organization?.transfersCount ?? 0
if (!organization) return null

const txCount = organization.transfersCount ?? 0

const { data, isError, error, isPlaceholderData } = useAccountTransfers({
address: organization?.address as string,
address: organization.address,
page: page,
options: {
enabled: !!organization && txCount > 0,
enabled: txCount > 0,
placeholderData: {
transfers: generateListStub<ITransfer>({
amount: 12,
Expand All @@ -63,8 +71,6 @@ 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 { AccountCard } from '~components/Accounts/Card'
import { PaginatedAsyncList } from '~components/Layout/AsyncList'
import { InputSearch } from '~components/Layout/Inputs'
import { AccountCard } from '~components/Accounts/Card'
import { useRoutedPagination } from '~components/Pagination/PaginationProvider'
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: 5 additions & 3 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 } = useChainInfo()
const { data: stats, isLoading: isLoadingStats } = 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, navigate, t])
}, [blockHeight, blockCount])

return (
<PopoverInputSearch
Expand Down Expand Up @@ -58,6 +58,8 @@ export const BlocksList = () => {
refetchInterval: RefreshIntervalBlocks,
})

const blockCount = stats?.height || 0

const {
data,
isLoading: isLoadingBlocks,
Expand Down
7 changes: 4 additions & 3 deletions src/components/Envelope/EnvelopeList.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import { Flex, Grid } from '@chakra-ui/react'
import { Pagination } from '@vocdoni/chakra-components'
import { PaginationProvider, useElection, usePagination } from '@vocdoni/react-providers'
import { useElection } 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 { generateListStub, PaginationStub } from '~utils/stubs'
import { EnvelopeCard } from './EnvelopeCard'
import { generateListStub, PaginationStub } from '~utils/stubs'

export const PaginatedEnvelopeList = () => {
const { election: e } = useElection()
Expand Down
27 changes: 20 additions & 7 deletions src/components/Layout/AsyncList.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
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 { AsyncListPaginationProps, PaginatorSelector } from './RoutedPagination'
import { Pagination } from '~components/Pagination/Pagination'
import { RoutedPagination } from '~components/Pagination/RoutedPagination'

type AsyncListPaginationProps = {
pagination?: Pick<PaginationResponse, 'pagination'>['pagination']
routedPagination?: boolean
}

type AsyncListLayoutProps<T> = {
elements?: T[] | null | undefined
Expand All @@ -13,6 +20,12 @@ 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 @@ -37,15 +50,15 @@ export const PaginatedAsyncList = <T,>({
component: React.ComponentType<{ element: T; index: number }>
} & AsyncListLayoutProps<T> &
AsyncListPaginationProps) => {
const memoizedComponents = useMemo(
() => elements?.map((element, index) => <Component key={index} element={element} index={index} />),
[Component, elements]
)

if (isLoading) {
return <LoadingCards spacing={4} {...skeletonProps} />
}

const memoizedComponents = useMemo(
() => elements?.map((element, index) => <Component key={index} element={element} index={index} />),
[elements]
)

return (
<ListDataDisplay elements={elements} {...rest}>
{memoizedComponents}
Expand All @@ -71,7 +84,7 @@ export const PaginatedAsyncTable = <T,>({
AsyncListPaginationProps) => {
const memoizedComponents = useMemo(
() => elements?.map((element, index) => <Component key={index} element={element} index={index} />),
[Component, elements]
[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 } from '@chakra-ui/react'
import { Alert, AlertIcon, Code, Stack, Text } from '@chakra-ui/react'
import { Trans, useTranslation } from 'react-i18next'

export const NoResultsError = ({ msg }: { msg?: string }) => {
Expand Down
3 changes: 1 addition & 2 deletions src/components/Layout/CopyButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,8 @@ 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 && bpv && children.length > 13) {
if (breakPoint && useBreakpointValue(breakPoint) && 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 } from '@chakra-ui/react'
import { PropsWithChildren } from 'react'
import { IconType } from 'react-icons'
import { Box, Flex, Icon, IconProps, Link, Text } from '@chakra-ui/react'
import { generatePath, Link as RouterLink } from 'react-router-dom'
import { PropsWithChildren } from 'react'
import { RoutePath } from '~constants'
import { IconType } from 'react-icons'
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

2 comments on commit d07e4a9

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.