Simplify code and follow API changes on pagination engines

src/app/pages/ProposalDetailsPage/ProposalVotesCard.tsx

@@ -85,13 +85,15 @@ export const ProposalVotesView: FC = () => {
   const proposalId = parseInt(useParams().proposalId!, 10)
 
   const { clearFilters } = useVoteFiltering()
+  const results = useVotes(network, proposalId)
   const {
-    results,
     isLoading,
+    tablePaginationProps,
+    data: votes,
     hasNoResultsOnSelectedPage,
-    hasNoResultsBecauseOfFilters,
     hasNoResultsWhatsoever,
-  } = useVotes(network, proposalId)
+    hasNoResultsBecauseOfFilters,
+  } = results
 
   if (hasNoResultsOnSelectedPage) throw AppErrors.PageDoesNotExist
 
@@ -106,9 +108,9 @@ export const ProposalVotesView: FC = () => {
   return (
     <ProposalVotes
       isLoading={isLoading}
-      votes={results.data}
-      rowsNumber={results.tablePaginationProps.rowsPerPage}
-      pagination={results.tablePaginationProps}
+      votes={votes}
+      rowsNumber={tablePaginationProps.rowsPerPage}
+      pagination={tablePaginationProps}
     />
   )
 }

src/app/pages/ProposalDetailsPage/hooks.ts

@@ -17,6 +17,7 @@ import { useSearchParams } from 'react-router-dom'
 export type AllVotesData = List & {
   isLoading: boolean
   isError: boolean
+  isFetched: boolean
   loadedVotes: ExtendedVote[]
 }
 
@@ -48,7 +49,7 @@ export const useAllVotes = (network: Network, proposalId: number): AllVotesData
     isLoading: areValidatorsLoading,
     isError: haveValidatorsFailed,
   } = useValidatorMap(network)
-  const { isLoading, isError, data } = query
+  const { isLoading, isFetched, isError, data } = query
 
   const extendedVotes = (data?.data.votes || []).map(
     (vote, index): ExtendedVote => ({
@@ -62,6 +63,7 @@ export const useAllVotes = (network: Network, proposalId: number): AllVotesData
 
   return {
     isLoading,
+    isFetched,
     isError,
     loadedVotes: DEBUG_MODE
       ? extendedVotes.map(v => ({ ...v, vote: getRandomVoteFor(v.address) })) || []
@@ -149,36 +151,21 @@ export const useVoteFiltering = () => {
 }
 
 export const useVotes = (network: Network, proposalId: number) => {
-  const { hasFilters, wantedType, wantedNamePattern } = useVoteFiltering()
+  const { wantedType, wantedNamePattern } = useVoteFiltering()
   const typeFilter = getFilterForVoteType(wantedType)
   const nameFilter = getFilterForVoterNameFragment(wantedNamePattern)
 
   const pagination = useClientSidePagination<ExtendedVote, AllVotesData>({
     paramName: 'page',
     clientPageSize: NUMBER_OF_ITEMS_ON_SEPARATE_PAGE,
     serverPageSize: 1000,
-    filter: (vote: ExtendedVote) => typeFilter(vote) && nameFilter(vote),
+    filters: [typeFilter, nameFilter],
   })
 
   // Get all the votes
   const allVotes = useAllVotes(network, proposalId)
+  const { isLoading, isFetched } = allVotes
 
   // Get the section of the votes that we should display in the table
-  const results = pagination.getResults(allVotes)
-
-  const { isLoading } = allVotes
-  const isOnFirstPage = results.tablePaginationProps.selectedPage === 1
-  const hasData = !!results.data?.length
-  const hasNoResultsOnSelectedPage = !isLoading && !isOnFirstPage && !hasData
-  const hasNoResultsWhatsoever = !isLoading && !allVotes.total_count
-  const hasNoResultsBecauseOfFilters =
-    !isLoading && !hasData && isOnFirstPage && hasFilters && !hasNoResultsWhatsoever
-
-  return {
-    results,
-    isLoading,
-    hasNoResultsOnSelectedPage,
-    hasNoResultsBecauseOfFilters,
-    hasNoResultsWhatsoever,
-  }
+  return pagination.getResults(isLoading, isFetched, allVotes)
 }

src/app/utils/vote.ts

@@ -4,18 +4,18 @@ import { hasTextMatch } from '../components/HighlightedText/text-matching'
 export const getRandomVote = (): ProposalVoteValue =>
   [ProposalVoteValue.yes, ProposalVoteValue.no, ProposalVoteValue.abstain][Math.floor(Math.random() * 3)]
 
-const voteFilters: Record<VoteType, VoteFilter> = {
-  any: () => true,
+const voteFilters: Record<VoteType, VoteFilter | undefined> = {
+  any: undefined,
   yes: vote => vote.vote === ProposalVoteValue.yes,
   no: vote => vote.vote === ProposalVoteValue.no,
   abstain: vote => vote.vote === ProposalVoteValue.abstain,
 }
 
-export const getFilterForVoteType = (voteType: VoteType): VoteFilter => voteFilters[voteType]
+export const getFilterForVoteType = (voteType: VoteType) => voteFilters[voteType]
 
 export const getFilterForVoterNameFragment = (fragment: string | undefined) => {
   if (!fragment) {
-    return () => true
+    return
   }
   return (vote: ExtendedVote) => hasTextMatch(vote.validator?.media?.name, [fragment])
 }