Merge pull request #2520 from IntersectMBO/fix/2511-typeerror-cannot-read-properties-of-undefined-reading-length

fix(#2511): fix app crash on governance action details page

Author: MSzalowski

CHANGELOG.md

@@ -19,6 +19,7 @@ changes.
 - Fix mzero parsing error on fetching the /proposal/list [Issue 2446](https://github.com/IntersectMBO/govtool/issues/2446)
 - Fix scaling gov action votes on lower resolutions
 - Fix storing url missing length validation [Issue 2044](https://github.com/IntersectMBO/govtool/issues/2044)
+- Fix governance action details page crash on missing data [Issue 2511](https://github.com/IntersectMBO/govtool/issues/2511)
 
 ### Changed
 

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

@@ -34,8 +34,13 @@ export const GovernanceActionDetailsCardLinks = ({
         >
           {t("govActions.supportingLinks")}
         </Typography>
-        {links.map(({ uri, label }) => (
-          <Box display="flex" flexDirection="column" overflow="hidden">
+        {links?.map(({ uri, label }) => (
+          <Box
+            key={`${label}-${uri}-label`}
+            display="flex"
+            flexDirection="column"
+            overflow="hidden"
+          >
             {label && (
               <Typography
                 data-testid={`${label}-${uri}-label`}

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

@@ -13,7 +13,7 @@ type GovernanceActionCardVotesProps = {
   isDashboard?: boolean;
   isInProgress?: boolean;
   isVoter?: boolean;
-  vote?: ProposalVote;
+  vote?: ProposalVote | null;
   proposal: ProposalData;
 };
 

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

@@ -121,7 +121,12 @@ export const GovernanceVotedOnCard = ({ votedProposal, inProgress }: Props) => {
           isCopyButton
           isSliderCard
         />
-        <GovernanceActionCardMyVote voteTxHash={vote.txHash} vote={vote.vote} />
+        {vote && (
+          <GovernanceActionCardMyVote
+            voteTxHash={vote.txHash}
+            vote={vote.vote}
+          />
+        )}
       </Box>
       <Box
         bgcolor="white"

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

@@ -19,7 +19,7 @@ import { VoteContextModalState, SubmittedVotesModalState } from "../organisms";
 type VoteActionFormProps = {
   setIsVoteSubmitted: Dispatch<SetStateAction<boolean>>;
   isInProgress?: boolean;
-  previousVote?: ProposalVote;
+  previousVote?: ProposalVote | null;
   proposal: ProposalData;
 };
 

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

@@ -42,7 +42,7 @@ export const DashboardGovernanceActionsVotedOn = ({
               .includes(searchPhrase.toLowerCase()),
           ),
         }))
-        .filter((entry) => entry.actions.length > 0);
+        .filter((entry) => entry.actions?.length > 0);
     }
     return data;
   }, [data, searchPhrase, pendingTransaction.vote]);
@@ -70,12 +70,12 @@ export const DashboardGovernanceActionsVotedOn = ({
                 title={getProposalTypeLabel(item.title)}
                 navigateKey={item.title}
                 searchPhrase={searchPhrase}
-                dataLength={item.actions.slice(0, 6).length}
+                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}`}
+                    key={`${action?.proposal.id}${action.vote?.vote}`}
                     style={{ overflow: "visible", width: "auto" }}
                   >
                     <GovernanceVotedOnCard

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

@@ -16,7 +16,7 @@ type GovernanceActionDetailsCardProps = {
   isDataMissing: null | MetadataValidationStatus;
   isInProgress?: boolean;
   isVoter?: boolean;
-  vote?: ProposalVote;
+  vote?: ProposalVote | null;
   proposal: ProposalData;
 };
 

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

@@ -260,7 +260,7 @@ export const GovernanceActionDetailsCardData = ({
         textVariant={screenWidth > 1600 ? "longText" : "oneLine"}
       />
 
-      {tabs.length === 1 ? (
+      {tabs?.length === 1 ? (
         tabs[0].content
       ) : (
         <>

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

@@ -32,7 +32,7 @@ export const GovernanceActionsToVote = ({
 
   return (
     <>
-      {!proposals.length ? (
+      {!proposals?.length ? (
         <Typography fontWeight={300} sx={{ py: 4 }}>
           {t("govActions.noResultsForTheSearch")}
         </Typography>
@@ -91,10 +91,10 @@ export const GovernanceActionsToVote = ({
                     />
                   </div>
                 ))}
-                dataLength={item.actions.slice(0, 6).length}
+                dataLength={item.actions.slice(0, 6)?.length}
                 filters={filters}
                 navigateKey={item.title}
-                notSlicedDataLength={item.actions.length}
+                notSlicedDataLength={item.actions?.length}
                 onDashboard={onDashboard}
                 searchPhrase={searchPhrase}
                 sorting={sorting}

govtool/frontend/src/hooks/forms/useVoteActionForm.tsx

@@ -31,7 +31,7 @@ export const useVoteActionFormController = () => {
 };
 
 type Props = {
-  previousVote?: ProposalVote;
+  previousVote?: ProposalVote | null;
   voteContextHash?: string;
   voteContextUrl?: string;
 };