fix: missing or wrong validation status of Governance Action metadata

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

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { Box, ButtonBase, Divider, Avatar, Skeleton } from "@mui/material";
 
@@ -70,31 +70,35 @@ export const DRepCard = ({
 
   const base64Image = getBase64ImageDetails(image ?? "");
   const [isValidating, setIsValidating] = useState(false);
-  const metadataStatus = useRef<MetadataValidationStatus | undefined>();
+  const [metadataStatus, setMetadataStatus] = useState<
+    MetadataValidationStatus | undefined
+  >();
   const { validateMetadata } = useValidateMutation();
 
   useEffect(() => {
+    if (!url) return;
+
     const validate = async () => {
       setIsValidating(true);
 
       const { status: validationStatus } = await validateMetadata({
         standard: MetadataStandard.CIP119,
-        url: url ?? "",
+        url,
         hash: metadataHash ?? "",
       });
 
-      metadataStatus.current = validationStatus;
+      setMetadataStatus(validationStatus);
       setIsValidating(false);
     };
     validate();
-  }, []);
+  }, [url]);
 
   return (
     <Card
       {...(isMe && {
         variant: "primary",
       })}
-      {...(!!metadataStatus.current && {
+      {...(!!metadataStatus && {
         variant: "error",
       })}
       {...(isInProgress && {
@@ -175,13 +179,11 @@ export const DRepCard = ({
                   <Typography
                     sx={{
                       ellipsisStyles,
-                      color: metadataStatus.current && "errorRed",
+                      color: metadataStatus && "errorRed",
                     }}
                   >
-                    {metadataStatus.current
-                      ? getMetadataDataMissingStatusTranslation(
-                          metadataStatus.current,
-                        )
+                    {metadataStatus
+                      ? getMetadataDataMissingStatusTranslation(metadataStatus)
                       : ellipsizeText(givenName ?? "", 25)}
                   </Typography>
                 )}

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

@@ -1,4 +1,4 @@
-import { PropsWithChildren, useEffect, useRef, useState } from "react";
+import { PropsWithChildren, useEffect, useState } from "react";
 import { Box, ButtonBase, Link, Skeleton } from "@mui/material";
 
 import { Button, ExternalModalButton, StatusPill, Typography } from "@atoms";
@@ -52,24 +52,28 @@ export const DRepDetailsCard = ({
   } = dRepData;
 
   const [isValidating, setIsValidating] = useState(false);
-  const metadataStatus = useRef<MetadataValidationStatus | undefined>();
+  const [metadataStatus, setMetadataStatus] = useState<
+    MetadataValidationStatus | undefined
+  >();
   const { validateMetadata } = useValidateMutation();
 
   useEffect(() => {
+    if (!url) return;
+
     const validate = async () => {
       setIsValidating(true);
 
       const { status: metadataValidationStatus } = await validateMetadata({
         standard: MetadataStandard.CIP119,
-        url: url ?? "",
+        url,
         hash: metadataHash ?? "",
       });
 
-      metadataStatus.current = metadataValidationStatus;
+      setMetadataStatus(metadataValidationStatus);
       setIsValidating(false);
     };
     validate();
-  }, []);
+  }, [url]);
 
   const groupedReferences = references?.reduce<Record<string, Reference[]>>(
     (acc, reference) => {
@@ -117,18 +121,18 @@ export const DRepDetailsCard = ({
           isMe={isMe}
           isMyDrep={isMyDrep}
           isValidating={isValidating}
-          metadataStatus={metadataStatus.current}
+          metadataStatus={metadataStatus}
         />
         {/* ERROR MESSAGES */}
-        {metadataStatus.current && (
+        {metadataStatus && (
           <DataMissingInfoBox
-            isDataMissing={metadataStatus.current}
+            isDataMissing={metadataStatus}
             isDrep
             sx={{ mb: 0 }}
             isValidating={isValidating}
           />
         )}
-        {metadataStatus.current && !!url && (
+        {metadataStatus && !!url && (
           <ExternalModalButton
             label={t("govActions.seeExternalData")}
             sx={{ mb: 0, alignSelf: "flex-start" }}
@@ -230,7 +234,7 @@ export const DRepDetailsCard = ({
       {/* BUTTONS END */}
 
       {/* CIP-119 DATA */}
-      {!metadataStatus.current && (
+      {!metadataStatus && (
         <>
           <DRepDetailsInfoItem
             label={t("forms.dRepData.objectives")}

govtool/frontend/src/components/organisms/DashboardCards/DelegateDashboardCard.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { Trans } from "react-i18next";
 
@@ -44,21 +44,25 @@ export const DelegateDashboardCard = ({
     delegateTx?.resourceId ?? currentDelegation?.dRepHash,
   );
 
-  const metadataStatus = useRef<MetadataValidationStatus | undefined>();
+  const [metadataStatus, setMetadataStatus] = useState<
+    MetadataValidationStatus | undefined
+  >();
   const { validateMetadata } = useValidateMutation();
 
   useEffect(() => {
+    if (!myDRepDelegationData?.url) return;
+
     const validate = async () => {
       const { status } = await validateMetadata({
         standard: MetadataStandard.CIP119,
-        url: myDRepDelegationData?.url ?? "",
+        url: myDRepDelegationData.url!,
         hash: myDRepDelegationData?.metadataHash ?? "",
       });
 
-      metadataStatus.current = status;
+      setMetadataStatus(status);
     };
     validate();
-  }, []);
+  }, [myDRepDelegationData?.url]);
 
   const learnMoreButton = {
     children: t("learnMore"),
@@ -170,8 +174,8 @@ export const DelegateDashboardCard = ({
           drepName={
             isLoading
               ? "Loading..."
-              : metadataStatus.current
-              ? getMetadataDataMissingStatusTranslation(metadataStatus.current)
+              : metadataStatus
+              ? getMetadataDataMissingStatusTranslation(metadataStatus)
               : myDRepDelegationData?.givenName ?? ""
           }
           dRepId={displayedDelegationId}

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

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import {
   useNavigate,
   useLocation,
@@ -49,22 +49,34 @@ export const DashboardGovernanceActionDetails = () => {
     fullProposalId ?? "",
     !state?.proposal || !state?.vote,
   );
+  // TODO: Refactor this mess with proposals and metadata validation
+  // once authors are existing in all CIP-108 metadata
   const [extendedProposal, setExtendedProposal] = useState<ProposalData>(
     (data ?? state)?.proposal as ProposalData,
   );
+
+  useEffect(() => {
+    if (data?.proposal) {
+      setExtendedProposal(data.proposal);
+    }
+  }, [data?.proposal]);
   const vote = (data ?? state)?.vote;
 
-  const [isValidating, setIsValidating] = useState(false);
-  const metadataStatus = useRef<MetadataValidationStatus | undefined>();
+  const [isValidating, setIsValidating] = useState(true);
+  const [metadataStatus, setMetadataStatus] = useState<
+    MetadataValidationStatus | undefined
+  >();
   const { validateMetadata } = useValidateMutation();
 
   useEffect(() => {
+    if (!extendedProposal?.url) return;
+
     const validate = async () => {
       setIsValidating(true);
 
       const { status, metadata } = await validateMetadata({
         standard: MetadataStandard.CIP108,
-        url: extendedProposal?.url ?? "",
+        url: extendedProposal?.url,
         hash: extendedProposal?.metadataHash ?? "",
       });
 
@@ -78,11 +90,11 @@ export const DashboardGovernanceActionDetails = () => {
         }));
       }
 
-      metadataStatus.current = status;
+      setMetadataStatus(status);
       setIsValidating(false);
     };
     validate();
-  }, []);
+  }, [extendedProposal?.url]);
 
   useEffect(() => {
     const isProposalNotFound =
@@ -108,7 +120,7 @@ export const DashboardGovernanceActionDetails = () => {
         elementOne={t("govActions.title")}
         elementOnePath={PATHS.dashboardGovernanceActions}
         elementTwo={extendedProposal?.title ?? ""}
-        isDataMissing={metadataStatus?.current ?? null}
+        isDataMissing={metadataStatus ?? null}
       />
       <Link
         data-testid="back-to-list-link"
@@ -160,7 +172,7 @@ export const DashboardGovernanceActionDetails = () => {
             isVoter={
               voter?.isRegisteredAsDRep || voter?.isRegisteredAsSoleVoter
             }
-            isDataMissing={metadataStatus?.current}
+            isDataMissing={metadataStatus}
             isInProgress={
               pendingTransaction.vote?.resourceId ===
               fullProposalId?.replace("#", "")