Merge pull request #1818 from IntersectMBO/fix/1801-deep-link-shared-…

…link-of-governance-action-does-not-work

[#1801] refactor passing props to GA details, fix ts problems

CHANGELOG.md

@@ -19,7 +19,7 @@ changes.
 
 ### Fixed
 
--
+- Fix typescript bug leading to runtime error when entering Governance Action details page via direct link [Issue 1801](https://github.com/IntersectMBO/govtool/issues/1801)
 
 ### Changed
 

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

@@ -4,54 +4,45 @@ import { Box } from "@mui/material";
 import { useScreenDimension } from "@hooks";
 import { VoteActionForm, VotesSubmitted } from "@molecules";
 import { useFeatureFlag } from "@/context";
-import { GovernanceActionType } from "@/types/governanceAction";
+import { ProposalData } from "@/models";
 
 type GovernanceActionCardVotesProps = {
   setIsVoteSubmitted: Dispatch<SetStateAction<boolean>>;
-  dRepYesVotes: number;
-  dRepNoVotes: number;
-  dRepAbstainVotes: number;
-  poolYesVotes: number;
-  poolNoVotes: number;
-  poolAbstainVotes: number;
-  ccYesVotes: number;
-  ccNoVotes: number;
-  ccAbstainVotes: number;
   isOneColumn: boolean;
-  expiryDate: string;
-  expiryEpochNo: number;
   isVoter?: boolean;
   voteFromEP?: string;
   voteUrlFromEP?: string;
   voteDateFromEP?: string;
   voteEpochNoFromEP?: number;
   isDashboard?: boolean;
   isInProgress?: boolean;
-  type: GovernanceActionType;
+  proposal: ProposalData;
 };
 
 export const GovernanceActionDetailsCardVotes = ({
   setIsVoteSubmitted,
-  dRepAbstainVotes,
-  dRepNoVotes,
-  dRepYesVotes,
-  poolAbstainVotes,
-  poolNoVotes,
-  poolYesVotes,
-  ccAbstainVotes,
-  ccNoVotes,
-  ccYesVotes,
   isOneColumn,
-  expiryDate,
-  expiryEpochNo,
   isVoter,
   voteFromEP,
   voteUrlFromEP,
   voteDateFromEP,
   voteEpochNoFromEP,
   isDashboard,
   isInProgress,
-  type,
+  proposal: {
+    dRepAbstainVotes,
+    dRepNoVotes,
+    dRepYesVotes,
+    poolAbstainVotes,
+    poolNoVotes,
+    poolYesVotes,
+    ccAbstainVotes,
+    ccNoVotes,
+    ccYesVotes,
+    expiryDate,
+    expiryEpochNo,
+    type,
+  },
 }: GovernanceActionCardVotesProps) => {
   const { isVotingOnGovernanceActionEnabled } = useFeatureFlag();
   const { screenWidth } = useScreenDimension();

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

@@ -132,11 +132,8 @@ export const GovernanceVotedOnCard = ({ votedProposal, inProgress }: Props) => {
               ),
               {
                 state: {
-                  ...proposal,
-                  vote: vote.vote.toLowerCase(),
-                  voteUrl: vote.url,
-                  voteDate: vote.date,
-                  voteEpochNo: vote.epochNo,
+                  proposal,
+                  vote,
                 },
               },
             )

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

@@ -17,8 +17,8 @@ import { formatDisplayDate } from "@utils";
 
 type VoteActionFormProps = {
   setIsVoteSubmitted: Dispatch<SetStateAction<boolean>>;
-  expiryDate: string;
-  expiryEpochNo: number;
+  expiryDate: string | undefined;
+  expiryEpochNo: number | undefined;
   voteFromEP?: string;
   voteUrlFromEP?: string;
   voteDateFromEP?: string;

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

@@ -14,34 +14,39 @@ import {
   useScreenDimension,
   useTranslation,
 } from "@hooks";
-import { getShortenedGovActionId, getProposalTypeLabel } from "@utils";
+import { getFullGovActionId, getShortenedGovActionId } from "@utils";
 import { GovernanceActionDetailsCard } from "@organisms";
 import { Breadcrumbs } from "@molecules";
+import { ProposalData, ProposalVote } from "@/models";
+
+type DashboardGovernanceActionDetailsState = {
+  proposal?: ProposalData;
+  vote?: ProposalVote;
+  openedFromCategoryPage?: boolean;
+};
 
 // TODO: Refactor: GovernanceActionDetals and DashboardGovernanceActionDetails are almost identical
 // and should be unified
 export const DashboardGovernanceActionDetails = () => {
   const { voter } = useGetVoterInfo();
   const { pendingTransaction, isEnableLoading } = useCardano();
-  const { state, hash } = useLocation();
+  const { state: untypedState, hash } = useLocation();
+  const state = untypedState as DashboardGovernanceActionDetailsState | null;
+  const index = hash.slice(1);
   const navigate = useNavigate();
   const { isMobile } = useScreenDimension();
   const { t } = useTranslation();
-  const { proposalId } = useParams();
-  const fullProposalId = proposalId + hash;
+  const { proposalId: txHash } = useParams();
 
-  const { data, isLoading } = useGetProposalQuery(fullProposalId ?? "", !state);
-  const shortenedGovActionId = getShortenedGovActionId(
-    state ? state.txHash : data?.proposal.txHash ?? "",
-    state ? state.index : data?.proposal.index ?? "",
-  );
+  const fullProposalId = txHash && getFullGovActionId(txHash, +index);
+  const shortenedGovActionId =
+    txHash && getShortenedGovActionId(txHash, +index);
 
-  // TODO: Refactor me
-  const title = state ? state?.title : data?.proposal?.title;
-  const label = state
-    ? getProposalTypeLabel(state.type)
-    : getProposalTypeLabel(data.proposal.type);
-  const type = state ? state.type : data.proposal.type;
+  const { data, isLoading } = useGetProposalQuery(
+    fullProposalId ?? "",
+    !state?.proposal || !state?.vote,
+  );
+  const proposal = (data ?? state)?.proposal;
 
   return (
     <Box
@@ -55,10 +60,8 @@ export const DashboardGovernanceActionDetails = () => {
       <Breadcrumbs
         elementOne={t("govActions.title")}
         elementOnePath={PATHS.dashboardGovernanceActions}
-        elementTwo={title}
-        isDataMissing={
-          state ? state.metadataStatus : data?.proposal.metadataStatus
-        }
+        elementTwo={proposal?.title ?? ""}
+        isDataMissing={proposal?.metadataStatus ?? null}
       />
       <Link
         data-testid="back-to-list-link"
@@ -71,7 +74,7 @@ export const DashboardGovernanceActionDetails = () => {
           navigate(
             state && state.openedFromCategoryPage
               ? generatePath(PATHS.dashboardGovernanceActionsCategory, {
-                  category: state.type,
+                  category: state?.proposal?.type,
                 })
               : PATHS.dashboardGovernanceActions,
             {
@@ -103,67 +106,22 @@ export const DashboardGovernanceActionDetails = () => {
           >
             <CircularProgress />
           </Box>
-        ) : data || state ? (
+        ) : proposal ? (
           <GovernanceActionDetailsCard
-            dRepAbstainVotes={
-              state ? state.dRepAbstainVotes : data.proposal.dRepAbstainVotes
-            }
-            dRepNoVotes={state ? state.dRepNoVotes : data.proposal.dRepNoVotes}
-            dRepYesVotes={
-              state ? state.dRepYesVotes : data.proposal.dRepYesVotes
-            }
-            poolAbstainVotes={
-              state ? state.poolAbstainVotes : data.proposal.poolAbstainVotes
-            }
-            poolNoVotes={state ? state.poolNoVotes : data.proposal.poolNoVotes}
-            poolYesVotes={
-              state ? state.poolYesVotes : data.proposal.poolYesVotes
-            }
-            ccAbstainVotes={
-              state ? state.ccAbstainVotes : data.proposal.ccAbstainVotes
-            }
-            ccNoVotes={state ? state.ccNoVotes : data.proposal.ccNoVotes}
-            ccYesVotes={state ? state.ccYesVotes : data.proposal.ccYesVotes}
-            createdDate={state ? state.createdDate : data.proposal.createdDate}
-            createdEpochNo={
-              state ? state.createdEpochNo : data.proposal.createdEpochNo
-            }
-            isDataMissing={
-              state ? state.metadataStatus : data?.proposal.metadataStatus
-            }
-            expiryDate={state ? state.expiryDate : data?.proposal.expiryDate}
-            expiryEpochNo={
-              state ? state.expiryEpochNo : data.proposal.expiryEpochNo
-            }
+            proposal={proposal}
             isVoter={
               voter?.isRegisteredAsDRep || voter?.isRegisteredAsSoleVoter
             }
-            type={type}
-            label={label}
-            title={title}
-            details={state ? state.details : data.proposal.details}
-            url={state ? state.url : data.proposal.url}
-            links={state ? state?.references : data.proposal?.references}
-            abstract={state ? state?.abstract : data.proposal?.abstract}
-            motivation={state ? state?.motivation : data.proposal?.motivation}
-            rationale={state ? state?.rationale : data.proposal?.rationale}
             voteFromEP={data?.vote?.vote}
             voteUrlFromEP={data?.vote?.url}
             voteDateFromEP={data?.vote?.date}
             voteEpochNoFromEP={data?.vote?.epochNo}
-            govActionId={fullProposalId}
-            prevGovActionId={
-              (state ?? data.proposal).prevGovActionId +
-                (state ?? data.proposal).prevGovActionTxHash || null
-            }
+            isDataMissing={proposal.metadataStatus ?? null}
             isInProgress={
               pendingTransaction.vote?.resourceId ===
-              fullProposalId.replace("#", "")
+              fullProposalId?.replace("#", "")
             }
             isDashboard
-            protocolParams={
-              state ? state.protocolParams : data.proposal.protocolParams
-            }
           />
         ) : (
           <Box mt={4} display="flex" flexWrap="wrap">

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

@@ -7,79 +7,30 @@ import {
   GovernanceActionDetailsCardVotes,
 } from "@molecules";
 import { GovernanceActionDetailsCardData } from "@organisms";
-import { EpochParams, MetadataValidationStatus } from "@models";
-import { GovernanceActionType } from "@/types/governanceAction";
+import { MetadataValidationStatus, ProposalData } from "@models";
 
 type GovernanceActionDetailsCardProps = {
-  abstract?: string;
-  ccAbstainVotes: number;
-  ccNoVotes: number;
-  ccYesVotes: number;
-  createdDate: string;
-  createdEpochNo: number;
-  dRepAbstainVotes: number;
-  dRepNoVotes: number;
-  dRepYesVotes: number;
-  details?: ActionDetailsType;
-  expiryDate: string;
-  expiryEpochNo: number;
-  govActionId: string;
-  prevGovActionId: string | null;
   isDashboard?: boolean;
   isDataMissing: null | MetadataValidationStatus;
   isInProgress?: boolean;
   isVoter?: boolean;
-  label: string;
-  links?: string[];
-  motivation?: string;
-  poolAbstainVotes: number;
-  poolNoVotes: number;
-  poolYesVotes: number;
-  protocolParams: EpochParams | null;
-  rationale?: string;
-  title?: string;
-  type: GovernanceActionType;
-  url: string;
   voteDateFromEP?: string;
   voteEpochNoFromEP?: number;
   voteFromEP?: string;
   voteUrlFromEP?: string;
+  proposal: ProposalData;
 };
 
 export const GovernanceActionDetailsCard = ({
-  abstract,
-  ccAbstainVotes,
-  ccNoVotes,
-  ccYesVotes,
-  createdDate,
-  createdEpochNo,
-  dRepAbstainVotes,
-  dRepNoVotes,
-  dRepYesVotes,
-  details,
-  expiryDate,
-  expiryEpochNo,
-  govActionId,
-  prevGovActionId,
   isDashboard,
   isDataMissing,
   isInProgress,
   isVoter,
-  label,
-  links,
-  motivation,
-  poolAbstainVotes,
-  poolNoVotes,
-  poolYesVotes,
-  protocolParams,
-  rationale,
-  title,
-  type,
-  url,
   voteDateFromEP,
   voteEpochNoFromEP,
   voteFromEP,
   voteUrlFromEP,
+  proposal,
 }: GovernanceActionDetailsCardProps) => {
   const [isVoteSubmitted, setIsVoteSubmitted] = useState<boolean>(false);
   const { screenWidth, isMobile } = useScreenDimension();
@@ -112,41 +63,15 @@ export const GovernanceActionDetailsCard = ({
         />
       )}
       <GovernanceActionDetailsCardData
-        abstract={abstract}
-        createdDate={createdDate}
-        createdEpochNo={createdEpochNo}
-        details={details}
-        expiryDate={expiryDate}
-        expiryEpochNo={expiryEpochNo}
-        govActionId={govActionId}
-        prevGovActionId={prevGovActionId}
         isDashboard={isDashboard}
         isDataMissing={isDataMissing}
         isInProgress={isInProgress}
         isOneColumn={isOneColumn}
         isSubmitted={isVoteSubmitted}
-        links={links}
-        motivation={motivation}
-        rationale={rationale}
-        title={title}
-        label={label}
-        url={url}
-        type={type}
-        protocolParams={protocolParams}
+        proposal={proposal}
       />
       <GovernanceActionDetailsCardVotes
         setIsVoteSubmitted={setIsVoteSubmitted}
-        dRepAbstainVotes={dRepAbstainVotes}
-        dRepNoVotes={dRepNoVotes}
-        dRepYesVotes={dRepYesVotes}
-        poolAbstainVotes={poolAbstainVotes}
-        poolNoVotes={poolNoVotes}
-        poolYesVotes={poolYesVotes}
-        ccAbstainVotes={ccAbstainVotes}
-        ccNoVotes={ccNoVotes}
-        ccYesVotes={ccYesVotes}
-        expiryDate={expiryDate}
-        expiryEpochNo={expiryEpochNo}
         isVoter={isVoter}
         voteFromEP={voteFromEP}
         voteUrlFromEP={voteUrlFromEP}
@@ -155,7 +80,7 @@ export const GovernanceActionDetailsCard = ({
         isDashboard={isDashboard}
         isOneColumn={isOneColumn}
         isInProgress={isInProgress}
-        type={type}
+        proposal={proposal}
       />
     </Box>
   );