chore: display voters modal only in active

tupui · Nov 17, 2024 · 505c49d · 505c49d
1 parent e0187e4
commit 505c49d
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/dapp/src/components/page/proposal/ProposalDetail.tsx b/dapp/src/components/page/proposal/ProposalDetail.tsx
@@ -73,7 +73,7 @@ export const OutcomeDetail: React.FC<{
 
   return (
     <div className="flex flex-col gap-1 sm:gap-2 md:gap-3">
-      <div className="flex flex-col sm:flex-row items-start gap-1 sm:gap-2 md:gap-3">
+      <div className="flex flex-col md:flex-row items-start gap-1 sm:gap-2 md:gap-3">
         <div
           className={`text-base sm:text-xl md:text-2xl text-white md:py-0.5 px-1 md:px-2 rounded md:rounded-md 
             ${type === "approved" ? "bg-approved" : type === "rejected" ? "bg-conflict" : type === "cancelled" ? "bg-abstain" : type === "voted" ? "bg-voted" : "bg-gray-300"}`}

diff --git a/dapp/src/components/page/proposal/ProposalPage.tsx b/dapp/src/components/page/proposal/ProposalPage.tsx
@@ -6,7 +6,7 @@ import VoteStatusBar from "./VoteStatusBar";
 import VotersModal from "./VotersModal";
 import { useStore } from "@nanostores/react";
 import { proposalId } from "utils/store";
-import type { VoteType, VoteStatus } from "types/proposal";
+import type { VoteType, VoteStatus, ProposalStatus } from "types/proposal";
 import { demoProposalData } from "constants/demoProposalData";
 import ProposalDetail from "./ProposalDetail";
 import {
@@ -22,16 +22,26 @@ const ProposalPage: React.FC = () => {
   const [outcome, setOutcome] = useState<ProposalOutcome | null>(null);
   const [voteType, setVoteType] = useState<VoteType>();
   const [voteStatus, setVoteStatus] = useState<VoteStatus>();
+  const [proposalStatus, setProposalStatus] = useState<ProposalStatus | null>(
+    null,
+  );
+  const [endDate, setEndDate] = useState<string | null>(null);
 
   const openVotersModal = (voteType: VoteType) => {
-    setVoteType(voteType);
-    setIsModalOpen(true);
+    if (proposalStatus === "active") {
+      setVoteType(voteType);
+      setIsModalOpen(true);
+    } else {
+      alert("Cannot show voters while voting is in progress");
+    }
   };
 
   const getProposalDetails = async () => {
     const proposal = demoProposalData[0];
     if (proposal) {
       setVoteStatus(proposal.voteStatus);
+      setProposalStatus(proposal.status);
+      setEndDate(proposal.endDate);
       const description = await fetchProposalFromIPFS(proposal.ipfsLink);
       setDescription(description);
       const outcome = await fetchOutcomeDataFromIPFS(proposal.ipfsLink);
@@ -53,7 +63,7 @@ const ProposalPage: React.FC = () => {
         submitVote={() => {}}
       />
       <div className="flex flex-col gap-3 sm:gap-5 md:gap-7">
-        <ProposalStatusSection status="active" endDate={"2024-11-24"} />
+        <ProposalStatusSection status={proposalStatus} endDate={endDate} />
         <VoteStatusBar
           interest={50}
           conflict={30}

diff --git a/dapp/src/components/page/proposal/ProposalStatusSection.tsx b/dapp/src/components/page/proposal/ProposalStatusSection.tsx
@@ -4,15 +4,15 @@ import ProposalStatusDiv from "./ProposalStatusDiv";
 import type { ProposalStatus } from "types/proposal";
 
 interface Props {
-  status: ProposalStatus;
+  status: ProposalStatus | null;
   endDate: string | null;
 }
 
 const ProposalStatusSection: React.FC<Props> = ({ status, endDate }) => {
   return (
     <div className="flex items-center mt-3 sm:mt-5 md:mt-8 gap-2 sm:gap-3 md:gap-4">
       <div className="">
-        <ProposalStatusDiv proposalStatus={status} />
+        {status && <ProposalStatusDiv proposalStatus={status} />}
       </div>
       <div className="hidden lg:block">
         {status === "active" && endDate && (