Skip to content

Commit

Permalink
Added NavBar
Browse files Browse the repository at this point in the history
added the NavBar to all pages except for /login and /signup
  • Loading branch information
aliicezhao committed Nov 13, 2024
1 parent 0d18e06 commit 32b89d4
Show file tree
Hide file tree
Showing 3 changed files with 180 additions and 88 deletions.
184 changes: 96 additions & 88 deletions frontend/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import SimpleEntityDisplayPage from "./components/pages/SimpleEntityDisplayPage"
import NotFound from "./components/pages/NotFound";
import UpdatePage from "./components/pages/UpdatePage";
import SimpleEntityUpdatePage from "./components/pages/SimpleEntityUpdatePage";
import * as Routes from "./constants/Routes";
import * as AppRoutes from "./constants/Routes";
import * as AuthConstants from "./constants/AuthConstants";
import AUTHENTICATED_USER_KEY from "./constants/AuthConstants";
import AuthContext from "./contexts/AuthContext";
Expand All @@ -30,6 +30,7 @@ import NotificationsPage from "./components/pages/NotificationsPage";
import ProfilePage from "./components/pages/ProfilePage";
import UserManagementPage from "./components/pages/UserManagementPage";
import AdminPage from "./components/pages/AdminPage";
import Layout from "./Layout";

import { AuthenticatedUser } from "./types/AuthTypes";

