From 7fcd7ba4ea0aeade825eba9aa37dc66bcf8f9036 Mon Sep 17 00:00:00 2001
From: Joanna Dyczka <joanna.dyczka@binarapps.com>
Date: Tue, 3 Sep 2024 15:42:24 +0200
Subject: [PATCH] [#1910] fix runtime error when navigating to GA details from
 Voted on by me tab

---
 CHANGELOG.md                                  |  1 +
 .../GovernanceActionDetailsCardVotes.tsx      | 19 ++----
 .../components/molecules/VoteActionForm.tsx   | 66 +++++++------------
 .../DashboardGovernanceActionDetails.tsx      |  8 +--
 .../organisms/GovernanceActionDetailsCard.tsx | 17 ++---
 .../src/hooks/forms/useVoteActionForm.tsx     | 46 ++++++++-----
 6 files changed, 66 insertions(+), 91 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f553d613e..a63725b6f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -28,6 +28,7 @@ changes.
 - Fix displaying wrongly formatted Governance Action ID [Issue 1866](https://github.com/IntersectMBO/govtool/issues/1866)
 - Fix displaying the proper Governance Action Details on renavigating between pages
 - Fix displaying protocol params Governance Action details when metadata validation fails [Issue 1889](https://github.com/IntersectMBO/govtool/issues/1889)
+- Fix runtime error when navigating to GA details from Voted on by me tab [Issue 1910](https://github.com/IntersectMBO/govtool/issues/1910)
 
 ### Changed
 
diff --git a/govtool/frontend/src/components/molecules/GovernanceActionDetailsCardVotes.tsx b/govtool/frontend/src/components/molecules/GovernanceActionDetailsCardVotes.tsx
index f5c23ea31..f56c6d8d9 100644
--- a/govtool/frontend/src/components/molecules/GovernanceActionDetailsCardVotes.tsx
+++ b/govtool/frontend/src/components/molecules/GovernanceActionDetailsCardVotes.tsx
@@ -4,18 +4,15 @@ import { Box } from "@mui/material";
 import { useScreenDimension } from "@hooks";
 import { VoteActionForm, VotesSubmitted } from "@molecules";
 import { useFeatureFlag } from "@/context";
-import { ProposalData } from "@/models";
+import { ProposalData, ProposalVote } from "@/models";
 
 type GovernanceActionCardVotesProps = {
   setIsVoteSubmitted: Dispatch<SetStateAction<boolean>>;
   isOneColumn: boolean;
-  isVoter?: boolean;
-  voteFromEP?: string;
-  voteUrlFromEP?: string;
-  voteDateFromEP?: string;
-  voteEpochNoFromEP?: number;
   isDashboard?: boolean;
   isInProgress?: boolean;
+  isVoter?: boolean;
+  vote?: ProposalVote;
   proposal: ProposalData;
 };
 
@@ -23,10 +20,7 @@ export const GovernanceActionDetailsCardVotes = ({
   setIsVoteSubmitted,
   isOneColumn,
   isVoter,
-  voteFromEP,
-  voteUrlFromEP,
-  voteDateFromEP,
-  voteEpochNoFromEP,
+  vote,
   isDashboard,
   isInProgress,
   proposal: {
@@ -63,10 +57,7 @@ export const GovernanceActionDetailsCardVotes = ({
           setIsVoteSubmitted={setIsVoteSubmitted}
           expiryDate={expiryDate}
           expiryEpochNo={expiryEpochNo}
-          voteFromEP={voteFromEP ? voteFromEP.toLowerCase() : undefined}
-          voteUrlFromEP={voteUrlFromEP}
-          voteDateFromEP={voteDateFromEP}
-          voteEpochNoFromEP={voteEpochNoFromEP}
+          previousVote={vote}
           dRepAbstainVotes={dRepAbstainVotes}
           dRepNoVotes={dRepNoVotes}
           dRepYesVotes={dRepYesVotes}
diff --git a/govtool/frontend/src/components/molecules/VoteActionForm.tsx b/govtool/frontend/src/components/molecules/VoteActionForm.tsx
index c0a854d5f..964edcf5c 100644
--- a/govtool/frontend/src/components/molecules/VoteActionForm.tsx
+++ b/govtool/frontend/src/components/molecules/VoteActionForm.tsx
@@ -1,5 +1,4 @@
 import { useState, useEffect, useMemo, Dispatch, SetStateAction } from "react";
-import { useLocation } from "react-router-dom";
 import { Box } from "@mui/material";
 import { Trans } from "react-i18next";
 
@@ -14,16 +13,14 @@ import {
   useGetVoteContextTextFromFile,
 } from "@hooks";
 import { formatDisplayDate } from "@utils";
+import { ProposalVote } from "@/models";
 
 type VoteActionFormProps = {
   setIsVoteSubmitted: Dispatch<SetStateAction<boolean>>;
   expiryDate: string | undefined;
   expiryEpochNo: number | undefined;
-  voteFromEP?: string;
-  voteUrlFromEP?: string;
-  voteDateFromEP?: string;
-  voteEpochNoFromEP?: number;
   isInProgress?: boolean;
+  previousVote?: ProposalVote;
   dRepYesVotes: number;
   dRepNoVotes: number;
   dRepAbstainVotes: number;
@@ -33,10 +30,7 @@ export const VoteActionForm = ({
   setIsVoteSubmitted,
   expiryDate,
   expiryEpochNo,
-  voteFromEP,
-  voteUrlFromEP,
-  voteDateFromEP,
-  voteEpochNoFromEP,
+  previousVote,
   dRepAbstainVotes,
   dRepNoVotes,
   dRepYesVotes,
@@ -50,14 +44,10 @@ export const VoteActionForm = ({
   const { voter } = useGetVoterInfo();
   const { voteContextText } = useGetVoteContextTextFromFile(voteContextUrl);
 
-  const { state } = useLocation();
   const { isMobile, screenWidth } = useScreenDimension();
   const { openModal } = useModal();
   const { t } = useTranslation();
 
-  const voteDate = state ? state.voteDate : voteDateFromEP;
-  const voteEpochNo = state ? state.voteEpochNo : voteEpochNoFromEP;
-
   const {
     areFormErrors,
     confirmVote,
@@ -66,7 +56,8 @@ export const VoteActionForm = ({
     registerInput,
     setValue,
     vote,
-  } = useVoteActionForm(voteContextHash, voteContextUrl);
+    canVote,
+  } = useVoteActionForm({ previousVote, voteContextHash, voteContextUrl });
 
   const setVoteContextData = (url: string, hash: string) => {
     setVoteContextUrl(url);
@@ -74,28 +65,23 @@ export const VoteActionForm = ({
   };
 
   useEffect(() => {
-    if (state && state.vote) {
-      setValue("vote", state.vote);
-      setIsVoteSubmitted(true);
-    } else if (voteFromEP) {
-      setValue("vote", voteFromEP);
+    if (previousVote?.vote) {
+      setValue("vote", previousVote.vote);
       setIsVoteSubmitted(true);
     }
-  }, [state, voteFromEP, setValue]);
+  }, [previousVote?.vote, setValue, setIsVoteSubmitted]);
 
   useEffect(() => {
-    if (state && state.voteUrl) {
-      setVoteContextUrl(state.voteUrl);
-    } else if (voteUrlFromEP) {
-      setVoteContextUrl(voteUrlFromEP);
+    if (previousVote?.url) {
+      setVoteContextUrl(previousVote.url);
     }
-  }, [voteUrlFromEP, state]);
+  }, [previousVote?.url, setVoteContextUrl]);
 
   const renderCancelButton = useMemo(
     () => (
       <Button
         data-testid="cancel-button"
-        onClick={() => setValue("vote", state.vote)}
+        onClick={() => setValue("vote", previousVote?.vote ?? "")}
         variant="outlined"
         size="extraLarge"
         sx={{
@@ -105,7 +91,7 @@ export const VoteActionForm = ({
         {t("cancel")}
       </Button>
     ),
-    [state],
+    [previousVote?.vote, setValue],
   );
 
   const renderChangeVoteButton = useMemo(
@@ -113,11 +99,7 @@ export const VoteActionForm = ({
       <Button
         data-testid="change-vote"
         onClick={confirmVote}
-        disabled={
-          (!areFormErrors && voteFromEP === vote) ||
-          areFormErrors ||
-          voteFromEP === vote
-        }
+        disabled={!canVote}
         isLoading={isVoteLoading}
         variant="contained"
         sx={{
@@ -143,7 +125,7 @@ export const VoteActionForm = ({
       }}
     >
       <Box flex={1} display="flex" flexDirection="column" alignItems="center">
-        {voteDate ? (
+        {previousVote?.date ? (
           <>
             <Typography
               variant="body1"
@@ -157,9 +139,9 @@ export const VoteActionForm = ({
               <Trans
                 i18nKey="govActions.castVote"
                 values={{
-                  vote: vote?.toLocaleUpperCase(),
-                  date: formatDisplayDate(voteDate),
-                  epoch: voteEpochNo,
+                  vote: previousVote?.vote.toLocaleUpperCase(),
+                  date: formatDisplayDate(previousVote.date),
+                  epoch: previousVote.epochNo,
                 }}
                 components={[<span style={{ fontWeight: 600 }} key="0" />]}
               />
@@ -238,7 +220,7 @@ export const VoteActionForm = ({
                   dRepYesVotes,
                   dRepNoVotes,
                   dRepAbstainVotes,
-                  vote: state && state.vote ? state.vote : voteFromEP,
+                  vote: previousVote?.vote,
                 },
               });
             }}
@@ -355,14 +337,13 @@ export const VoteActionForm = ({
           mb: 2,
           mt: 3,
           textAlign: "center",
-          visibility: state?.vote || voteFromEP ? "visible" : "hidden",
+          visibility: previousVote?.vote ? "visible" : "hidden",
         }}
         variant="caption"
       >
         {t("govActions.selectDifferentOption")}
       </Typography>
-      {(state?.vote && state?.vote !== vote) ||
-      (voteFromEP && voteFromEP !== vote) ? (
+      {previousVote?.vote && previousVote?.vote !== vote ? (
         <Box
           display="flex"
           flexDirection={isMobile ? "column" : "row"}
@@ -377,10 +358,7 @@ export const VoteActionForm = ({
           data-testid="vote-button"
           variant="contained"
           disabled={
-            !vote ||
-            state?.vote === vote ||
-            (areFormErrors && isDirty) ||
-            voteFromEP === vote
+            !vote || previousVote?.vote === vote || (areFormErrors && isDirty)
           }
           isLoading={isVoteLoading}
           onClick={confirmVote}
diff --git a/govtool/frontend/src/components/organisms/DashboardGovernanceActionDetails.tsx b/govtool/frontend/src/components/organisms/DashboardGovernanceActionDetails.tsx
index 8fcb99638..d7dd7be60 100644
--- a/govtool/frontend/src/components/organisms/DashboardGovernanceActionDetails.tsx
+++ b/govtool/frontend/src/components/organisms/DashboardGovernanceActionDetails.tsx
@@ -47,6 +47,7 @@ export const DashboardGovernanceActionDetails = () => {
     !state?.proposal || !state?.vote,
   );
   const proposal = (data ?? state)?.proposal;
+  const vote = (data ?? state)?.vote;
 
   return (
     <Box
@@ -79,7 +80,7 @@ export const DashboardGovernanceActionDetails = () => {
               : PATHS.dashboardGovernanceActions,
             {
               state: {
-                isVotedListOnLoad: !!(state && state.vote),
+                isVotedListOnLoad: !!vote,
               },
             },
           )
@@ -109,13 +110,10 @@ export const DashboardGovernanceActionDetails = () => {
         ) : proposal ? (
           <GovernanceActionDetailsCard
             proposal={proposal}
+            vote={vote}
             isVoter={
               voter?.isRegisteredAsDRep || voter?.isRegisteredAsSoleVoter
             }
-            voteFromEP={data?.vote?.vote}
-            voteUrlFromEP={data?.vote?.url}
-            voteDateFromEP={data?.vote?.date}
-            voteEpochNoFromEP={data?.vote?.epochNo}
             isDataMissing={proposal.metadataStatus ?? null}
             isInProgress={
               pendingTransaction.vote?.resourceId ===
diff --git a/govtool/frontend/src/components/organisms/GovernanceActionDetailsCard.tsx b/govtool/frontend/src/components/organisms/GovernanceActionDetailsCard.tsx
index ab25daf6c..48f3a5918 100644
--- a/govtool/frontend/src/components/organisms/GovernanceActionDetailsCard.tsx
+++ b/govtool/frontend/src/components/organisms/GovernanceActionDetailsCard.tsx
@@ -7,17 +7,14 @@ import {
   GovernanceActionDetailsCardVotes,
 } from "@molecules";
 import { GovernanceActionDetailsCardData } from "@organisms";
-import { MetadataValidationStatus, ProposalData } from "@models";
+import { MetadataValidationStatus, ProposalData, ProposalVote } from "@models";
 
 type GovernanceActionDetailsCardProps = {
   isDashboard?: boolean;
   isDataMissing: null | MetadataValidationStatus;
   isInProgress?: boolean;
   isVoter?: boolean;
-  voteDateFromEP?: string;
-  voteEpochNoFromEP?: number;
-  voteFromEP?: string;
-  voteUrlFromEP?: string;
+  vote?: ProposalVote;
   proposal: ProposalData;
 };
 
@@ -26,10 +23,7 @@ export const GovernanceActionDetailsCard = ({
   isDataMissing,
   isInProgress,
   isVoter,
-  voteDateFromEP,
-  voteEpochNoFromEP,
-  voteFromEP,
-  voteUrlFromEP,
+  vote,
   proposal,
 }: GovernanceActionDetailsCardProps) => {
   const [isVoteSubmitted, setIsVoteSubmitted] = useState<boolean>(false);
@@ -73,10 +67,7 @@ export const GovernanceActionDetailsCard = ({
       <GovernanceActionDetailsCardVotes
         setIsVoteSubmitted={setIsVoteSubmitted}
         isVoter={isVoter}
-        voteFromEP={voteFromEP}
-        voteUrlFromEP={voteUrlFromEP}
-        voteDateFromEP={voteDateFromEP}
-        voteEpochNoFromEP={voteEpochNoFromEP}
+        vote={vote}
         isDashboard={isDashboard}
         isOneColumn={isOneColumn}
         isInProgress={isInProgress}
diff --git a/govtool/frontend/src/hooks/forms/useVoteActionForm.tsx b/govtool/frontend/src/hooks/forms/useVoteActionForm.tsx
index b23a369f4..447204fdb 100644
--- a/govtool/frontend/src/hooks/forms/useVoteActionForm.tsx
+++ b/govtool/frontend/src/hooks/forms/useVoteActionForm.tsx
@@ -8,6 +8,7 @@ import * as Sentry from "@sentry/react";
 import { PATHS } from "@consts";
 import { useCardano, useSnackbar } from "@context";
 import { useWalletErrorModal } from "@hooks";
+import { ProposalVote } from "@/models";
 
 export interface VoteActionFormValues {
   vote: string;
@@ -29,17 +30,25 @@ export const useVoteActionFormController = () => {
   });
 };
 
-export const useVoteActionForm = (
-  voteContextHash?: string,
-  voteContextUrl?: string,
-) => {
+type Props = {
+  previousVote?: ProposalVote;
+  voteContextHash?: string;
+  voteContextUrl?: string;
+};
+
+export const useVoteActionForm = ({
+  previousVote,
+  voteContextHash,
+  voteContextUrl,
+}: Props) => {
   const [isLoading, setIsLoading] = useState(false);
   const { buildSignSubmitConwayCertTx, buildVote, isPendingTransaction } =
     useCardano();
   const { addSuccessAlert } = useSnackbar();
   const navigate = useNavigate();
-  const { state, hash } = useLocation();
-  const params = useParams();
+  const { hash } = useLocation();
+  const index = +hash.slice(1);
+  const { proposalId: txHash } = useParams();
   const openWalletErrorModal = useWalletErrorModal();
 
   const {
@@ -50,28 +59,34 @@ export const useVoteActionForm = (
     register: registerInput,
   } = useVoteActionFormController();
 
-  const watch = useWatch({
+  const { vote } = useWatch({
     control,
   });
 
   const areFormErrors = !!errors.vote;
 
+  const canVote =
+    txHash !== undefined &&
+    txHash !== null &&
+    index !== undefined &&
+    index !== null &&
+    !areFormErrors &&
+    previousVote?.vote !== vote;
+
   const confirmVote = useCallback(
     async (values: VoteActionFormValues) => {
-      setIsLoading(true);
+      if (!canVote) return;
 
-      const { vote } = values;
+      setIsLoading(true);
 
       const urlSubmitValue = voteContextUrl ?? "";
       const hashSubmitValue = voteContextHash ?? "";
-      const txHash = state?.txHash ?? params.proposalId;
-      const index = state?.index ?? hash.replace("#", "");
 
       try {
         const isPendingTx = isPendingTransaction();
         if (isPendingTx) return;
         const votingBuilder = await buildVote(
-          vote,
+          values.vote,
           txHash,
           index,
           urlSubmitValue,
@@ -86,7 +101,7 @@ export const useVoteActionForm = (
           addSuccessAlert("Vote submitted");
           navigate(PATHS.dashboardGovernanceActions, {
             state: {
-              isVotedListOnLoad: !!(state && state.vote),
+              isVotedListOnLoad: !!previousVote?.vote,
             },
           });
         }
@@ -101,16 +116,17 @@ export const useVoteActionForm = (
         setIsLoading(false);
       }
     },
-    [state, buildVote, buildSignSubmitConwayCertTx, params, hash],
+    [buildVote, buildSignSubmitConwayCertTx, txHash, index, canVote],
   );
 
   return {
     confirmVote: handleSubmit(confirmVote),
     setValue,
-    vote: watch.vote,
+    vote,
     registerInput,
     isDirty,
     areFormErrors,
     isVoteLoading: isLoading,
+    canVote,
   };
 };