Multiple bugfix and styling (#30)

* Delete topbar unused links

* Fix blocklist loader on refetch

* Implement refetch interval

Now all paginated lists have a refetch interval, which will maintain updated the data without user interaction.

With the additional property of     placeholderData: keepPreviousData, it will avoid to set true the isLoading when refetch.

* Add missing link

* Style links

* Use two different refresh intervals

src/components/Blocks/BlocksList.tsx

@@ -1,21 +1,20 @@
 import { generatePath, useNavigate, useParams } from 'react-router-dom'
 import { RoutedPagination } from '~components/Pagination/Pagination'
 import { RoutedPaginationProvider } from '~components/Pagination/PaginationProvider'
-import { PaginationItemsPerPage, RoutePath } from '~constants'
+import { PaginationItemsPerPage, RefreshIntervalBlocks, RoutePath } from '~constants'
 import { LoadingCards } from '~components/Layout/Loading'
 import LoadingError from '~components/Layout/LoadingError'
 import { useBlockList } from '~queries/blocks'
 import { useChainInfo } from '~queries/stats'
 import { BlockCard } from '~components/Blocks/BlockCard'
 import { useTranslation } from 'react-i18next'
 import { InputSearch } from '~components/Layout/Inputs'
+import { keepPreviousData } from '@tanstack/react-query'
 
 export const BlocksFilter = () => {
   const { t } = useTranslation()
   const navigate = useNavigate()
-  const { data: stats, isLoading: isLoadingStats } = useChainInfo({
-    refetchInterval: 1000,
-  })
+  const { data: stats, isLoading: isLoadingStats } = useChainInfo()
 
   const blockCount = stats?.height || 0
 
@@ -43,7 +42,7 @@ export const BlocksFilter = () => {
 export const PaginatedBlocksList = () => {
   const { page }: { page?: number } = useParams()
   const { data: stats, isLoading: isLoadingStats } = useChainInfo({
-    refetchInterval: 1000,
+    refetchInterval: RefreshIntervalBlocks,
   })
 
   const count = stats?.height || 0
@@ -63,6 +62,7 @@ export const PaginatedBlocksList = () => {
     enabled: !!stats?.height,
     from: firstPageIndex < 0 ? 0 : firstPageIndex - PaginationItemsPerPage,
     listSize: PaginationItemsPerPage,
+    placeholderData: keepPreviousData,
   })
 
   const isLoading = isLoadingStats || isLoadingBlocks

src/components/Home/FeaturedContent.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Flex, Image, Text } from '@chakra-ui/react'
+import { Box, Button, Flex, Image, Link, Text } from '@chakra-ui/react'
 import { Trans, useTranslation } from 'react-i18next'
 
 import anonymous from '/images/featured/anonymous.png'
@@ -76,7 +76,7 @@ export const FeaturedContent = () => {
                 Leveraging on decentralized technologies
               </Trans>
             </Text>
-            <Button bgColor='accent1' color={'white'}>
+            <Button as={Link} bgColor='accent1' color={'white'} href={'https://app-dev.vocdoni.io/'}>
               <Trans i18nKey='featured.know_more'>Know more</Trans>
             </Button>
           </Flex>

src/components/Organizations/Card.tsx

@@ -38,17 +38,24 @@ const OrganizationCardSkeleton = ({ electionCount: ec, ...rest }: IOrganizationC
   if (!pid) return null
 
   return (
-    <Link as={RouterLink} to={generatePath(RoutePath.Organization, { pid })}>
-      <Card direction={'row'} alignItems='center' pl={4} {...rest}>
-        <Box w={'50px'}>
-          <Avatar
-            mx='auto'
-            fallbackSrc={FallbackAccountImg}
-            alt={t('organization.avatar_alt', {
-              name: organization?.account.name.default || organization?.address,
-            }).toString()}
-          />
-        </Box>
+    <Card
+      as={RouterLink}
+      to={generatePath(RoutePath.Organization, { pid })}
+      direction={'row'}
+      alignItems='center'
+      pl={4}
+      {...rest}
+    >
+      <Box w={'50px'}>
+        <Avatar
+          mx='auto'
+          fallbackSrc={FallbackAccountImg}
+          alt={t('organization.avatar_alt', {
+            name: organization?.account.name.default || organization?.address,
+          }).toString()}
+        />
+      </Box>
+      <Link as={RouterLink} to={generatePath(RoutePath.Organization, { pid })}>
         <CardBody>
           {loading ? (
             <Text fontWeight={'bold'} wordBreak='break-all' size='sm'>
@@ -68,7 +75,7 @@ const OrganizationCardSkeleton = ({ electionCount: ec, ...rest }: IOrganizationC
             </Text>
           )}
         </CardBody>
-      </Card>
-    </Link>
+      </Link>
+    </Card>
   )
 }

src/components/Organizations/List.tsx

@@ -8,6 +8,7 @@ import { useOrganizationCount, useOrganizationList } from '~queries/organization
 import { InputSearch } from '~components/Layout/Inputs'
 import { LoadingCards } from '~components/Layout/Loading'
 import LoadingError from '~components/Layout/LoadingError'
+import { keepPreviousData } from '@tanstack/react-query'
 
 export const OrganizationsFilter = () => {
   const { t } = useTranslation()
@@ -38,6 +39,7 @@ export const PaginatedOrganizationsList = () => {
   } = useOrganizationList({
     page: Number(page || 1),
     organizationId: query,
+    placeholderData: keepPreviousData,
   })
 
   const isLoading = isLoadingCount || isLoadingOrgs

src/components/Process/ProcessList.tsx

@@ -12,6 +12,7 @@ import LoadingError from '~components/Layout/LoadingError'
 import useQueryParams from '~src/router/use-query-params'
 import { isEmpty } from '~utils/objects'
 import { ElectionCard } from './Card'
+import { keepPreviousData } from '@tanstack/react-query'
 
 type FilterQueryParams = {
   [K in keyof Omit<IElectionListFilter, 'organizationId'>]: string
@@ -105,6 +106,7 @@ export const PaginatedProcessList = () => {
       status: processFilters.status as IElectionListFilter['status'],
       withResults: processFilters.withResults ? processFilters.withResults === 'true' : undefined,
     },
+    placeholderData: keepPreviousData,
   })
 
   const isLoading = isLoadingCount || isLoadingOrgs

src/components/Stats/LatestBlocks.tsx

@@ -6,6 +6,7 @@ import { RoutePath } from '~constants'
 import { useBlockList } from '~queries/blocks'
 import { useChainInfo } from '~queries/stats'
 import { LoadingCards } from '~components/Layout/Loading'
+import { keepPreviousData } from '@tanstack/react-query'
 
 export const LatestBlocks = () => {
   const blockListSize = 4
@@ -15,6 +16,7 @@ export const LatestBlocks = () => {
     enabled: !!stats?.height,
     from: (stats?.height || 0) - (blockListSize - 1),
     listSize: blockListSize,
+    placeholderData: keepPreviousData,
   })
 
   const isLoading = isLoadingStats || isLoadingBlocks

src/components/Stats/index.tsx

@@ -6,6 +6,7 @@ import { VscGraphLine } from 'react-icons/vsc'
 import { ChainInfo } from '~components/Stats/ChainInfo'
 import { LatestBlocks } from '~components/Stats/LatestBlocks'
 import { useChainInfo } from '~queries/stats'
+import { RefreshIntervalBlocks } from '~constants'
 
 interface IStatsCardProps {
   title: string
@@ -50,7 +51,7 @@ const StatisticsCardWrapper = ({ title, icon, children }: StatisticsCardProps &
 
 const Stats = () => {
   const { data: stats } = useChainInfo({
-    refetchInterval: 10000,
+    refetchInterval: RefreshIntervalBlocks,
   })
   const { t } = useTranslation()
 

src/components/TopBar.tsx

@@ -65,14 +65,6 @@ export const TopBar = () => {
       name: t('links.validators'),
       url: generatePath(RoutePath.Validators),
     },
-    {
-      name: t('links.stats'),
-      url: '',
-    },
-    {
-      name: t('links.tools'),
-      url: '',
-    },
   ]
 
   const rightLinks: HeaderLink[] = [

src/components/Transactions/TransactionList.tsx

@@ -8,6 +8,7 @@ import { useTransactionList, useTransactionsCount } from '~queries/transactions'
 import { TransactionCard } from '~components/Transactions/TransactionCard'
 import { useTranslation } from 'react-i18next'
 import { InputSearch } from '~components/Layout/Inputs'
+import { keepPreviousData } from '@tanstack/react-query'
 
 export const TransactionFilter = () => {
   const { t } = useTranslation()
@@ -42,7 +43,15 @@ export const PaginatedTransactionList = () => {
   const totalPages = Math.ceil(count / PaginationItemsPerPage)
 
   const currentPage = page && page > 0 ? Number(page - 1) : 0
-  const { data, isLoading: isLoadingTx, isError, error } = useTransactionList({ page: currentPage })
+  const {
+    data,
+    isLoading: isLoadingTx,
+    isError,
+    error,
+  } = useTransactionList({
+    page: currentPage,
+    placeholderData: keepPreviousData,
+  })
 
   const isLoading = isLoadingCount || isLoadingTx
 

src/constants.ts

@@ -35,3 +35,8 @@ export enum RoutePath {
 
 // Used to test if a string is base64 encoded. Used by b64ToHex
 export const isB64Regex = /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/
+
+// Block creation interval to refetch
+export const RefreshIntervalBlocks = 10000
+// Refetch interval used on paginated lists
+export const RefreshIntervalPagination = 30000

src/pages/organizations.tsx

@@ -2,10 +2,13 @@ import { OrganizationsFilter, PaginatedOrganizationsList } from '~components/Org
 import ListPageLayout from '~components/Layout/ListPageLayout'
 import { useOrganizationCount } from '~queries/organizations'
 import { useTranslation } from 'react-i18next'
+import { RefreshIntervalPagination } from '~constants'
 
 const OrganizationList = () => {
   const { t } = useTranslation()
-  const { data: orgsCount, isLoading } = useOrganizationCount()
+  const { data: orgsCount, isLoading } = useOrganizationCount({
+    refetchInterval: RefreshIntervalPagination,
+  })
 
   const subtitle = !isLoading ? t('organizations.organizations_count', { count: orgsCount?.count || 0 }) : ''
 

src/pages/processes.tsx

@@ -2,10 +2,13 @@ import ListPageLayout from '~components/Layout/ListPageLayout'
 import { useTranslation } from 'react-i18next'
 import { useProcessesCount } from '~queries/processes'
 import { PaginatedProcessList, ProcessByTypeFilter, ProcessSearchBox } from '~components/Process/ProcessList'
+import { RefreshIntervalPagination } from '~constants'
 
 const ProcessList = () => {
   const { t } = useTranslation()
-  const { data, isLoading } = useProcessesCount()
+  const { data, isLoading } = useProcessesCount({
+    refetchInterval: RefreshIntervalPagination,
+  })
 
   const subtitle = !isLoading ? t('process.process_count', { count: data || 0 }) : ''
 

src/pages/transactions.tsx

@@ -2,10 +2,13 @@ import ListPageLayout from '~components/Layout/ListPageLayout'
 import { useTranslation } from 'react-i18next'
 import { PaginatedTransactionList, TransactionFilter } from '~components/Transactions/TransactionList'
 import { useTransactionsCount } from '~queries/transactions'
+import { RefreshIntervalPagination } from '~constants'
 
 const TransactionsList = () => {
   const { t } = useTranslation()
-  const { data, isLoading } = useTransactionsCount()
+  const { data, isLoading } = useTransactionsCount({
+    refetchInterval: RefreshIntervalPagination,
+  })
 
   const subtitle = !isLoading && !!data ? t('transactions.tx_count', { count: data }) : ''
 

src/theme/components/Link.tsx

@@ -0,0 +1,12 @@
+import { defineStyle, defineStyleConfig } from '@chakra-ui/react'
+
+const baseStyle = defineStyle({
+  _hover: {
+    textDecoration: 'none',
+    color: 'link',
+  },
+})
+
+export const Link = defineStyleConfig({
+  baseStyle,
+})

src/theme/index.ts

@@ -6,6 +6,7 @@ import Radio from './radio'
 import ElectionResults from './results'
 import { colors } from '~src/theme/colors'
 import { tagTheme } from '~src/theme/components/Tag'
+import { Link } from '~src/theme/components/Link'
 
 const theme = extendTheme(vtheme, {
   components: {
@@ -15,6 +16,7 @@ const theme = extendTheme(vtheme, {
     Radio,
     ElectionResults,
     Tag: tagTheme,
+    Link,
   },
   colors,
 })