From 32b89d42785bc4642947a697a9ce3d9e38308952 Mon Sep 17 00:00:00 2001
From: alicezhaoeon <alice.zhao.yiran@gmail.com>
Date: Tue, 12 Nov 2024 20:20:36 -0500
Subject: [PATCH] Added NavBar

added the NavBar to all pages except for /login and /signup
---
 frontend/src/App.tsx                | 184 +++++++++++++++-------------
 frontend/src/Layout.tsx             |  62 ++++++++++
 frontend/src/constants/PageNames.ts |  22 ++++
 3 files changed, 180 insertions(+), 88 deletions(-)
 create mode 100644 frontend/src/Layout.tsx
 create mode 100644 frontend/src/constants/PageNames.ts

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index d95b0d8..96f394d 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -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";
@@ -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";
 
@@ -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>
diff --git a/frontend/src/Layout.tsx b/frontend/src/Layout.tsx
new file mode 100644
index 0000000..79a3ab4
--- /dev/null
+++ b/frontend/src/Layout.tsx
@@ -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;
\ No newline at end of file
diff --git a/frontend/src/constants/PageNames.ts b/frontend/src/constants/PageNames.ts
new file mode 100644
index 0000000..4a7662a
--- /dev/null
+++ b/frontend/src/constants/PageNames.ts
@@ -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;