Unify NoResultsError component

src/components/Accounts/Details/Elections.tsx

@@ -1,6 +1,6 @@
 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'
@@ -14,12 +14,10 @@ interface OrgComponentProps {
 }
 
 const AccountElections = ({ org }: OrgComponentProps) => {
+  const { t } = useTranslation()
+
   if (org.electionIndex === 0) {
-    return (
-      <Text>
-        <Trans i18nKey={'account.no_elections'}>No elections yet!</Trans>
-      </Text>
-    )
+    return <NoResultsError msg={t('account.no_elections', { defaultValue: 'No elections yet!' })} />
   }
 
   return (

src/components/Accounts/Details/Transfers.tsx

@@ -64,6 +64,7 @@ const AccountTransfers = (txProps: AccountTransfersProps) => {
 const AccountTransfersTable = ({ txCount, org }: AccountTransfersProps) => {
   const { page } = usePagination()
   const { formatDistance } = useDateFns()
+  const { t } = useTranslation()
 
   const { data, isLoading, isError, error } = useAccountTransfers({
     address: org.address,
@@ -74,11 +75,7 @@ const AccountTransfersTable = ({ txCount, org }: AccountTransfersProps) => {
   })
 
   if (txCount === 0) {
-    return (
-      <Text>
-        <Trans i18nKey={'account.transfers.no_transfers'}>No transfers yet!</Trans>
-      </Text>
-    )
+    return <NoResultsError msg={t('account.transfers.no_transfers', { defaultValue: 'No transfers yet!' })} />
   }
 
   if (!txCount || isLoading) {

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 are nothing to show.' })}
+    </Alert>
+  )
 }
 
 export type ContentErrorType = Error | undefined | null | string

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/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 are 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",