Admin - fix js loading on nested routes (#81)

ictunion · Aug 19, 2023 · 9b977a6 · 9b977a6
1 parent 3c7b7a6
commit 9b977a6
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 6 deletions.
diff --git a/administration-panel/src/App.tsx b/administration-panel/src/App.tsx
@@ -8,6 +8,7 @@ import Layout from '@app/Layout';
 import WelcomePage from '@app/pages/Welcome';
 import NotFoundPage from '@app/pages/NotFound';
 import MembersTablePage from '@app/pages/MembersTable';
+import NewMemberPage from '@app/pages/NewMember';
 
 interface UserInfo {
     name: string,
@@ -52,7 +53,10 @@ export default class App extends React.Component<Props, AppState> {
                 <Routes>
                     <Route path="/" element={<Layout logout={this.logout.bind(this)} />}>
                         <Route index element={<WelcomePage userInfo={this.state.userInfo} />} />
-                        <Route path="members-table" element={<MembersTablePage postgrest={this.props.postgrest} />} />
+                        <Route path="members" >
+                            <Route path="table" element={<MembersTablePage postgrest={this.props.postgrest} />} />
+                            <Route path="new" element={<NewMemberPage />} />
+                        </Route>
                         <Route path="*" element={<NotFoundPage />} />
                     </Route>
                 </Routes>

diff --git a/administration-panel/src/Layout.tsx b/administration-panel/src/Layout.tsx
@@ -1,11 +1,12 @@
 import * as React from 'react';
 import AppHeader from '@app/layout/AppHeader';
 import { Outlet } from "react-router-dom";
-import { Box, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
+import { Box, Divider, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
 import { Link } from 'react-router-dom';
 import {
-    Home as HomeIcon
-    , PeopleAlt as PeopleAltIcon
+    Home as HomeIcon,
+    PeopleAlt as PeopleAltIcon,
+    PersonAddAlt1 as PersonAddIcon
 } from '@mui/icons-material';
 
 interface Props {
@@ -37,8 +38,11 @@ const Layout = (props: Props) => {
         <div className="app-wrapper">
             <AppHeader logout={props.logout}>
                 <List>
-                    <MenuItem text="Home" route="/"><HomeIcon /></MenuItem>
-                    <MenuItem text="Members Table" route="/members-table"><PeopleAltIcon /></MenuItem>
+                    <MenuItem text="Dashboard" route="/"><HomeIcon /></MenuItem>
+                    <Divider />
+                    <MenuItem text="Members Table" route="/members/table"><PeopleAltIcon /></MenuItem>
+                    <MenuItem text="Add New Member" route="/members/new"><PersonAddIcon /></MenuItem>
+                    <Divider />
                 </List>
             </AppHeader>
             <Box className="app-main">

diff --git a/administration-panel/src/pages/NewMember.tsx b/administration-panel/src/pages/NewMember.tsx
@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+const NewMember = (props: {}) => {
+    return (
+        <h1>Add New Member</h1>
+    )
+}
+
+export default NewMember;
diff --git a/administration-panel/webpack.config.js b/administration-panel/webpack.config.js
@@ -41,6 +41,7 @@ module.exports = (env, argv) => {
             new CleanWebpackPlugin(),
             new HtmlWebpackPlugin({
                 template: path.resolve(__dirname, "./src/templates/index.html"),
+                publicPath: '/',
             }),
         ],
     };