Add more paths handling (#315)

- Make user management tabs actual pages - Standalone terms-and-conditions page - Auto redirect non-existing page - Change "CANOPEUM" text for username in user management sidenav
BesLogic · Dec 4, 2024 · 52e4525 · 52e4525
1 parent 25c2841
commit 52e4525
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 30 deletions.
diff --git a/canopeum_frontend/src/components/MainLayout.tsx b/canopeum_frontend/src/components/MainLayout.tsx
@@ -3,6 +3,7 @@ import { Navigate, Outlet, Route, Routes } from 'react-router-dom'
 
 import { AuthenticationContext } from './context/AuthenticationContext'
 import Navbar from './Navbar'
+import TermsAndPolicies from '@components/settings/TermsAndPolicies'
 import { appRoutes } from '@constants/routes.constant'
 import Analytics from '@pages/Analytics'
 import AnalyticsSite from '@pages/AnalyticsSite'
@@ -68,15 +69,21 @@ const MainLayout = () => {
           <Route element={<Home />} path='/home' />
           <Route element={<Analytics />} path='/sites' />
           <Route element={<AnalyticsSite />} path='/sites/:siteId' />
-          <Route element={<UserManagement />} path='/user-management' />
+          <Route element={<UserManagement />} path='/user-management/*' />
           <Route element={<Utilities />} path='/utilities' />
         </Route>
-        <Route element={<MapPage />} path='*' />
 
         {/* The following routes are accessible to Visitors without any authentication */}
+        <Route element={<TermsAndPolicies />} path='/terms-and-policies' />
         <Route element={<SiteSocialPage />} path='/sites/:siteId/social' />
         <Route element={<PostDetailsPage />} path='/posts/:postId' />
         <Route element={<MapPage />} path='/map' />
+
+        {/* Fallback route */}
+        <Route
+          element={<Navigate replace to='/map' />}
+          path='*'
+        />
       </Route>
     </Routes>
   )

diff --git a/canopeum_frontend/src/components/Navbar.tsx b/canopeum_frontend/src/components/Navbar.tsx
@@ -112,11 +112,11 @@ const Navbar = () => {
             {isAuthenticated && (
               <Link
                 className={`nav-item nav-link ${
-                  location.pathname === appRoutes.userManagment
+                  (Object.values(appRoutes.userManagment) as string[]).includes(location.pathname)
                     ? 'active'
                     : ''
                 }`}
-                to={appRoutes.userManagment}
+                to={appRoutes.userManagment.myProfile}
               >
                 <span className='material-symbols-outlined icon-lg'>account_circle</span>
                 <span className='nav-link-label'>{translate('navbar.settings')}</span>

diff --git a/canopeum_frontend/src/constants/routes.constant.ts b/canopeum_frontend/src/constants/routes.constant.ts
@@ -6,7 +6,13 @@ export const appRoutes = {
   sites: '/sites',
   site: (siteId: number) => `/sites/${siteId}`,
   siteSocial: (siteId: number) => `/sites/${siteId}/social`,
-  userManagment: '/user-management',
+  termsAndPolicies: '/terms-and-policies',
+  userManagment: {
+    '': '/user-management',
+    myProfile: '/user-management/my-profile',
+    manageAdmins: '/user-management/manage-admins',
+    termsAndPolicies: '/user-management/terms-and-policies',
+  },
   // utilities: '/utilities',  // For development purposes
   map: '/map',
-}
+} as const
diff --git a/canopeum_frontend/src/pages/UserManagement.tsx b/canopeum_frontend/src/pages/UserManagement.tsx
@@ -1,29 +1,33 @@
 import './UserManagement.scss'
 
-import { useContext, useState } from 'react'
+import { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
+import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom'
 
 import { AuthenticationContext } from '@components/context/AuthenticationContext'
 import EditProfile from '@components/settings/EditProfile'
 import ManageAdmins from '@components/settings/ManageAdmins'
 import SettingsTab from '@components/settings/SettingsTab'
 import TermsAndPolicies from '@components/settings/TermsAndPolicies'
+import { appRoutes } from '@constants/routes.constant'
 import type { RoleEnum } from '@services/api'
 
-type UserManagementTab = 'editProfile' | 'logout' | 'manageAdmins' | 'termsAndPolicies'
+type UserManagementTab =
+  | (typeof appRoutes.userManagment)[keyof Omit<typeof appRoutes.userManagment, ''>]
+  | 'logout'
 
 const tabs: { type: UserManagementTab, translationKey: string, roles?: RoleEnum[] }[] = [
   {
-    type: 'editProfile',
+    type: appRoutes.userManagment.myProfile,
     translationKey: 'settings.tabs.edit-profile',
   },
   {
-    type: 'manageAdmins',
+    type: appRoutes.userManagment.manageAdmins,
     translationKey: 'settings.tabs.manage-admins',
     roles: ['MegaAdmin' as RoleEnum],
   },
   {
-    type: 'termsAndPolicies',
+    type: appRoutes.userManagment.termsAndPolicies,
     translationKey: 'settings.tabs.terms-and-policies',
   },
   {
@@ -35,28 +39,17 @@ const tabs: { type: UserManagementTab, translationKey: string, roles?: RoleEnum[
 const UserManagement = () => {
   const { t: translate } = useTranslation()
   const { logout, currentUser } = useContext(AuthenticationContext)
-  const [selectedTab, setSelectedTab] = useState<UserManagementTab>('editProfile')
+  const navigate = useNavigate()
+  const location = useLocation()
 
-  const displayTabContent = () => {
-    if (selectedTab === 'termsAndPolicies') {
-      return <TermsAndPolicies />
-    }
-
-    if (selectedTab === 'manageAdmins' && currentUser?.role === 'MegaAdmin') {
-      return <ManageAdmins />
-    }
-
-    return <EditProfile />
-  }
-
-  const onTabClick = (tabType: UserManagementTab) => {
-    if (tabType === 'logout') {
+  const onTabClick = (tabPath: UserManagementTab) => {
+    if (tabPath === 'logout') {
       logout()
 
       return
     }
 
-    setSelectedTab(tabType)
+    navigate(tabPath)
   }
 
   const tabsDisplay = () =>
@@ -66,7 +59,7 @@ const UserManagement = () => {
         <SettingsTab
           key={tab.type}
           onClick={() => onTabClick(tab.type)}
-          selected={selectedTab === tab.type}
+          selected={location.pathname === tab.type}
         >
           {translate(tab.translationKey)}
         </SettingsTab>
@@ -78,15 +71,27 @@ const UserManagement = () => {
         <div className='col-12 col-md-5 col-lg-3 pb-4'>
           <div className='settings-left-nav-menu card py-3 px-4'>
             <div className='py-3 d-none d-md-block'>
-              <h4 className='text-center'>CANOPEUM</h4>
+              <h4 className='text-center'>
+                {currentUser?.role === 'MegaAdmin'
+                  ? 'CANOPEUM'
+                  : currentUser?.username}
+              </h4>
             </div>
 
             <div className='d-flex flex-column gap-2'>{tabsDisplay()}</div>
           </div>
         </div>
 
         <div className='settings-tab-content-container col-12 col-md-7 col-lg-9 pb-4'>
-          {displayTabContent()}
+          <Routes>
+            <Route element={<EditProfile />} path='/my-profile' />
+            <Route element={<ManageAdmins />} path='/manage-admins' />
+            <Route element={<TermsAndPolicies />} path='/terms-and-policies' />
+            <Route
+              element={<Navigate replace to={appRoutes.userManagment.myProfile} />}
+              path='*'
+            />
+          </Routes>
         </div>
       </div>
     </div>