Refactor live voting proposal/votes filtering - frontend

Author: Adam Tomaszczyk

govtool/frontend/src/components/organisms/DashboardGovernanceActionsVotedOn.tsx

@@ -8,7 +8,6 @@ import {
   useTranslation,
 } from "@hooks";
 import { ValidatedGovernanceVotedOnCard } from "@organisms";
-import { getFullGovActionId } from "@utils";
 
 type DashboardGovernanceActionsVotedOnProps = {
   searchPhrase?: string;
@@ -25,41 +24,14 @@ export const DashboardGovernanceActionsVotedOn = ({
 
   const {
     data: votes,
-    areDRepVotesLoading,
-    isFetching,
+    areDRepVotesLoading
   } = useGetDRepVotesQuery(chosenFilters, chosenSorting, searchPhrase);
 
-  // TODO: Filtering here is some kind of craziness. It should be done on the backend.
-  const filteredData = useMemo(() => {
-    if (!votes?.length) return [];
-    if (!searchPhrase) return votes.flatMap((entry) => entry.actions);
+  const proposals = useMemo(() =>
+          votes.flatMap((entry) => entry.actions),
+      [votes, searchPhrase, pendingTransaction.vote]);
 
-    const lowerSearch = searchPhrase.toLowerCase();
-
-    return votes.flatMap((entry) =>
-      entry.actions.filter((action) => {
-        const hash = getFullGovActionId(
-          action.proposal.txHash,
-          action.proposal.index,
-        ).toLowerCase();
-
-        const title = action.proposal.title?.toLowerCase() || "";
-        const motivation = action.proposal.motivation?.toLowerCase() || "";
-        const rationale = action.proposal.rationale?.toLowerCase() || "";
-        const abstract = action.proposal.abstract?.toLowerCase() || "";
-
-        return (
-          hash.includes(lowerSearch) ||
-          title.includes(lowerSearch) ||
-          motivation.includes(lowerSearch) ||
-          rationale.includes(lowerSearch) ||
-          abstract.includes(lowerSearch)
-        );
-      }),
-    );
-  }, [votes, searchPhrase, pendingTransaction.vote]);
-
-  return areDRepVotesLoading || isFetching ? (
+  return areDRepVotesLoading ? (
     <Box py={4} display="flex" justifyContent="center">
       <CircularProgress />
     </Box>
@@ -69,7 +41,7 @@ export const DashboardGovernanceActionsVotedOn = ({
         <Typography py={4} fontWeight="300">
           {t("govActions.youHaventVotedYet")}
         </Typography>
-      ) : !filteredData?.length ? (
+      ) : !proposals?.length ? (
         <Typography py={4} fontWeight="300">
           {t("govActions.noResultsForTheSearch")}
         </Typography>
@@ -81,7 +53,7 @@ export const DashboardGovernanceActionsVotedOn = ({
             screenWidth < 420 ? "290px" : isMobile ? "324px" : "350px"
           }, 1fr))`}
         >
-          {filteredData.map((item) => (
+          {proposals.map((item) => (
             <Box pb={4.25} key={item.proposal.txHash + item.proposal.index}>
               <ValidatedGovernanceVotedOnCard
                 votedProposal={item}

govtool/frontend/src/components/organisms/GovernanceActionsToVote.tsx

@@ -4,9 +4,7 @@ import { Typography } from "@atoms";
 import { useCardano, useDataActionsBar } from "@context";
 import {
   useFetchNextPageDetector,
-  useGetDRepVotesQuery,
   useGetProposalsInfiniteQuery,
-  useGetVoterInfo,
   useSaveScrollPosition,
   useScreenDimension,
   useTranslation,
@@ -26,7 +24,6 @@ export const GovernanceActionsToVote = ({
   const { isMobile, screenWidth } = useScreenDimension();
   const { debouncedSearchText, ...dataActionsBarProps } = useDataActionsBar();
   const { chosenSorting, chosenFilters } = dataActionsBarProps;
-  const { voter } = useGetVoterInfo();
   const { t } = useTranslation();
 
   const {
@@ -49,59 +46,21 @@ export const GovernanceActionsToVote = ({
     proposalsHaveNextPage,
   );
 
-  const {
-    data: votes,
-    areDRepVotesLoading,
-    isFetching: isFetchingVotes,
-  } = useGetDRepVotesQuery(chosenFilters, chosenSorting, debouncedSearchText);
-
   const saveScrollPosition = useSaveScrollPosition(
     isProposalsLoading,
     isProposalsFetching,
   );
 
-  const mappedData = useMemo(
+  const mappedProposals = useMemo(
     () => removeDuplicatedProposals(proposals),
-    [proposals, voter?.isRegisteredAsDRep, isProposalsFetchingNextPage],
+    [proposals, isProposalsFetchingNextPage],
   );
 
-  // TODO: Filtering here is some kind of craziness. It should be done on the backend.
-  const filteredProposals = useMemo(() => {
-    const list = mappedData ?? [];
-    if (!votes?.length) return list;
-
-    const proposalsFromVotes = votes
-      .flatMap((v) => v?.actions ?? [])
-      .map((a) => a?.proposal)
-      .filter(Boolean);
-
-    const votedKeys = new Set(
-      proposalsFromVotes
-        .map((p) => ({
-          id: p?.id ?? p?.id,
-          tx: p?.txHash ?? p?.txHash,
-        }))
-        .filter(({ id, tx }) => Boolean(id && tx))
-        .map(({ id, tx }) => `${id}:${tx}`),
-    );
-
-    if (votedKeys.size === 0) return list;
-
-    return list.filter((p) => {
-      const id = p?.id ?? p?.id;
-      const tx = p?.txHash ?? p?.txHash;
-      if (!id || !tx) return true;
-      return !votedKeys.has(`${id}:${tx}`);
-    });
-  }, [mappedData, voter?.isRegisteredAsDRep, isProposalsFetchingNextPage]);
-
   return (
     <>
-      {!filteredProposals ||
+      {!mappedProposals ||
       isEnableLoading ||
-      isProposalsLoading ||
-      areDRepVotesLoading ||
-      isFetchingVotes ? (
+      isProposalsLoading ? (
         <Box
           sx={{
             alignItems: "center",
@@ -113,7 +72,7 @@ export const GovernanceActionsToVote = ({
         >
           <CircularProgress />
         </Box>
-      ) : !filteredProposals?.length ? (
+      ) : !mappedProposals?.length ? (
         <Typography fontWeight={300} sx={{ py: 4 }}>
           {t("govActions.noResultsForTheSearch")}
         </Typography>
@@ -125,7 +84,7 @@ export const GovernanceActionsToVote = ({
             screenWidth < 420 ? "290px" : isMobile ? "324px" : "350px"
           }, 1fr))`}
         >
-          {filteredProposals.map((item) => (
+          {mappedProposals.map((item) => (
             <Box pb={4.25} key={item.txHash + item.index}>
               <ValidatedGovernanceActionCard
                 {...item}

govtool/frontend/src/hooks/queries/useGetDRepVotesQuery.ts

@@ -32,6 +32,7 @@ export const useGetDRepVotesQuery = (
     enabled: !!dRepID,
     refetchOnWindowFocus: true,
     keepPreviousData: true,
+    refetchInterval: 20000,
   });
 
   const groupedByType = data?.reduce((groups, item) => {