Move Helmet/Title to DefaultLayout

JohnDuprey · Apr 29, 2024 · 58377de · 58377de
1 parent aa78d34
commit 58377de
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 71 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,16 +1,15 @@
 import React, { Suspense } from 'react'
-import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom'
+import { BrowserRouter, Route, Routes, Navigate, useLocation } from 'react-router-dom'
 import { PrivateRoute, FullScreenLoading, ErrorBoundary } from 'src/components/utilities'
 import 'src/scss/style.scss'
-import { Helmet } from 'react-helmet-async'
+import { Helmet, HelmetProvider } from 'react-helmet-async'
 import Skeleton from 'react-loading-skeleton'
 import TimeAgo from 'javascript-time-ago'
 import en from 'javascript-time-ago/locale/en.json'
 TimeAgo.addDefaultLocale(en)
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { fas } from '@fortawesome/free-solid-svg-icons'
 import routes from 'src/routes'
-import { useAuthCheck } from './components/utilities/CippauthCheck'
 import importsMap from './importsMap'
 
 library.add(fas)
@@ -32,59 +31,58 @@ const Logout = React.lazy(() => import('./views/pages/login/Logout'))
 const App = () => {
   return (
     <BrowserRouter>
-      <Suspense fallback={<FullScreenLoading />}>
-        <Helmet>
-          <title>CIPP</title>
-        </Helmet>
-        <Routes>
-          <Route exact path="/LogoutRedirect" name="LogoutRedirect" element={<PageLogOut />} />
-          <Route exact path="/401" name="Page 401" element={<Page401 />} />
-          <Route exact path="/403" name="Page 403" element={<Page403 />} />
-          <Route exact path="/404" name="Page 404" element={<Page404 />} />
-          <Route exact path="/500" name="Page 500" element={<Page500 />} />
-          <Route exact path="/login" name="Login" element={<Login />} />
-          <Route exact path="/logout" name="Logout" element={<Logout />} />
-          <Route
-            path="/"
-            element={
-              <PrivateRoute>
-                <DefaultLayout />
-              </PrivateRoute>
-            }
-          >
-            {routes.map((route, idx) => {
-              const allowedRoles = route.allowedRoles
-              const Routecomponent = dynamicImport(route.path)
-              //console.log('route', route)
-              //console.log('Routecomponent', Routecomponent)
-              return (
-                route.component && (
-                  <Route
-                    key={`route-${idx}`}
-                    path={route.path}
-                    exact={route.exact}
-                    name={route.name}
-                    element={
-                      <PrivateRoute allowedRoles={allowedRoles}>
-                        <Suspense fallback={<Skeleton />}>
-                          <Helmet>
-                            <title>CIPP - {route.name}</title>
-                          </Helmet>
-                          <ErrorBoundary key={route.name}>
-                            <Routecomponent />
-                          </ErrorBoundary>
-                        </Suspense>
-                      </PrivateRoute>
-                    }
-                  />
+      <HelmetProvider>
+        <Suspense fallback={<FullScreenLoading />}>
+          <Helmet>
+            <title>CIPP</title>
+          </Helmet>
+          <Routes>
+            <Route exact path="/LogoutRedirect" name="LogoutRedirect" element={<PageLogOut />} />
+            <Route exact path="/401" name="Page 401" element={<Page401 />} />
+            <Route exact path="/403" name="Page 403" element={<Page403 />} />
+            <Route exact path="/404" name="Page 404" element={<Page404 />} />
+            <Route exact path="/500" name="Page 500" element={<Page500 />} />
+            <Route exact path="/login" name="Login" element={<Login />} />
+            <Route exact path="/logout" name="Logout" element={<Logout />} />
+            <Route
+              path="/"
+              element={
+                <PrivateRoute>
+                  <DefaultLayout />
+                </PrivateRoute>
+              }
+            >
+              {routes.map((route, idx) => {
+                const allowedRoles = route.allowedRoles
+                const Routecomponent = dynamicImport(route.path)
+                //console.log('route', route)
+                //console.log('Routecomponent', Routecomponent)
+                return (
+                  route.component && (
+                    <Route
+                      key={`route-${idx}`}
+                      path={route.path}
+                      exact={route.exact}
+                      name={route.name}
+                      element={
+                        <PrivateRoute allowedRoles={allowedRoles}>
+                          <Suspense fallback={<Skeleton />}>
+                            <ErrorBoundary key={route.name}>
+                              <Routecomponent />
+                            </ErrorBoundary>
+                          </Suspense>
+                        </PrivateRoute>
+                      }
+                    />
+                  )
                 )
-              )
-            })}
-            <Route path="/" element={<Navigate to="/home" replace={true} />} />
-          </Route>
-          <Route path="*" name="Page 404" element={<Page404 />} />
-        </Routes>
-      </Suspense>
+              })}
+              <Route path="/" element={<Navigate to="/home" replace={true} />} />
+            </Route>
+            <Route path="*" name="Page 404" element={<Page404 />} />
+          </Routes>
+        </Suspense>
+      </HelmetProvider>
     </BrowserRouter>
   )
 }

diff --git a/src/hooks/useNavFavouriteCheck.jsx b/src/hooks/useNavFavouriteCheck.jsx
@@ -28,7 +28,7 @@ export const useNavFavouriteCheck = (navigation) => {
     var items = []
 
     recentPages.map((path) => {
-      const item = routes.find((route) => route.path === path)
+      const item = routes.find((route) => route.path.toLowerCase() === path.toLowerCase())
       if (item?.path) {
         items.push({
           name: item.name,

diff --git a/src/layout/DefaultLayout.jsx b/src/layout/DefaultLayout.jsx
@@ -8,6 +8,8 @@ import { toggleSwitcher } from 'src/store/features/switcher'
 import { useHotkeys } from 'react-hotkeys-hook'
 import { useMediaPredicate } from 'react-media-hook'
 import { setRecentPages } from 'src/store/features/app'
+import routes from 'src/routes'
+import { Helmet } from 'react-helmet-async'
 
 const DefaultLayout = () => {
   const preferredTheme = useMediaPredicate('(prefers-color-scheme: dark)') ? 'impact' : 'cyberdrain'
@@ -17,6 +19,15 @@ const DefaultLayout = () => {
   const dispatch = useDispatch()
   const location = useLocation()
 
+  const [title, setTitle] = useState('CIPP')
+  useEffect(() => {
+    let route = routes.find((route) => route.path.toLowerCase() === location.pathname.toLowerCase())
+    if (route?.name) {
+      console.log(route)
+      setTitle(route.name)
+    }
+  }, [setTitle, location.pathname])
+
   let theme
   if (themePreference === 'default') {
     theme = preferredTheme
@@ -70,24 +81,29 @@ const DefaultLayout = () => {
   )
 
   return (
-    <div>
-      <FastSwitcherModal />
-      <ModalRoot />
-      <Toasts />
+    <>
+      <Helmet>
+        <title>CIPP - {title}</title>
+      </Helmet>
+      <div>
+        <FastSwitcherModal />
+        <ModalRoot />
+        <Toasts />
 
-      <AppSidebar />
-      <div className="wrapper d-flex flex-column min-vh-100">
-        <AppHeader />
-        <div className="body flex-grow-1 px-xl-3">
-          <CContainer fluid>
-            <Suspense fallback={<FullScreenLoading />}>
-              <Outlet />
-            </Suspense>
-          </CContainer>
+        <AppSidebar />
+        <div className="wrapper d-flex flex-column min-vh-100">
+          <AppHeader />
+          <div className="body flex-grow-1 px-xl-3">
+            <CContainer fluid>
+              <Suspense fallback={<FullScreenLoading />}>
+                <Outlet />
+              </Suspense>
+            </CContainer>
+          </div>
+          <AppFooter />
         </div>
-        <AppFooter />
       </div>
-    </div>
+    </>
   )
 }