Refactor not found error

src/components/Blocks/BlocksList.tsx

@@ -5,13 +5,12 @@ import { generatePath, useNavigate } from 'react-router-dom'
 import { BlockCard } from '~components/Blocks/BlockCard'
 import { PopoverInputSearch } from '~components/Layout/Inputs'
 import { LoadingCards } from '~components/Layout/Loading'
-import LoadingError from '~components/Layout/LoadingError'
+import { ContentError, NoResultsError } from '~components/Layout/ContentError'
 import { RoutedPaginationProvider, useRoutedPagination } from '~components/Pagination/PaginationProvider'
 import { RoutedPagination } from '~components/Pagination/RoutedPagination'
 import { PaginationItemsPerPage, RefreshIntervalBlocks, RoutePath } from '~constants'
 import { useBlockList } from '~queries/blocks'
 import { useChainInfo } from '~queries/stats'
-import { retryUnlessNotFound } from '~utils/queries'
 
 export const BlocksFilter = () => {
   const { t } = useTranslation()
@@ -76,7 +75,6 @@ export const BlocksList = () => {
     },
     enabled: !!stats?.height,
     placeholderData: keepPreviousData,
-    retry: retryUnlessNotFound,
   })
 
   const isLoading = isLoadingStats || isLoadingBlocks
