react-app: Create subrouter for ProposalDetailScreen

refs oursky#128

Author: hochiw

react-app/src/components/ProposalDetailScreen/ProposalDetailRouter.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { useRoutes, Navigate } from "react-router-dom";
+import AppRoutes from "../../navigation/AppRoutes";
+import ProposalDetailScreen from "./ProposalDetailScreen";
+
+export enum ProposalDetailPanelTab {
+  Votes = "votes",
+  Deposits = "deposits",
+}
+
+const ProposalDetailRouter: React.FC = () => {
+  return useRoutes([
+    {
+      path: "/",
+      element: <ProposalDetailScreen />,
+      children: [
+        {
+          path: ProposalDetailPanelTab.Votes,
+          element: <div>votes</div>,
+        },
+        {
+          path: ProposalDetailPanelTab.Deposits,
+          element: <div>deposits</div>,
+        },
+        {
+          path: "*",
+          element: <Navigate to={AppRoutes.NotFound} />,
+        },
+      ],
+    },
+  ]);
+};
+
+export default ProposalDetailRouter;

react-app/src/navigation/AppRouter.tsx

@@ -1,15 +1,15 @@
 import React from "react";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
 import CreateProposalScreen from "../components/CreateProposalScreen/CreateProposalScreen";
 import DummyScreen from "../components/DummyScreen/DummyScreen";
 import ErrorView, { ErrorType } from "../components/ErrorView/ErrorView";
 import OverviewScreen from "../components/OverviewScreen/OverviewScreen";
 import PortfolioScreen from "../components/PortfolioScreen/PortfolioScreen";
-import ProposalDetailScreen from "../components/ProposalDetailScreen/ProposalDetailScreen";
 import ProposalScreen from "../components/ProposalScreen/ProposalScreen";
 import WalletConnectingScreen from "../components/WalletConnectingScreen/WalletConnectingScreen";
 import { useWallet, ConnectionStatus } from "../providers/WalletProvider";
 import AppScaffold from "../components/AppScaffold/AppScaffold";
+import ProposalDetailRouter from "../components/ProposalDetailScreen/ProposalDetailRouter";
 import AppRoutes from "./AppRoutes";
 
 const AppRouter: React.FC = () => {
@@ -26,13 +26,17 @@ const AppRouter: React.FC = () => {
             element={<CreateProposalScreen />}
           />
           <Route
-            path={AppRoutes.ProposalDetail}
-            element={<ProposalDetailScreen />}
+            path={`${AppRoutes.ProposalDetail}/*`}
+            element={<ProposalDetailRouter />}
           />
           <Route path={AppRoutes.Portfolio} element={<PortfolioScreen />} />
         </Route>
 
-        <Route path="*" element={<ErrorView type={ErrorType.NotFound} />} />
+        <Route
+          path={AppRoutes.NotFound}
+          element={<ErrorView type={ErrorType.NotFound} />}
+        />
+        <Route path="*" element={<Navigate to={AppRoutes.NotFound} />} />
       </Routes>
 
       {wallet.status === ConnectionStatus.Connecting && (

react-app/src/navigation/AppRoutes.ts

@@ -5,6 +5,7 @@ const AppRoutes = Object.freeze({
   ProposalDetail: "/proposals/:id",
   NewProposal: "/proposals/new",
   Portfolio: "/portfolio",
+  NotFound: "/not-found",
 });
 
 export default AppRoutes;