Expand Down Expand Up @@ -59,93 +60,100 @@ const App = (): React.ReactElement => {
>
<Router>
<Switch>
<Route exact path={Routes.LOGIN_PAGE} component={Login} />
<Route exact path={Routes.SIGNUP_PAGE} component={Signup} />
<PrivateRoute
exact
path={Routes.HOME_PAGE}
component={PetListPage}
allowedRoles={AuthConstants.ALL_ROLES}
/>
<PrivateRoute
exact
path={Routes.CREATE_ENTITY_PAGE}
component={CreatePage}
allowedRoles={AuthConstants.ADMIN_AND_BEHAVIOURISTS}
/>
<PrivateRoute
exact
path={Routes.UPDATE_ENTITY_PAGE}
component={UpdatePage}
allowedRoles={AuthConstants.ADMIN_AND_BEHAVIOURISTS}
/>
<PrivateRoute
exact
path={Routes.DISPLAY_ENTITY_PAGE}
component={DisplayPage}
allowedRoles={AuthConstants.ALL_ROLES}
/>
<PrivateRoute
exact
path={Routes.CREATE_SIMPLE_ENTITY_PAGE}
component={SimpleEntityCreatePage}
allowedRoles={AuthConstants.ADMIN_AND_BEHAVIOURISTS}
/>
<PrivateRoute
exact
path={Routes.UPDATE_SIMPLE_ENTITY_PAGE}
component={SimpleEntityUpdatePage}
allowedRoles={AuthConstants.ADMIN_AND_BEHAVIOURISTS}
/>
<PrivateRoute
exact
path={Routes.DISPLAY_SIMPLE_ENTITY_PAGE}
component={SimpleEntityDisplayPage}
allowedRoles={AuthConstants.ALL_ROLES}
/>
<PrivateRoute
exact
path={Routes.EDIT_TEAM_PAGE}
component={EditTeamInfoPage}
allowedRoles={AuthConstants.ADMIN_AND_BEHAVIOURISTS}
/>
<PrivateRoute
exact
path={Routes.HOOKS_PAGE}
component={HooksDemo}
allowedRoles={AuthConstants.ALL_ROLES}
/>
<PrivateRoute
exact
path={Routes.DEV_UTILITY_PAGE}
component={Default}
allowedRoles={AuthConstants.ALL_ROLES}
/>
<PrivateRoute
exact
path={Routes.NOTIFICATIONS_PAGE}
component={NotificationsPage}
allowedRoles={AuthConstants.ALL_ROLES}
/>
<PrivateRoute
exact
path={Routes.PROFILE_PAGE}
component={ProfilePage}
allowedRoles={AuthConstants.ALL_ROLES}
/>
<PrivateRoute
exact
path={Routes.ADMIN_PAGE}
component={AdminPage}
allowedRoles={AuthConstants.ADMIN_AND_BEHAVIOURISTS}
/>
<PrivateRoute
exact
path={Routes.USER_MANAGEMENT_PAGE}
component={UserManagementPage}
allowedRoles={AuthConstants.ADMIN_AND_BEHAVIOURISTS}
/>
<Route exact path="*" component={NotFound} />
{/* Public Routes */}
<Route exact path={AppRoutes.LOGIN_PAGE} component={Login} />
<Route exact path={AppRoutes.SIGNUP_PAGE} component={Signup} />

{/* Protected Routes Wrapped in Layout */}
<Layout>
<PrivateRoute
exact
path={AppRoutes.HOME_PAGE}
component={PetListPage}
allowedRoles={AuthConstants.ALL_ROLES}
/>
<PrivateRoute
exact
path={AppRoutes.CREATE_ENTITY_PAGE}
component={CreatePage}
allowedRoles={AuthConstants.ADMIN_AND_BEHAVIOURISTS}
/>
<PrivateRoute
exact
path={AppRoutes.UPDATE_ENTITY_PAGE}
component={UpdatePage}
allowedRoles={AuthConstants.ADMIN_AND_BEHAVIOURISTS}
/>
<PrivateRoute
exact
path={AppRoutes.DISPLAY_ENTITY_PAGE}
component={DisplayPage}
allowedRoles={AuthConstants.ALL_ROLES}
/>
<PrivateRoute
exact
path={AppRoutes.CREATE_SIMPLE_ENTITY_PAGE}
component={SimpleEntityCreatePage}
allowedRoles={AuthConstants.ADMIN_AND_BEHAVIOURISTS}
/>
<PrivateRoute
exact
path={AppRoutes.UPDATE_SIMPLE_ENTITY_PAGE}
component={SimpleEntityUpdatePage}
allowedRoles={AuthConstants.ADMIN_AND_BEHAVIOURISTS}
/>
<PrivateRoute
exact
path={AppRoutes.DISPLAY_SIMPLE_ENTITY_PAGE}
component={SimpleEntityDisplayPage}
allowedRoles={AuthConstants.ALL_ROLES}
/>
<PrivateRoute
exact
path={AppRoutes.EDIT_TEAM_PAGE}
component={EditTeamInfoPage}
allowedRoles={AuthConstants.ADMIN_AND_BEHAVIOURISTS}
/>
<PrivateRoute
exact
path={AppRoutes.HOOKS_PAGE}
component={HooksDemo}
allowedRoles={AuthConstants.ALL_ROLES}
/>
<PrivateRoute
exact
path={AppRoutes.DEV_UTILITY_PAGE}
component={Default}
allowedRoles={AuthConstants.ALL_ROLES}
/>
<PrivateRoute
exact
path={AppRoutes.NOTIFICATIONS_PAGE}
component={NotificationsPage}
allowedRoles={AuthConstants.ALL_ROLES}
/>
<PrivateRoute
exact
path={AppRoutes.PROFILE_PAGE}
component={ProfilePage}
allowedRoles={AuthConstants.ALL_ROLES}
/>
<PrivateRoute
exact
path={AppRoutes.ADMIN_PAGE}
component={AdminPage}
allowedRoles={AuthConstants.ADMIN_AND_BEHAVIOURISTS}
/>
<PrivateRoute
exact
path={AppRoutes.USER_MANAGEMENT_PAGE}
component={UserManagementPage}
allowedRoles={AuthConstants.ADMIN_AND_BEHAVIOURISTS}
/>
</Layout>

{/* Fallback Route */}
<Route path="*" component={NotFound} />
</Switch>
</Router>
</AuthContext.Provider>
Expand Down
62 changes: 62 additions & 0 deletions frontend/src/Layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import React, { ReactNode } from 'react';
import { useLocation } from 'react-router-dom';
import NavBar from './components/common/navbar/NavBar';
import PAGE_NAMES from './constants/PageNames';

interface LayoutProps {
children: ReactNode;
}

const Layout: React.FC<LayoutProps> = ({ children }) => {
const location = useLocation();

const getPageName = () => {
switch (location.pathname) {
case '/':
return PAGE_NAMES.HOME;
case '/login':
return PAGE_NAMES.LOGIN;
case '/signup':
return PAGE_NAMES.SIGNUP;
case '/edit-team':
return PAGE_NAMES.EDIT_TEAM;
case '/entity':
return PAGE_NAMES.DISPLAY_ENTITY;
case '/entity/create':
return PAGE_NAMES.CREATE_ENTITY;
case '/entity/update':
return PAGE_NAMES.UPDATE_ENTITY;
case '/simpleEntity':
return PAGE_NAMES.DISPLAY_SIMPLE_ENTITY;
case '/simpleEntity/create':
return PAGE_NAMES.CREATE_SIMPLE_ENTITY;
case '/simpleEntity/update':
return PAGE_NAMES.UPDATE_SIMPLE_ENTITY;
case '/hooks':
return PAGE_NAMES.HOOKS;
case '/notifications':
return PAGE_NAMES.NOTIFICATIONS;
case '/profile':
return PAGE_NAMES.PROFILE;
case '/dev-utility':
return PAGE_NAMES.DEV_UTILITY;
case '/admin/users':
return PAGE_NAMES.USER_MANAGEMENT;
case '/admin':
return PAGE_NAMES.ADMIN;
default:
return 'Page';
}
};

return (
<div>
<NavBar pageName={getPageName()} />
<main>
{children}
</main>
</div>
);
};

export default Layout;
22 changes: 22 additions & 0 deletions frontend/src/constants/PageNames.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
// pageNames.ts
const PAGE_NAMES = {
HOME: 'Home',
LOGIN: 'Login',
SIGNUP: 'Sign Up',
EDIT_TEAM: 'Edit Team',
DISPLAY_ENTITY: 'Entity Details',
CREATE_ENTITY: 'Create Entity',
UPDATE_ENTITY: 'Update Entity',
DISPLAY_SIMPLE_ENTITY: 'Simple Entity Details',
CREATE_SIMPLE_ENTITY: 'Create Simple Entity',
UPDATE_SIMPLE_ENTITY: 'Update Simple Entity',
HOOKS: 'Hooks Demo',
NOTIFICATIONS: 'Notifications',
PROFILE: 'Profile',
DEV_UTILITY: 'Developer Utility',
USER_MANAGEMENT: 'User Management',
ADMIN: 'Admin Dashboard',
// Add additional page names as needed
};

export default PAGE_NAMES;

0 comments on commit 32b89d4

Please sign in to comment.