diff --git a/src/app/pages/ProposalDetailsPage/ProposalVotesCard.tsx b/src/app/pages/ProposalDetailsPage/ProposalVotesCard.tsx index e7c7d0cb47..9a0f5abcdc 100644 --- a/src/app/pages/ProposalDetailsPage/ProposalVotesCard.tsx +++ b/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 ( ) } diff --git a/src/app/pages/ProposalDetailsPage/hooks.ts b/src/app/pages/ProposalDetailsPage/hooks.ts index 3fe1ac957e..f94024bc9a 100644 --- a/src/app/pages/ProposalDetailsPage/hooks.ts +++ b/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,7 +151,7 @@ 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) @@ -157,28 +159,13 @@ export const useVotes = (network: Network, proposalId: number) => { 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) } diff --git a/src/app/utils/vote.ts b/src/app/utils/vote.ts index 7ed042dcbe..982a0d4ab4 100644 --- a/src/app/utils/vote.ts +++ b/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 = { - any: () => true, +const voteFilters: Record = { + 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]) }