Backing out unwanted changes

Author: aaboyle878

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

@@ -8,6 +8,7 @@ import {
   useTranslation,
 } from "@hooks";
 import { ValidatedGovernanceVotedOnCard } from "@organisms";
+import { getFullGovActionId } from "@utils";
 
 type DashboardGovernanceActionsVotedOnProps = {
   searchPhrase?: string;
@@ -24,14 +25,41 @@ export const DashboardGovernanceActionsVotedOn = ({
 
   const {
     data: votes,
-    areDRepVotesLoading
+    areDRepVotesLoading,
+    isFetching,
   } = useGetDRepVotesQuery(chosenFilters, chosenSorting, searchPhrase);
 
-  const proposals = useMemo(() =>
-          votes.flatMap((entry) => entry.actions),
-      [votes, searchPhrase, pendingTransaction.vote]);
+  // 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);
 
-  return areDRepVotesLoading ? (
+    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 ? (
     <Box py={4} display="flex" justifyContent="center">
       <CircularProgress />
     </Box>
@@ -41,7 +69,7 @@ export const DashboardGovernanceActionsVotedOn = ({
         <Typography py={4} fontWeight="300">
           {t("govActions.youHaventVotedYet")}
         </Typography>
-      ) : !proposals?.length ? (
+      ) : !filteredData?.length ? (
         <Typography py={4} fontWeight="300">
           {t("govActions.noResultsForTheSearch")}
         </Typography>
@@ -53,7 +81,7 @@ export const DashboardGovernanceActionsVotedOn = ({
             screenWidth < 420 ? "290px" : isMobile ? "324px" : "350px"
           }, 1fr))`}
         >
-          {proposals.map((item) => (
+          {filteredData.map((item) => (
             <Box pb={4.25} key={item.proposal.txHash + item.proposal.index}>
               <ValidatedGovernanceVotedOnCard
                 votedProposal={item}

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

@@ -4,7 +4,9 @@ import { Typography } from "@atoms";
 import { useCardano, useDataActionsBar } from "@context";
 import {
   useFetchNextPageDetector,
+  useGetDRepVotesQuery,
   useGetProposalsInfiniteQuery,
+  useGetVoterInfo,
   useSaveScrollPosition,
   useScreenDimension,
   useTranslation,
@@ -24,6 +26,7 @@ export const GovernanceActionsToVote = ({
   const { isMobile, screenWidth } = useScreenDimension();
   const { debouncedSearchText, ...dataActionsBarProps } = useDataActionsBar();
   const { chosenSorting, chosenFilters } = dataActionsBarProps;
+  const { voter } = useGetVoterInfo();
   const { t } = useTranslation();
 
   const {
@@ -46,21 +49,59 @@ export const GovernanceActionsToVote = ({
     proposalsHaveNextPage,
   );
 
+  const {
+    data: votes,
+    areDRepVotesLoading,
+    isFetching: isFetchingVotes,
+  } = useGetDRepVotesQuery(chosenFilters, chosenSorting, debouncedSearchText);
+
   const saveScrollPosition = useSaveScrollPosition(
     isProposalsLoading,
     isProposalsFetching,
   );
 
-  const mappedProposals = useMemo(
+  const mappedData = useMemo(
     () => removeDuplicatedProposals(proposals),
-    [proposals, isProposalsFetchingNextPage],
+    [proposals, voter?.isRegisteredAsDRep, 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 (
     <>
-      {!mappedProposals ||
+      {!filteredProposals ||
       isEnableLoading ||
-      isProposalsLoading ? (
+      isProposalsLoading ||
+      areDRepVotesLoading ||
+      isFetchingVotes ? (
         <Box
           sx={{
             alignItems: "center",
@@ -72,7 +113,7 @@ export const GovernanceActionsToVote = ({
         >
           <CircularProgress />
         </Box>
-      ) : !mappedProposals?.length ? (
+      ) : !filteredProposals?.length ? (
         <Typography fontWeight={300} sx={{ py: 4 }}>
           {t("govActions.noResultsForTheSearch")}
         </Typography>
@@ -84,7 +125,7 @@ export const GovernanceActionsToVote = ({
             screenWidth < 420 ? "290px" : isMobile ? "324px" : "350px"
           }, 1fr))`}
         >
-          {mappedProposals.map((item) => (
+          {filteredProposals.map((item) => (
             <Box pb={4.25} key={item.txHash + item.index}>
               <ValidatedGovernanceActionCard
                 {...item}

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

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