Merge pull request #580 from ClimateMind/563-remove-the-app-bar-when-…

…doing-the-conversation-and-logged-in [#563 ] - Hide the CmAppBar when doing the User B conversation and logged in or logged out
ClimateMind · Jun 12, 2024 · d0c3061 · d0c3061
2 parents f0a5a45 + c25eb2b
commit d0c3061
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 17 deletions.
diff --git a/src/pages/SharedPages/RootPage.tsx b/src/pages/SharedPages/RootPage.tsx
@@ -1,18 +1,18 @@
-import { useEffect, useState } from "react";
-import { Outlet, useLocation } from "react-router-dom";
+import { useEffect, useState } from 'react';
+import { Outlet, useLocation } from 'react-router-dom';
 
-import { useAppDispatch, useAppSelector } from "store/hooks";
-import { CmAppBar, CmBottomTabsNavigation, CookieDialog, MenuDrawer } from "shared/components";
-import { useApiClient } from "shared/hooks";
-import { updateUserAInfo, updateUserBInfo, useAutoLogin } from "features/auth";
+import { useAppDispatch, useAppSelector } from 'store/hooks';
+import { CmAppBar, CmBottomTabsNavigation, CookieDialog, MenuDrawer } from 'shared/components';
+import { useApiClient } from 'shared/hooks';
+import { updateUserAInfo, updateUserBInfo, useAutoLogin } from 'features/auth';
 
-function RootPage() {
+function RootPage({ shouldDisplayCmBar }: { shouldDisplayCmBar: boolean }) {
   useAutoLogin();
   const location = useLocation();
 
   const apiClient = useApiClient();
   const dispatch = useAppDispatch();
-  const { sessionId } = useAppSelector(state => state.auth.userA);
+  const { sessionId } = useAppSelector((state) => state.auth.userA);
 
   const [showMenu, setShowMenu] = useState(false);
 
@@ -33,9 +33,7 @@ function RootPage() {
 
   return (
     <div style={styles.root}>
-      <header style={styles.header}>
-        <CmAppBar onShowMenu={() => setShowMenu(true)} />
-      </header>
+      <header style={styles.header}>{!shouldDisplayCmBar && <CmAppBar onShowMenu={() => setShowMenu(true)} />}</header>
 
       <main style={styles.main}>
         <Outlet />
@@ -53,12 +51,12 @@ function RootPage() {
 
 const styles: { [key: string]: React.CSSProperties } = {
   root: {
-    display: "flex",
-    flexDirection: "column",
-    minHeight: "100vh",
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: '100vh',
   },
   header: {
-    position: "sticky",
+    position: 'sticky',
     top: 0,
     display: 'flex',
     alignItems: 'center',
@@ -82,7 +80,7 @@ const styles: { [key: string]: React.CSSProperties } = {
     textAlign: 'center',
   },
   footer: {
-    position: "sticky",
+    position: 'sticky',
     bottom: 0,
     display: 'flex',
     alignItems: 'center',

diff --git a/src/router/Router.tsx b/src/router/Router.tsx
@@ -42,10 +42,16 @@ import Error404Page from 'pages/SharedPages/Error404Page';
 import AuthorizedPage from 'pages/SharedPages/AuthorizedPage';
 import UnauthorizedPage from 'pages/UserAUnauthorizedPages/UnauthorizedPage';
 
+const userBRoutes = ['landing', 'how-cm-works', 'questionnaire', 'core-values', 'shared-values-user-b', 'shared-impacts', 'shared-solutions', 'shared-summary', 'shared', 'sign-up-user-b'];
+
+const userBRoutePath = location.pathname.split('/')[1];
+
+const shouldHideCmNavigationBar = userBRoutes.includes(userBRoutePath);
+
 const router = createBrowserRouter([
   {
     path: '',
-    element: <RootPage />,
+    element: <RootPage shouldDisplayCmBar={shouldHideCmNavigationBar} />,
     errorElement: <Error404Page />,
     children: [
       // UserA unauthorized pages