@@ -87,8 +85,12 @@ export const BlocksList = () => {
 
   const blocks = blocksResponse?.blocks
 
-  if (!blocks || blocks?.length === 0 || isError) {
-    return <LoadingError error={error} />
+  if (blocksResponse?.pagination.totalItems === 0) {
+    return <NoResultsError />
+  }
+
+  if (isError || !blocks) {
+    return <ContentError error={error} />
   }
 
   return (

src/components/Layout/ContentError.tsx

@@ -0,0 +1,19 @@
+import { Alert, AlertIcon, Code, Stack, Text } from '@chakra-ui/react'
+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>
+}
+
+export const ContentError = ({ error }: { error: Error | undefined | null | string }) => {
+  return (
+    <Stack spacing={4}>
+      <Alert status='warning'>
+        <AlertIcon />
+        <Trans i18nKey={'errors.content_error'}>Looks like the content you were accessing threw an error.</Trans>
+      </Alert>
+      {error && <Code>{typeof error === 'string' ? error : error.message}</Code>}
+    </Stack>
+  )
+}

src/components/Organizations/Details/Elections.tsx

@@ -7,8 +7,7 @@ import { RoutedPaginationProvider, useRoutedPagination } from '~components/Pagin
 import { ElectionCard } from '~components/Process/Card'
 import { RoutePath } from '~constants'
 import { useOrganizationElections } from '~queries/organizations'
-import { retryUnlessNotFound } from '~utils/queries'
-import LoadingError from '~components/Layout/LoadingError'
+import { ContentError, NoResultsError } from '~components/Layout/ContentError'
 
 interface OrgComponentProps {
   org: AccountData
@@ -38,16 +37,19 @@ const OrganizationElectionsList = ({ org }: OrgComponentProps) => {
     page: page,
     options: {
       enabled: !!org.address,
-      retry: retryUnlessNotFound,
     },
   })
 
   if (isLoading) {
     return <LoadingCards />
   }
 
-  if (!data || data?.elections.length === 0 || isError) {
-    return <LoadingError error={error} />
+  if (data?.pagination.totalItems === 0) {
+    return <NoResultsError />
+  }
+
+  if (isError || !data) {
+    return <ContentError error={error} />
   }
 
   return (

src/components/Organizations/Details/Fees.tsx

@@ -6,11 +6,10 @@ import { AccountData, TransactionType } from '@vocdoni/sdk'
 import { PaginationProvider, usePagination } from '~components/Pagination/PaginationProvider'
 import { Pagination } from '~components/Pagination/Pagination'
 import { useAccountFees } from '~queries/organizations'
-import { retryUnlessNotFound } from '~utils/queries'
-import LoadingError from '~components/Layout/LoadingError'
 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'
 
 const AccountFees = (org: { org: AccountData }) => {
   return (
@@ -29,17 +28,18 @@ const AccountFeesTable = ({ org }: { org: AccountData }) => {
       accountId: org.address,
       page,
     },
-    options: {
-      retry: retryUnlessNotFound,
-    },
   })
 
   if (isLoading) {
     return <LoadingCards />
   }
 
+  if (data?.pagination.totalItems === 0) {
+    return <NoResultsError />
+  }
+
   if (isError || !data) {
-    return <LoadingError error={error} />
+    return <ContentError error={error} />
   }
 
   if (!data.fees.length) {

src/components/Organizations/Details/Transfers.tsx

@@ -20,12 +20,11 @@ import { ReducedTextAndCopy } from '~components/Layout/CopyButton'
 import { LoadingCards } from '~components/Layout/Loading'
 import { RoutePath } from '~constants'
 import { useAccountTransfers } from '~queries/organizations'
-import { retryUnlessNotFound } from '~utils/queries'
 import { useDateFns } from '~i18n/use-date-fns'
 import { BiLogInCircle, BiLogOutCircle } from 'react-icons/bi'
 import { AccountData } from '@vocdoni/sdk'
 import { PaginationProvider, usePagination } from '~components/Pagination/PaginationProvider'
-import LoadingError from '~components/Layout/LoadingError'
+import { ContentError, NoResultsError } from '~components/Layout/ContentError'
 import { Pagination } from '~components/Pagination/Pagination'
 
 const FromToIcon = ({ isIncoming, ...rest }: { isIncoming: boolean } & IconProps) => {
@@ -71,7 +70,6 @@ const AccountTransfersTable = ({ txCount, org }: AccountTransfersProps) => {
     page: page,
     options: {
       enabled: !!txCount && txCount > 0,
-      retry: retryUnlessNotFound,
     },
   })
 
@@ -87,8 +85,12 @@ const AccountTransfersTable = ({ txCount, org }: AccountTransfersProps) => {
     return <LoadingCards />
   }
 
+  if (data?.pagination.totalItems === 0) {
+    return <NoResultsError />
+  }
+
   if (isError || !data) {
-    return <LoadingError error={error} />
+    return <ContentError error={error} />
   }
 
   return (

src/components/Organizations/List.tsx

@@ -3,13 +3,12 @@ import { useTranslation } from 'react-i18next'
 import { generatePath, useNavigate, useParams } from 'react-router-dom'
 import { InputSearch } from '~components/Layout/Inputs'
 import { LoadingCards } from '~components/Layout/Loading'
-import LoadingError from '~components/Layout/LoadingError'
 import { OrganizationCard } from '~components/Organizations/Card'
 import { RoutedPaginationProvider, useRoutedPagination } from '~components/Pagination/PaginationProvider'
 import { RoutedPagination } from '~components/Pagination/RoutedPagination'
 import { RoutePath } from '~constants'
 import { useOrganizationCount, useOrganizationList } from '~queries/organizations'
-import { retryUnlessNotFound } from '~utils/queries'
+import { ContentError, NoResultsError } from '~components/Layout/ContentError'
 
 export const OrganizationsFilter = () => {
   const { t } = useTranslation()
@@ -54,7 +53,6 @@ export const OrganizationsList = () => {
       organizationId: query,
     },
     placeholderData: keepPreviousData,
-    retry: retryUnlessNotFound,
   })
 
   const isLoading = isLoadingCount || isLoadingOrgs
@@ -63,8 +61,12 @@ export const OrganizationsList = () => {
     return <LoadingCards skeletonCircle />
   }
 
-  if (!orgs || orgs?.organizations.length === 0 || isError) {
-    return <LoadingError error={error} />
+  if (orgs?.pagination.totalItems === 0) {
+    return <NoResultsError />
+  }
+
+  if (!orgs || isError) {
+    return <ContentError error={error} />
   }
 
   return (

src/components/Process/ProcessList.tsx

@@ -13,14 +13,13 @@ import { FetchElectionsParameters } from '@vocdoni/sdk'
 import { Trans, useTranslation } from 'react-i18next'
 import { InputSearch } from '~components/Layout/Inputs'
 import { LoadingCards } from '~components/Layout/Loading'
-import LoadingError from '~components/Layout/LoadingError'
+import { ContentError, NoResultsError } from '~components/Layout/ContentError'
 import { RoutedPaginationProvider, useRoutedPagination } from '~components/Pagination/PaginationProvider'
 import { RoutedPagination } from '~components/Pagination/RoutedPagination'
 import { RoutePath } from '~constants'
 import { useProcessList } from '~queries/processes'
 import useQueryParams from '~src/router/use-query-params'
 import { isEmpty } from '~utils/objects'
-import { isNotFoundError, retryUnlessNotFound } from '~utils/queries'
 import { ElectionCard } from './Card'
 import { LuListFilter } from 'react-icons/lu'
 
@@ -151,19 +150,18 @@ const ProcessList = () => {
     },
     refetchOnWindowFocus: false,
     placeholderData: keepPreviousData,
-    retry: retryUnlessNotFound,
   })
 
   if (isLoading || (isFetching && !isEmpty(processFilters))) {
     return <LoadingCards spacing={4} pl={4} skeletonHeight={4} />
   }
 
-  if (!data || data?.elections.length === 0 || isError) {
-    let _error: string | Error | null = error
-    if (isNotFoundError(error) && !isEmpty(processFilters)) {
-      _error = t('filters.filters_not_found', { defaultValue: 'No results found for this filters' })
-    }
-    return <LoadingError error={_error} />
+  if (data?.pagination.totalItems === 0) {
+    return <NoResultsError />
+  }
+
+  if (!data || isError) {
+    return <ContentError error={error} />
   }
 
   return (

src/components/Transactions/TransactionList.tsx

@@ -5,16 +5,15 @@ import { Trans, useTranslation } from 'react-i18next'
 import { generatePath, useNavigate } from 'react-router-dom'
 import { PopoverInputSearch } from '~components/Layout/Inputs'
 import { LoadingCards } from '~components/Layout/Loading'
-import LoadingError from '~components/Layout/LoadingError'
 import { RoutedPaginationProvider, useRoutedPagination } from '~components/Pagination/PaginationProvider'
 import { RoutedPagination } from '~components/Pagination/RoutedPagination'
 import { TransactionCard } from '~components/Transactions/TransactionCard'
 import { PaginationItemsPerPage, RoutePath } from '~constants'
 import { useBlockTransactions } from '~queries/blocks'
 import { useTransactionList, useTransactionsCount } from '~queries/transactions'
-import { retryUnlessNotFound } from '~utils/queries'
 import { useCallback, useState } from 'react'
 import { isValidHash } from '~utils/strings'
+import { ContentError, NoResultsError } from '~components/Layout/ContentError'
 
 export const TransactionFilter = () => {
   const { t } = useTranslation()
@@ -73,7 +72,6 @@ const TransactionsList = () => {
       page,
     },
     placeholderData: keepPreviousData,
-    retry: retryUnlessNotFound,
   })
 
   const isLoading = isLoadingCount || isLoadingTx
@@ -102,7 +100,6 @@ const TransactionsListByBlock = ({ blockHeight, totalTxs }: ITxListByBlock) => {
     blockHeight,
     page: currentPage,
     placeholderData: keepPreviousData,
-    retry: retryUnlessNotFound,
     enabled: totalTxs > 0,
   })
 
@@ -132,22 +129,28 @@ const TransactionsListCards = ({
     )
   }
 
+  if (isLoading) {
+    return <LoadingCards spacing={4} />
+  }
+
+  if (data?.pagination.totalItems === 0) {
+    return <NoResultsError />
+  }
+
+  if (isError || !data) {
+    return <ContentError error={error} />
+  }
+
   return (
     <>
-      {isLoading && <LoadingCards spacing={4} />}
-      {!data || data?.transactions.length === 0 || (isError && <LoadingError error={error} />)}
-      {data && data.transactions.length > 0 && (
-        <>
-          {data.transactions.map((tx, i) => (
-            <TransactionCard
-              key={i}
-              {...tx}
-              blockHeight={height ?? tx.blockHeight} // If is IBlockTransactionsResponse the block height is not on tx info
-            />
-          ))}
-          <RoutedPagination pagination={data.pagination} />
-        </>
-      )}
+      {data.transactions.map((tx, i) => (
+        <TransactionCard
+          key={i}
+          {...tx}
+          blockHeight={height ?? tx.blockHeight} // If is IBlockTransactionsResponse the block height is not on tx info
+        />
+      ))}
+      <RoutedPagination pagination={data.pagination} />
     </>
   )
 }