Merge pull request #1444 from IntersectMBO/fix/1436-pdf-show-all-back…

…-to-proposal-discussion-error-404-appears-when-loading-applogosvg fix(#1436): fix 404 on navigating back on proposal discussion
IntersectMBO · Jul 1, 2024 · 858f8c9 · 858f8c9
2 parents 54dfbc6 + cb6eeb9
commit 858f8c9
Show file tree

Hide file tree

Showing 12 changed files with 81 additions and 165 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -106,6 +106,7 @@ changes.
 - Fix displaying the GA Markdowns [Issue 1244](https://github.com/IntersectMBO/govtool/issues/1244)
 - Fix app crash on voting on the GA without the connected wallet before [Issue 1313](https://github.com/IntersectMBO/govtool/issues/1313)
 - Fix the navigation to Home from Proposal pillar on disconnected wallet [Issue 1355](https://github.com/IntersectMBO/govtool/issues/1355)
+- Fix navigation over Proposal discussion forum pillar [Issue 1436](https://github.com/IntersectMBO/govtool/issues/1436)
 
 ### Changed
 

diff --git a/govtool/frontend/src/App.tsx b/govtool/frontend/src/App.tsx
@@ -80,23 +80,6 @@ export default () => {
     checkTheWalletIsActive();
   }, [checkTheWalletIsActive]);
 
-  // Proposal Discussion Pillar doesn't export pages or react router routes
-  // so we need to handle the routing here
-  useEffect(() => {
-    if (!isProposalDiscussionForumEnabled) return;
-    if (
-      window.location.pathname.includes(PDF_PATHS.proposalDiscussion) &&
-      !window.location.pathname.includes(PATHS.proposalPillar.replace("/*", ""))
-    ) {
-      navigate(
-        `${(isEnabled
-          ? PATHS.connectedProposalPillar
-          : PATHS.proposalPillar
-        ).replace("/*", "")}${window.location.pathname}`,
-      );
-    }
-  }, [window.location.pathname]);
-
   return (
     <>
       <ScrollToTop />
@@ -113,15 +96,15 @@ export default () => {
         />
         {isProposalDiscussionForumEnabled && !isEnabled && (
           <Route
-            path={PATHS.proposalPillar}
+            path={`${PDF_PATHS.proposalDiscussion}/*`}
             element={<ProposalDiscussionPillar />}
           />
         )}
         <Route element={<Dashboard />}>
           <Route path={PATHS.dashboard} element={<DashboardCards />} />
           {isProposalDiscussionForumEnabled && (
             <Route
-              path={PATHS.connectedProposalPillar}
+              path={`${PDF_PATHS.proposalDiscussion}/*`}
               element={<ProposalDiscussionPillar />}
             />
           )}

diff --git a/govtool/frontend/src/components/atoms/DrawerLink.tsx b/govtool/frontend/src/components/atoms/DrawerLink.tsx
@@ -3,7 +3,6 @@ import { FC } from "react";
 import { NavLink } from "react-router-dom";
 
 import { theme } from "@/theme";
-import { PATHS, PDF_PATHS } from "@/consts";
 
 type LinkProps = {
   label: string;
@@ -14,16 +13,6 @@ type LinkProps = {
   onClick?: () => void;
 };
 
-const isRouteActive = (isActive: boolean, route: string) =>
-  isActive ||
-  (route ===
-    `${PATHS.proposalPillar.replace("/*", "")}${
-      PDF_PATHS.proposalDiscussion
-    }` &&
-    Object.values(PDF_PATHS).some((pdfPath) =>
-      window.location.pathname.includes(pdfPath),
-    ));
-
 export const DrawerLink: FC<LinkProps> = ({ ...props }) => {
   const { dataTestId, label, navTo, icon, activeIcon, onClick } = props;
   const {
@@ -37,49 +26,41 @@ export const DrawerLink: FC<LinkProps> = ({ ...props }) => {
       onClick={() => {
         if (onClick) onClick();
       }}
-      style={({ isActive: routeIsActive }) => {
-        // Workaround for the PDF routes not being handled by react-router
-        const isActive = isRouteActive(routeIsActive, navTo);
-        return {
-          textDecoration: "none",
-          backgroundColor: isActive ? highlightBlue : "transparent",
-          padding: "8px 16px",
-          display: "block",
-          borderRadius: 100,
-        };
-      }}
+      style={({ isActive }) => ({
+        textDecoration: "none",
+        backgroundColor: isActive ? highlightBlue : "transparent",
+        padding: "8px 16px",
+        display: "block",
+        borderRadius: 100,
+      })}
     >
-      {({ isActive: routeIsActive }) => {
-        // Workaround for the PDF routes not being handled by react-router
-        const isActive = isRouteActive(routeIsActive, navTo);
-        return (
-          <Box display="flex">
-            {activeIcon &&
-            icon &&
-            typeof icon === "string" &&
-            typeof activeIcon === "string" ? (
-              <img
-                alt="icon"
-                src={isActive ? activeIcon : icon}
-                style={{ marginRight: "12px" }}
-              />
-            ) : (
-              <Box marginRight="12px" height="20px" width="20px">
-                {isActive ? activeIcon : icon}
-              </Box>
-            )}
-            <Typography
-              fontSize={14}
-              lineHeight="20px"
-              sx={{
-                fontWeight: isActive ? 500 : 400,
-              }}
-            >
-              {label}
-            </Typography>
-          </Box>
-        );
-      }}
+      {({ isActive }) => (
+        <Box display="flex">
+          {activeIcon &&
+          icon &&
+          typeof icon === "string" &&
+          typeof activeIcon === "string" ? (
+            <img
+              alt="icon"
+              src={isActive ? activeIcon : icon}
+              style={{ marginRight: "12px" }}
+            />
+          ) : (
+            <Box marginRight="12px" height="20px" width="20px">
+              {isActive ? activeIcon : icon}
+            </Box>
+          )}
+          <Typography
+            fontSize={14}
+            lineHeight="20px"
+            sx={{
+              fontWeight: isActive ? 500 : 400,
+            }}
+          >
+            {label}
+          </Typography>
+        </Box>
+      )}
     </NavLink>
   );
 };
diff --git a/govtool/frontend/src/components/molecules/WalletInfoCard.tsx b/govtool/frontend/src/components/molecules/WalletInfoCard.tsx
@@ -1,7 +1,7 @@
 import { useLocation, useNavigate } from "react-router-dom";
 import { Box, Button, Typography } from "@mui/material";
 
-import { PATHS, gray } from "@consts";
+import { PDF_PATHS, PATHS, gray } from "@consts";
 import { useCardano } from "@context";
 import { useTranslation } from "@hooks";
 import { Card } from "./Card";
@@ -14,11 +14,18 @@ export const WalletInfoCard = () => {
 
   const onClickDisconnect = async () => {
     await disconnectWallet();
-    navigate(
-      pathname.includes("/connected")
-        ? `${pathname.replace("/connected", "")}${hash ?? ""}`
-        : PATHS.home,
+    const isProposalDiscussionForum = window.location.pathname.includes(
+      PDF_PATHS.proposalDiscussion.replace("/", ""),
     );
+
+    if (!isProposalDiscussionForum) {
+      navigate(
+        pathname.includes("/connected")
+          ? `${pathname.replace("/connected", "")}${hash ?? ""}`
+          : PATHS.home,
+      );
+    }
+
     window.location.reload();
   };
 

diff --git a/govtool/frontend/src/components/molecules/WalletOption.tsx b/govtool/frontend/src/components/molecules/WalletOption.tsx
@@ -2,7 +2,7 @@ import { FC, useCallback } from "react";
 import { To, useNavigate, useLocation } from "react-router-dom";
 import { Box, CircularProgress, Typography } from "@mui/material";
 
-import { PATHS } from "@consts";
+import { PATHS, PDF_PATHS } from "@consts";
 import { useCardano } from "@context";
 import { theme } from "@/theme";
 
@@ -32,8 +32,14 @@ export const WalletOptionButton: FC<WalletOption> = ({
 
   const enableByWalletName = useCallback(async () => {
     if (isEnableLoading) return;
+    const isProposalDiscussionForum = window.location.pathname.includes(
+      PDF_PATHS.proposalDiscussion.replace("/", ""),
+    );
+
     const result = await enable(name);
+
     if (result?.stakeKey) {
+      if (isProposalDiscussionForum) return;
       navigate(
         // eslint-disable-next-line no-unneeded-ternary
         pathToNavigate

diff --git a/govtool/frontend/src/components/organisms/DashboardCards/ProposeGovActionDashboardCard.tsx b/govtool/frontend/src/components/organisms/DashboardCards/ProposeGovActionDashboardCard.tsx
@@ -37,9 +37,7 @@ export const ProposeGovActionDashboardCard = ({
 
     navigate(
       isProposalDiscussionForumEnabled
-        ? `${PATHS.proposalPillar.replace("/*", "")}${
-            PDF_PATHS.proposalDiscussion
-          }`
+        ? PDF_PATHS.proposalDiscussion
         : PATHS.createGovernanceAction,
     );
   }, [deposit, votingPower, isProposalDiscussionForumEnabled]);

diff --git a/govtool/frontend/src/components/organisms/HomeCards.tsx b/govtool/frontend/src/components/organisms/HomeCards.tsx
@@ -50,12 +50,7 @@ export const HomeCards = () => {
   );
 
   const navigateToProposalDiscussionPillar = useCallback(
-    () =>
-      navigate(
-        `${PATHS.connectedProposalPillar.replace("/*", "")}${
-          PDF_PATHS.proposalDiscussion
-        }`,
-      ),
+    () => navigate(PDF_PATHS.proposalDiscussion),
     [navigate],
   );
 

diff --git a/govtool/frontend/src/components/organisms/PDFWrapper.tsx b/govtool/frontend/src/components/organisms/PDFWrapper.tsx
diff --git a/govtool/frontend/src/components/organisms/TopNav.tsx b/govtool/frontend/src/components/organisms/TopNav.tsx
@@ -39,6 +39,14 @@ export const TopNav = ({ isConnectButton = true }) => {
     setIsDrawerOpen(true);
   };
 
+  const onClickConnectButton = () => {
+    if (isEnabled && stakeKey) {
+      navigate(PATHS.dashboard);
+    } else {
+      openModal({ type: "chooseWallet" });
+    }
+  };
+
   return (
     <Box position="relative" py={isMobile ? 5 : 6}>
       <AppBar
@@ -125,13 +133,7 @@ export const TopNav = ({ isConnectButton = true }) => {
                   <Grid item>
                     <Button
                       data-testid="connect-wallet-button"
-                      onClick={() => {
-                        if (isEnabled && stakeKey) {
-                          navigate(PATHS.dashboard);
-                        } else {
-                          openModal({ type: "chooseWallet" });
-                        }
-                      }}
+                      onClick={onClickConnectButton}
                       size="extraLarge"
                       variant="contained"
                     >
@@ -147,9 +149,7 @@ export const TopNav = ({ isConnectButton = true }) => {
                 {isConnectButton ? (
                   <Button
                     data-testid="connect-wallet-button"
-                    onClick={() => {
-                      openModal({ type: "chooseWallet" });
-                    }}
+                    onClick={onClickConnectButton}
                     size="small"
                     sx={{
                       marginRight: screenWidth >= 768 ? 3 : 1,

diff --git a/govtool/frontend/src/consts/navItems.tsx b/govtool/frontend/src/consts/navItems.tsx
@@ -25,8 +25,7 @@ export const NAV_ITEMS = [
   },
   {
     dataTestId: "proposed-governance-actions-link",
-    navTo:
-      PATHS.proposalPillar.replace("/*", "") + PDF_PATHS.proposalDiscussion,
+    navTo: PDF_PATHS.proposalDiscussion,
     label: i18n.t("proposalDiscussion.title"),
     newTabLink: null,
   },
@@ -71,9 +70,7 @@ export const CONNECTED_NAV_ITEMS = [
   {
     dataTestId: "proposal-discussion-link",
     label: i18n.t("proposalDiscussion.title"),
-    navTo: `${PATHS.connectedProposalPillar.replace("/*", "")}${
-      PDF_PATHS.proposalDiscussion
-    }`,
+    navTo: PDF_PATHS.proposalDiscussion,
     activeIcon: (
       <IconAcademicCap
         width="20"

diff --git a/govtool/frontend/src/consts/paths.ts b/govtool/frontend/src/consts/paths.ts
@@ -24,8 +24,6 @@ export const PATHS = {
   retireAsDrep: "/retire_drep",
   retireAsDirectVoter: "/retire_direct_voter",
   stakeKeys: "/stake_keys",
-  proposalPillar: "/proposal_pillar/*",
-  connectedProposalPillar: "/connected/proposal_pillar/*",
 };
 
 export const PDF_PATHS = {