[#1910] fix error when navigating to GA details from Voted on by me tab

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
 

govtool/frontend/src/components/molecules/GovernanceActionDetailsCardVotes.tsx

@@ -4,29 +4,23 @@ 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;
 };
 
 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}

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,36 +56,32 @@ export const VoteActionForm = ({
     registerInput,
     setValue,
     vote,
-  } = useVoteActionForm(voteContextHash, voteContextUrl);
+    canVote,
+  } = useVoteActionForm({ previousVote, voteContextHash, voteContextUrl });
 
   const setVoteContextData = (url: string, hash: string) => {
     setVoteContextUrl(url);
     setVoteContextHash(hash);
   };
 
   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,19 +91,15 @@ export const VoteActionForm = ({
         {t("cancel")}
       </Button>
     ),
-    [state],
+    [previousVote?.vote, setValue],
   );
 
   const renderChangeVoteButton = useMemo(
     () => (
       <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}

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 ===

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}