Unify and Enhance Search Experience in Live Voting Section #4008

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

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useMemo } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { Box, CircularProgress, Tab, Tabs, styled } from "@mui/material";
 import { useLocation, useNavigate } from "react-router-dom";
 
@@ -9,13 +9,7 @@ import {
   PDF_PATHS,
 } from "@consts";
 import { useCardano, useDataActionsBar, useFeatureFlag } from "@context";
-import {
-  useGetDRepVotesQuery,
-  useGetProposalsQuery,
-  useGetVoterInfo,
-  useScreenDimension,
-  useTranslation,
-} from "@hooks";
+import { useGetVoterInfo, useScreenDimension, useTranslation } from "@hooks";
 import { DataActionsBar } from "@molecules";
 import {
   GovernanceActionsToVote,
@@ -29,10 +23,6 @@ type TabPanelProps = {
   value: number;
 };
 
-const defaultCategories = GOVERNANCE_ACTIONS_FILTERS.map(
-  (category) => category.key,
-);
-
 const CustomTabPanel = (props: TabPanelProps) => {
   const { children, value, index } = props;
 
@@ -53,6 +43,8 @@ const CustomTabPanel = (props: TabPanelProps) => {
   );
 };
 
+const temporaryProposeButtonRemove: boolean = true;
+
 type StyledTabProps = {
   label: string;
 };
@@ -71,60 +63,16 @@ const StyledTab = styled((props: StyledTabProps) => (
 }));
 
 export const DashboardGovernanceActions = () => {
-  const { debouncedSearchText, isAdjusting, ...dataActionsBarProps } =
+  const { debouncedSearchText, ...dataActionsBarProps } =
     useDataActionsBar();
-  const { chosenFilters, chosenSorting } = dataActionsBarProps;
   const { voter } = useGetVoterInfo();
   const { isMobile } = useScreenDimension();
   const { t } = useTranslation();
   const { isEnableLoading } = useCardano();
   const { isProposalDiscussionForumEnabled } = useFeatureFlag();
   const navigate = useNavigate();
-
-  const queryFilters =
-    chosenFilters.length > 0 ? chosenFilters : defaultCategories;
-
-  const { proposals, isProposalsLoading } = useGetProposalsQuery({
-    filters: queryFilters,
-    sorting: chosenSorting,
-    searchPhrase: debouncedSearchText,
-    enabled: !isAdjusting,
-  });
-  const { data: votes, areDRepVotesLoading } = useGetDRepVotesQuery(
-    queryFilters,
-    chosenSorting,
-    debouncedSearchText,
-  );
-
-  // White Magic :)
-  const shouldFilter =
-    voter?.isRegisteredAsDRep || voter?.isRegisteredAsSoleVoter;
-
-  const filteredProposals = useMemo(() => {
-    if (!shouldFilter || !proposals || !votes) return proposals;
-
-    return proposals
-      .map((proposalCategory) => {
-        const filteredActions = proposalCategory.actions.filter((action) => {
-          const hasVote = votes.some((voteCategory) =>
-            voteCategory.actions.some(
-              (voteAction) =>
-                voteAction.proposal.txHash === action.txHash &&
-                voteAction.proposal.index === action.index,
-            ),
-          );
-          return !hasVote;
-        });
-
-        return {
-          ...proposalCategory,
-          actions: filteredActions,
-        };
-      })
-      .filter((category) => category.actions.length > 0);
-  }, [proposals, votes, shouldFilter]);
-
   const { state } = useLocation();
+
   const [content, setContent] = useState<number>(
     state?.isVotedListOnLoad ? 1 : 0,
   );
@@ -160,7 +108,7 @@ export const DashboardGovernanceActions = () => {
           filtersTitle={t("govActions.filterTitle")}
           sortOptions={GOVERNANCE_ACTIONS_SORTING}
         />
-        {!proposals || !voter || isEnableLoading || isProposalsLoading ? (
+        {!voter || isEnableLoading ? (
           <Box
             alignItems="center"
             display="flex"
@@ -207,7 +155,10 @@ export const DashboardGovernanceActions = () => {
                   data-testid="proposal-discussion-link"
                   onClick={onClickPropose}
                   sx={{
-                    display: isMobile ? "none" : "block",
+                    display:
+                      isMobile || temporaryProposeButtonRemove
+                        ? "none"
+                        : "block",
                     ml: "auto",
                   }}
                 >
@@ -218,19 +169,11 @@ export const DashboardGovernanceActions = () => {
 
             <Box height={isMobile ? 24 : 60} />
             <CustomTabPanel value={content} index={0}>
-              <GovernanceActionsToVote
-                filters={chosenFilters}
-                onDashboard
-                searchPhrase={debouncedSearchText}
-                sorting={chosenSorting}
-                proposals={filteredProposals}
-              />
+              <GovernanceActionsToVote onDashboard />
             </CustomTabPanel>
             <CustomTabPanel value={content} index={1}>
               <DashboardGovernanceActionsVotedOn
                 searchPhrase={debouncedSearchText}
-                votes={votes}
-                areDRepVotesLoading={areDRepVotesLoading}
               />
             </CustomTabPanel>
           </>

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

@@ -1,67 +1,65 @@
 import { useMemo } from "react";
 import { Box, Typography, CircularProgress } from "@mui/material";
 
-import { useCardano } from "@context";
-import { useScreenDimension, useTranslation } from "@hooks";
-import { Slider, ValidatedGovernanceVotedOnCard } from "@organisms";
-import { getFullGovActionId, getProposalTypeLabel } from "@utils";
-import { VotedProposal } from "@/models";
+import { useCardano, useDataActionsBar } from "@context";
+import {
+  useGetDRepVotesQuery,
+  useScreenDimension,
+  useTranslation,
+} from "@hooks";
+import { ValidatedGovernanceVotedOnCard } from "@organisms";
+import { getFullGovActionId } from "@utils";
 
 type DashboardGovernanceActionsVotedOnProps = {
   searchPhrase?: string;
-  votes: {
-    title: string;
-    actions: VotedProposal[];
-  }[];
-  areDRepVotesLoading: boolean;
 };
 
 export const DashboardGovernanceActionsVotedOn = ({
   searchPhrase,
-  votes,
-  areDRepVotesLoading,
 }: DashboardGovernanceActionsVotedOnProps) => {
-  const { isMobile } = useScreenDimension();
+  const { isMobile, screenWidth } = useScreenDimension();
   const { pendingTransaction } = useCardano();
   const { t } = useTranslation();
+  const { ...dataActionsBarProps } = useDataActionsBar();
+  const { chosenSorting, chosenFilters } = dataActionsBarProps;
 
-  // TODO: Filtering here is some kind of craziness. It should be done on the backend.
+  const {
+    data: votes,
+    areDRepVotesLoading,
+    isFetching,
+  } = 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;
+    if (!searchPhrase) return votes.flatMap((entry) => entry.actions);
+
     const lowerSearch = searchPhrase.toLowerCase();
-    return votes
-      .map((entry) => {
-        const filteredActions = 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 votes.flatMap((entry) =>
+      entry.actions.filter((action) => {
+        const hash = getFullGovActionId(
+          action.proposal.txHash,
+          action.proposal.index,
+        ).toLowerCase();
 
-          return (
-            hash.includes(lowerSearch) ||
-            title.includes(lowerSearch) ||
-            motivation.includes(lowerSearch) ||
-            rationale.includes(lowerSearch) ||
-            abstract.includes(lowerSearch)
-          );
-        });
+        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 {
-          ...entry,
-          actions: filteredActions,
-        };
-      })
-      .filter((entry) => entry.actions.length > 0);
+        return (
+          hash.includes(lowerSearch) ||
+          title.includes(lowerSearch) ||
+          motivation.includes(lowerSearch) ||
+          rationale.includes(lowerSearch) ||
+          abstract.includes(lowerSearch)
+        );
+      }),
+    );
   }, [votes, searchPhrase, pendingTransaction.vote]);
 
-  return areDRepVotesLoading ? (
+  return areDRepVotesLoading || isFetching ? (
     <Box py={4} display="flex" justifyContent="center">
       <CircularProgress />
     </Box>
@@ -76,36 +74,25 @@ export const DashboardGovernanceActionsVotedOn = ({
           {t("govActions.noResultsForTheSearch")}
         </Typography>
       ) : (
-        <>
-          {filteredData?.map((item) => (
-            <div key={item.title}>
-              <Slider
-                key={item.title}
-                title={getProposalTypeLabel(item.title)}
-                navigateKey={item.title}
-                searchPhrase={searchPhrase}
-                dataLength={item.actions.slice(0, 6)?.length}
-                onDashboard
-                data={item.actions.map((action) => (
-                  <div
-                    className="keen-slider__slide"
-                    key={`${action?.proposal.id}${action.vote?.vote}`}
-                    style={{ overflow: "visible", width: "auto" }}
-                  >
-                    <ValidatedGovernanceVotedOnCard
-                      votedProposal={action}
-                      inProgress={
-                        pendingTransaction.vote?.resourceId ===
-                        action.proposal.txHash + action.proposal.index
-                      }
-                    />
-                  </div>
-                ))}
+        <Box
+          columnGap="20px"
+          display="grid"
+          gridTemplateColumns={`repeat(auto-fit, minmax(${
+            screenWidth < 420 ? "290px" : isMobile ? "324px" : "350px"
+          }, 1fr))`}
+        >
+          {filteredData.map((item) => (
+            <Box pb={4.25} key={item.proposal.txHash + item.proposal.index}>
+              <ValidatedGovernanceVotedOnCard
+                votedProposal={item}
+                inProgress={
+                  pendingTransaction.vote?.resourceId ===
+                  `${item.proposal.txHash ?? ""}${item.proposal.index ?? ""}`
+                }
               />
-              <Box height={isMobile ? 50 : 72} />
-            </div>
+            </Box>
           ))}
-        </>
+        </Box>
       )}
     </>
   );