Bulk bugfix (#106)

* Improve invalid election card

* Minor bugfixes

* Unify NoResultsError component

* Fix typo

* Use organization provider

src/components/Accounts/Detail.tsx

@@ -22,8 +22,8 @@ const AccountDetail = () => {
   if (!organization) return null
 
   const id = organization.address
-  const transfersCount = organization.transfersCount
-  const feesCount = organization.feesCount
+  const transfersCount = organization.transfersCount ?? 0
+  const feesCount = organization.feesCount ?? 0
 
   return (
     <>
@@ -64,16 +64,16 @@ const AccountDetail = () => {
         </TabList>
         <TabPanels>
           <TabPanel>
-            <AccountDetails org={organization} />
+            <AccountDetails />
           </TabPanel>
           <TabPanel>
-            <AccountElections org={organization} />
+            <AccountElections />
           </TabPanel>
           <TabPanel>
-            <AccountTransfers org={organization} txCount={transfersCount} />
+            <AccountTransfers />
           </TabPanel>
           <TabPanel>
-            <AccountFees org={organization} />
+            <AccountFees />
           </TabPanel>
           <TabPanel>
             <RawContentBox obj={organization} />

src/components/Accounts/Details/AccountDetails.tsx

@@ -5,9 +5,13 @@ 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 = ({ org }: { org: AccountData }) => {
+const AccountDetails = () => {
   const { t } = useTranslation()
+  const { organization: org } = useOrganization()
+
+  if (!org) return null
 
   const details: GridItemProps[] = [
     {

src/components/Accounts/Details/Elections.tsx

@@ -1,42 +1,43 @@
 import { Flex, Text } from '@chakra-ui/react'
 import { AccountData } from '@vocdoni/sdk'
-import { Trans } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 import { LoadingCards } from '~components/Layout/Loading'
 import { RoutedPagination } from '~components/Pagination/Pagination'
 import { RoutedPaginationProvider, useRoutedPagination } from '~components/Pagination/PaginationProvider'
 import { ElectionCard } from '~components/Process/Card'
 import { RoutePath } from '~constants'
 import { useOrganizationElections } from '~queries/accounts'
 import { ContentError, NoResultsError } from '~components/Layout/ContentError'
+import { useOrganization } from '@vocdoni/react-providers'
 
-interface OrgComponentProps {
-  org: AccountData
-}
+const AccountElections = () => {
+  const { t } = useTranslation()
+  const { organization } = useOrganization()
+
+  if (!organization) return null
 
-const AccountElections = ({ org }: OrgComponentProps) => {
-  if (org.electionIndex === 0) {
-    return (
-      <Text>
-        <Trans i18nKey={'account.no_elections'}>No elections yet!</Trans>
-      </Text>
-    )
+  if (organization.electionIndex === 0) {
+    return <NoResultsError msg={t('account.no_elections', { defaultValue: 'No elections yet!' })} />
   }
 
   return (
     <RoutedPaginationProvider path={RoutePath.Account}>
-      <AccountElectionsList org={org} />
+      <AccountElectionsList />
     </RoutedPaginationProvider>
   )
 }
 
-const AccountElectionsList = ({ org }: OrgComponentProps) => {
+const AccountElectionsList = () => {
   const { page }: { page?: number } = useRoutedPagination()
+  const { organization } = useOrganization()
+
+  if (!organization) return null
 
   const { data, isLoading, isError, error } = useOrganizationElections({
-    address: org.address,
+    address: organization.address,
     page: page,
     options: {
-      enabled: !!org.address,
+      enabled: !!organization.address,
     },
   })
 

src/components/Accounts/Details/Fees.tsx

@@ -10,31 +10,40 @@ import { TransactionTypeBadge } from '~components/Transactions/TransactionCard'
 import { generatePath, Link as RouterLink } from 'react-router-dom'
 import { RoutePath } from '~constants'
 import { ContentError, NoResultsError } from '~components/Layout/ContentError'
+import { useOrganization } from '@vocdoni/react-providers'
 
-const AccountFees = (org: { org: AccountData }) => {
+const AccountFees = () => {
   return (
     <PaginationProvider>
-      <AccountFeesTable {...org} />
+      <AccountFeesTable />
     </PaginationProvider>
   )
 }
 
-const AccountFeesTable = ({ org }: { org: AccountData }) => {
+const AccountFeesTable = () => {
   const { page } = usePagination()
   const { formatDistance } = useDateFns()
+  const { organization } = useOrganization()
+
+  if (!organization) return null
+
+  const feesCount = organization.feesCount ?? 0
 
   const { data, isLoading, isError, error } = useAccountFees({
     params: {
-      accountId: org.address,
+      accountId: organization.address,
       page,
     },
+    options: {
+      enabled: feesCount > 0,
+    },
   })
 
   if (isLoading) {
     return <LoadingCards />
   }
 
-  if (data?.pagination.totalItems === 0) {
+  if (data?.pagination.totalItems === 0 || feesCount === 0) {
     return <NoResultsError />
   }
 

src/components/Accounts/Details/Transfers.tsx

@@ -26,6 +26,7 @@ import { AccountData } from '@vocdoni/sdk'
 import { PaginationProvider, usePagination } from '~components/Pagination/PaginationProvider'
 import { ContentError, NoResultsError } from '~components/Layout/ContentError'
 import { Pagination } from '~components/Pagination/Pagination'
+import { useOrganization } from '@vocdoni/react-providers'
 
 const FromToIcon = ({ isIncoming, ...rest }: { isIncoming: boolean } & IconProps) => {
   const { t } = useTranslation()
@@ -48,37 +49,34 @@ const FromToIcon = ({ isIncoming, ...rest }: { isIncoming: boolean } & IconProps
   )
 }
 
-interface AccountTransfersProps {
-  txCount: number | undefined
-  org: AccountData
-}
-
-const AccountTransfers = (txProps: AccountTransfersProps) => {
+const AccountTransfers = () => {
   return (
     <PaginationProvider>
-      <AccountTransfersTable {...txProps} />
+      <AccountTransfersTable />
     </PaginationProvider>
   )
 }
 
-const AccountTransfersTable = ({ txCount, org }: AccountTransfersProps) => {
+const AccountTransfersTable = () => {
   const { page } = usePagination()
   const { formatDistance } = useDateFns()
+  const { t } = useTranslation()
+  const { organization } = useOrganization()
+
+  if (!organization) return null
+
+  const txCount = organization.transfersCount ?? 0
 
   const { data, isLoading, isError, error } = useAccountTransfers({
-    address: org.address,
+    address: organization.address,
     page: page,
     options: {
-      enabled: !!txCount && txCount > 0,
+      enabled: txCount > 0,
     },
   })
 
-  if (txCount && !(txCount > 0)) {
-    return (
-      <Text>
-        <Trans i18nKey={'account.transfers.no_transfers'}>No transfers yet!</Trans>
-      </Text>
-    )
+  if (txCount === 0) {
+    return <NoResultsError msg={t('account.transfers.no_transfers', { defaultValue: 'No transfers yet!' })} />
   }
 
   if (!txCount || isLoading) {
@@ -116,7 +114,7 @@ const AccountTransfersTable = ({ txCount, org }: AccountTransfersProps) => {
             </Thead>
             <Tbody>
               {data.transfers.map((transfer, i) => {
-                const isIncoming = transfer.to === org.address
+                const isIncoming = transfer.to === organization.address
                 let fromToAddress = isIncoming ? transfer.from : transfer.to
                 return (
                   <Tr key={i}>

src/components/Layout/ContentError.tsx

@@ -3,7 +3,12 @@ import { Trans, useTranslation } from 'react-i18next'
 
 export const NoResultsError = ({ msg }: { msg?: string }) => {
   const { t } = useTranslation()
-  return <Text>{msg ?? t('errors.no_results', { defaultValue: 'Looks like there are no results to show.' })}</Text>
+  return (
+    <Alert status='info'>
+      <AlertIcon />
+      {msg ?? t('errors.no_results', { defaultValue: 'Looks like there is nothing to show.' })}
+    </Alert>
+  )
 }
 
 export type ContentErrorType = Error | undefined | null | string

src/components/Process/Card.tsx

@@ -36,7 +36,7 @@ const ElectionCardSkeleton = (rest: CardProps) => {
 
   if (!election) return null
   if (election instanceof InvalidElectionType) {
-    return <InvalidElection />
+    return <InvalidElectionCard election={election} {...rest} />
   }
 
   return (
@@ -68,3 +68,19 @@ const ElectionCardSkeleton = (rest: CardProps) => {
     </LinkCard>
   )
 }
+
+const InvalidElectionCard = ({ election, ...rest }: { election: InvalidElectionType } & CardProps) => {
+  return (
+    <LinkCard
+      direction={'row'}
+      alignItems='center'
+      pl={4}
+      to={generatePath(RoutePath.Process, { pid: election.id, tab: null })}
+      {...rest}
+    >
+      <CardBody>
+        <InvalidElection />
+      </CardBody>
+    </LinkCard>
+  )
+}

src/components/Process/Detail.tsx

@@ -50,6 +50,7 @@ import { FallbackHeaderImg, RoutePath } from '~constants'
 import { useElectionKeys, useElectionVotesList } from '~queries/processes'
 import { ucfirst } from '~utils/strings'
 import { RouteParamsTabs } from '~components/Layout/RouteParamsTabs'
+import { NoResultsError } from '~components/Layout/ContentError'
 
 const Detail = () => {
   const { election } = useElection()
@@ -161,10 +162,7 @@ const Detail = () => {
             {election.description?.default ? (
               <ElectionDescription />
             ) : (
-              <Alert status='warning'>
-                <AlertIcon />
-                <Trans i18nKey={'process.no_description'}>No description set!</Trans>
-              </Alert>
+              <NoResultsError msg={t('process.no_description', { defaultValue: 'No description set!' })} />
             )}
           </TabPanel>
           <TabPanel>
@@ -221,13 +219,10 @@ const ElectionKeys = ({ electionId }: { electionId: string }) => {
 const EnvelopeExplorer = () => {
   const { election: e } = useElection()
   const election = e as PublishedElection
+  const { t } = useTranslation()
 
   if (!election || election.voteCount === 0) {
-    return (
-      <Text>
-        <Trans i18nKey={'election.no_votes_yet'}>No votes yet!</Trans>
-      </Text>
-    )
+    return <NoResultsError msg={t('election.no_votes_yet', { defaultValue: 'No votes yet!' })} />
   }
 
   return (

src/components/Transactions/TransactionList.tsx

@@ -121,12 +121,9 @@ const TransactionsListCards = ({
   error: Error | null
   height?: number
 }) => {
+  const { t } = useTranslation()
   if (!data || (data && data.transactions.length <= 0)) {
-    return (
-      <Text>
-        <Trans i18nKey={'blocks.no_txs_on_block'}>There are no transactions.</Trans>
-      </Text>
-    )
+    return <NoResultsError msg={t('blocks.no_txs_on_block', { defaultValue: 'There are no transactions' })} />
   }
 
   if (isLoading) {

src/components/Transactions/TxDetails/SpecificTxDetails.tsx

@@ -20,6 +20,7 @@ import { SmallAccountCard } from '~components/Accounts/Card'
 import { RoutePath } from '~constants'
 import { b64ToHex } from '~utils/objects'
 import { VotePackage } from '~components/Envelope/Detail'
+import { VotePackageType } from '@vocdoni/chakra-components'
 
 export const processIdGridItem = (processId: string, t: TFunction): GridItemProps => {
   return {
@@ -60,12 +61,14 @@ const organizationIdGridItem = (orgId: string, t: TFunction): GridItemProps => {
 
 const VoteTxDetails = ({ rawTx, votePackage, processId }: { rawTx: any } & VoteEnvelope) => {
   const { t } = useTranslation()
+  let showVoteSense = false
   if (votePackage) {
     // Decode the vote package from base64
     votePackage = atob(votePackage)
     // And copy it alsow to rawTx
     try {
       rawTx['tx']['vote']['votePackage'] = JSON.parse(votePackage)
+      showVoteSense = true
     } catch (e) {
       // If vote package cannot be parsed as JSON, it may be encrypted
       const msg = t('transactions.error_parsing_vote_package', { defaultValue: 'Vote package may be encrypted' })
@@ -85,7 +88,7 @@ const VoteTxDetails = ({ rawTx, votePackage, processId }: { rawTx: any } & VoteE
           },
         ]
       : []),
-    ...(votePackage
+    ...(showVoteSense
       ? [
           {
             label: t('transactions.vote_sense', { defaultValue: 'Vote sense' }),

src/i18n/locales/ca.json

@@ -83,7 +83,7 @@
   },
   "errors": {
     "content_error": "Sembla que el contingut al qual intentaves accedir ha generat un error.",
-    "no_results": "Sembla que no hi ha resultats per mostrar."
+    "no_results": "Sembla que no hi ha res a mostrar."
   },
   "featured": {
     "a_cutting_edge_voting_protocol": "Un protocol de votació avançat",

src/i18n/locales/en.json

@@ -80,7 +80,7 @@
   },
   "errors": {
     "content_error": "Looks like the content you were accessing threw an error.",
-    "no_results": "Looks like there are no results to show."
+    "no_results": "Looks like there is nothing to show."
   },
   "featured": {
     "a_cutting_edge_voting_protocol": "A cutting edge voting protocol",

src/i18n/locales/es.json

@@ -83,7 +83,7 @@
   },
   "errors": {
     "content_error": "Parece que el contenido al que accediste arrojó un error.",
-    "no_results": "Parece que no hay resultados para mostrar."
+    "no_results": "Parece que no hay nada para mostrar."
   },
   "featured": {
     "a_cutting_edge_voting_protocol": "Un protocolo de votación de vanguardia",