From b9b584b36502c935daf9c6c30aef00e875f54ceb Mon Sep 17 00:00:00 2001
From: Rico <hochiw@oursky.com>
Date: Tue, 13 Sep 2022 12:20:52 +0800
Subject: [PATCH] react-app: Prevent throwing error when proposal type is
 unknown

refs #362
---
 .../ProposalDetailScreen/ProposalHeader.tsx           |  4 +++-
 react-app/src/components/proposals/ProposalCard.tsx   | 11 ++++++++++-
 react-app/src/components/proposals/utils.tsx          |  4 ++--
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/react-app/src/components/ProposalDetailScreen/ProposalHeader.tsx b/react-app/src/components/ProposalDetailScreen/ProposalHeader.tsx
index 274afc89..6791c7d6 100644
--- a/react-app/src/components/ProposalDetailScreen/ProposalHeader.tsx
+++ b/react-app/src/components/ProposalDetailScreen/ProposalHeader.tsx
@@ -160,6 +160,8 @@ const ProposalTypeAndProposer: React.FC<{ proposal: Proposal }> = ({
 }) => {
   const { type, proposerAddress, submitTime } = proposal;
 
+  const typeNameId = getProposalTypeMessage(type);
+
   return (
     <div
       className={cn(
@@ -175,7 +177,7 @@ const ProposalTypeAndProposer: React.FC<{ proposal: Proposal }> = ({
         <LocalizedText messageID="ProposalDetail.proposalType" />
       </p>
       <p className={cn("text-sm", "mb-4")}>
-        <LocalizedText messageID={getProposalTypeMessage(type)} />
+        {typeNameId !== null ? <LocalizedText messageID={typeNameId} /> : type}
       </p>
       <p className={cn("text-sm", "text-app-lightgreen", "mb-1")}>
         <LocalizedText messageID="ProposalDetail.publishedBy" />
diff --git a/react-app/src/components/proposals/ProposalCard.tsx b/react-app/src/components/proposals/ProposalCard.tsx
index f3d824a0..c6f45c7d 100644
--- a/react-app/src/components/proposals/ProposalCard.tsx
+++ b/react-app/src/components/proposals/ProposalCard.tsx
@@ -50,6 +50,11 @@ const ProposalCard: React.FC<ProposalCardProps> = (props) => {
     });
   }, [proposal]);
 
+  const proposalTypeNameId = useMemo(
+    () => getProposalTypeMessage(proposal.type),
+    [proposal]
+  );
+
   return (
     <div
       className={cn(
@@ -86,7 +91,11 @@ const ProposalCard: React.FC<ProposalCardProps> = (props) => {
             "text-app-darkgrey"
           )}
         >
-          <LocalizedText messageID={getProposalTypeMessage(proposal.type)} />
+          {proposalTypeNameId !== null ? (
+            <LocalizedText messageID={proposalTypeNameId} />
+          ) : (
+            proposal.type
+          )}
         </span>
         <h1
           className={cn(
diff --git a/react-app/src/components/proposals/utils.tsx b/react-app/src/components/proposals/utils.tsx
index e80173b2..820bcac9 100644
--- a/react-app/src/components/proposals/utils.tsx
+++ b/react-app/src/components/proposals/utils.tsx
@@ -27,7 +27,7 @@ export function getProposalStatusBadgeConfig(
   }
 }
 
-export function getProposalTypeMessage(type: ProposalType): MessageID {
+export function getProposalTypeMessage(type: string): MessageID | null {
   switch (type) {
     case ProposalType.Text:
       return "ProposalScreen.proposalType.text";
@@ -40,7 +40,7 @@ export function getProposalTypeMessage(type: ProposalType): MessageID {
     case ProposalType.CancelSoftwareUpgrade:
       return "ProposalScreen.proposalType.cancelSoftwareUpgrade";
     default:
-      throw new Error("Unknown proposal type");
+      return null;
   }
 }