chore: add query params to proposal page

tupui · Dec 1, 2024 · ff12773 · ff12773
1 parent 7a2e765
commit ff12773
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 20 deletions.
diff --git a/dapp/src/components/page/governance/GovernancePageTitle.astro b/dapp/src/components/page/governance/GovernancePageTitle.astro
@@ -23,14 +23,16 @@ import Topic from "../../utils/Topic.astro";
   import { capitalizeFirstLetter } from "utils/utils";
 
   document.addEventListener("astro:page-load", async () => {
-    projectNameForGovernance.subscribe((projectName) => {
-      if (projectName) {
+    let projectName = "";
+    projectNameForGovernance.subscribe((_projectName) => {
+      if (_projectName) {
         const titleElement = document
           .getElementById("proposal-page-topic")
           ?.querySelector("span");
         if (titleElement) {
-          titleElement.textContent = `${capitalizeFirstLetter(projectName)} Governance`;
+          titleElement.textContent = `${capitalizeFirstLetter(_projectName)} Governance`;
         }
+        projectName = _projectName;
       }
     });
 
@@ -40,7 +42,11 @@ import Topic from "../../utils/Topic.astro";
 
     if (submitProposalButton) {
       submitProposalButton.addEventListener("click", () => {
-        navigate(`/proposal/new`);
+        if (projectName) {
+          navigate(`/proposal/new?name=${projectName}`);
+        } else {
+          alert("Project name is not provided");
+        }
       });
     }
   });

diff --git a/dapp/src/components/page/governance/ProposalCard.tsx b/dapp/src/components/page/governance/ProposalCard.tsx
@@ -1,19 +1,25 @@
 import React from "react";
 import ProposalStatusShow from "./ProposalStatusShow";
-import type { ProposalCardView } from "types/proposal";
-import { calculateDateDifference } from "utils/formatTimeFunctions";
 import { navigate } from "astro:transitions/client";
+import { useStore } from "@nanostores/react";
+import { calculateDateDifference } from "utils/formatTimeFunctions";
+import { projectNameForGovernance } from "utils/store";
+import type { ProposalCardView } from "types/proposal";
 
 const ProposalCard: React.FC<ProposalCardView> = ({
   proposalNumber,
   proposalTitle,
   proposalStatus,
   endDate,
 }) => {
+  const projectName = useStore(projectNameForGovernance);
+
   return (
     <div
       className="w-full px-2 sm:px-4 md:pl-8 py-2 sm:py-3 md:py-4.5 bg-white border border-zinc-300 rounded-lg sm:rounded-xl cursor-pointer hover:border-lime hover:bg-zinc-500"
-      onClick={() => navigate(`/proposal?id=${proposalNumber}`)}
+      onClick={() =>
+        navigate(`/proposal?id=${proposalNumber}&&name=${projectName}`)
+      }
     >
       <div className="w-full flex justify-between items-center">
         <div className="lg:max-w-[calc(100%-240px)] flex items-start gap-2">

diff --git a/dapp/src/components/page/governance/ProposalList.tsx b/dapp/src/components/page/governance/ProposalList.tsx
@@ -14,16 +14,23 @@ const ProposalList: React.FC = () => {
   const [proposalData, setProposalData] = useState<ProposalView[]>([]);
 
   const fetchProposalData = async (_page: number) => {
-    const updatedProposalData = demoProposalData.map((proposal) => {
-      const proposalStatusView = modifyProposalStatusToView(
-        proposal.status,
-        proposal.endDate,
-      );
+    if (projectName) {
+      const updatedProposalData = demoProposalData.map((proposal) => {
+        const proposalStatusView = modifyProposalStatusToView(
+          proposal.status,
+          proposal.endDate,
+        );
 
-      return { ...proposal, status: proposalStatusView as ProposalViewStatus };
-    });
+        return {
+          ...proposal,
+          status: proposalStatusView as ProposalViewStatus,
+        };
+      });
 
-    setProposalData(updatedProposalData);
+      setProposalData(updatedProposalData);
+    } else {
+      alert("Project name is not provided");
+    }
   };
 
   useEffect(() => {

diff --git a/dapp/src/components/page/proposal/ProposalPage.tsx b/dapp/src/components/page/proposal/ProposalPage.tsx
@@ -9,7 +9,11 @@ import VotersModal from "./VotersModal";
 import VotingModal from "./VotingModal";
 import ExecuteProposalModal from "./ExecuteProposalModal";
 import { modifyProposalStatusToView } from "utils/utils";
-import { connectedPublicKey, proposalId } from "utils/store";
+import {
+  connectedPublicKey,
+  projectNameForGovernance,
+  proposalId,
+} from "utils/store";
 import { demoProposalData } from "constants/demoProposalData";
 import {
   fetchOutcomeDataFromIPFS,
@@ -24,6 +28,7 @@ import type {
 
 const ProposalPage: React.FC = () => {
   const id = useStore(proposalId);
+  const projectName = useStore(projectNameForGovernance);
   const connectedAddress = useStore(connectedPublicKey);
   const [isVotersModalOpen, setIsVotersModalOpen] = useState(false);
   const [isVotingModalOpen, setIsVotingModalOpen] = useState(false);
@@ -61,7 +66,7 @@ const ProposalPage: React.FC = () => {
     }
   };
   const getProposalDetails = async () => {
-    if (id) {
+    if (id && projectName) {
       const proposal = demoProposalData.find((p) => p.id === id);
       if (proposal) {
         const proposalStatusView = modifyProposalStatusToView(
@@ -80,6 +85,8 @@ const ProposalPage: React.FC = () => {
       } else {
         alert("Proposal not found");
       }
+    } else {
+      alert("Project name or proposal id is not provided");
     }
   };
 

diff --git a/dapp/src/pages/governance/index.astro b/dapp/src/pages/governance/index.astro
@@ -24,7 +24,6 @@ import GovernancePage from "../../components/page/governance/GovernancePage.astr
     const projectName = urlParams.get("name") || "";
     if (projectName) {
       projectNameForGovernance.set(projectName);
-      console.log("projectName:", projectName);
     }
   });
 </script>
diff --git a/dapp/src/pages/proposal/index.astro b/dapp/src/pages/proposal/index.astro
@@ -17,13 +17,17 @@ import ProposalPage from "../../components/page/proposal/ProposalPage.tsx";
 </Layout>
 
 <script>
-  import { proposalId } from "utils/store";
+  import { projectNameForGovernance, proposalId } from "utils/store";
 
   document.addEventListener("astro:page-load", async () => {
     const urlParams = new URLSearchParams(window.location.search);
     const id = urlParams.get("id") || "";
     if (id) {
       proposalId.set(Number(id));
     }
+    const projectName = urlParams.get("name") || "";
+    if (projectName) {
+      projectNameForGovernance.set(projectName);
+    }
   });
 </script>
diff --git a/dapp/src/pages/proposal/new.astro b/dapp/src/pages/proposal/new.astro
@@ -19,5 +19,15 @@ import NewProposalPage from "components/page/governance/NewProposalPage.astro";
 </Layout>
 
 <script>
-  document.addEventListener("astro:page-load", async () => {});
+  import { projectNameForGovernance } from "utils/store";
+
+  document.addEventListener("astro:page-load", async () => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const projectName = urlParams.get("name") || "";
+    if (projectName) {
+      projectNameForGovernance.set(projectName);
+    } else {
+      alert("Project name is not provided");
+    }
+  });
 </script>