feat: move navbar from LandingPage to Layout and render conditionally…

…; add redirect to LandingPage for /manage-list when user is not signed in
the-collab-lab · Oct 2, 2024 · d5a9210 · d5a9210
1 parent 9273586
commit d5a9210
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 52 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -40,8 +40,6 @@ export function App() {
 	return (
 		<Router>
 			<Routes>
-				{/* <Route path="/" element={<LandingPage user={user} />} /> */}
-				{/* Landing page root */}
 				<Route path="/" element={<Layout />}>
 					<Route
 						index
@@ -60,12 +58,18 @@ export function App() {
 						}
 					/>
 					<Route
-						path="list" //change to relative path
+						path="list"
 						element={<List data={data} listPath={listPath} />}
 					/>
 					<Route
-						path="manage-list" //changed to relative path
-						element={<ManageList listPath={listPath} user={user} data={data} />}
+						path="manage-list"
+						element={
+							user ? (
+								<ManageList listPath={listPath} user={user} data={data} />
+							) : (
+								<LandingPage user={user} />
+							)
+						}
 					/>
 				</Route>
 			</Routes>

diff --git a/src/views/LandingPage.jsx b/src/views/LandingPage.jsx
@@ -1,11 +1,6 @@
 import './LandingPage.css';
-import { useAuth, SignInButton } from '../api/useAuth.jsx';
-import { NavLink } from 'react-router-dom';
-import { IconButton } from '../components/IconButton';
 
 export function LandingPage() {
-	const { user } = useAuth();
-
 	return (
 		<div className="landing-container">
 			<img
@@ -33,27 +28,6 @@ export function LandingPage() {
 				Ready to start your journey? Click the sign-in button below to begin
 				planning your grocery runs with CollabShop today.
 			</p>
-
-			<nav className="Nav">
-				<div className="Nav-container">
-					<IconButton
-						as={NavLink}
-						className="Nav-link"
-						icon="fa-solid fa-info-circle"
-						label="Meet The Team"
-						to="/meet-the-team"
-					/>
-					{/* Render SignInButton as an IconButton in the navbar */}
-					{!user && (
-						<IconButton
-							as={SignInButton}
-							className="Nav-link"
-							icon="fa-solid fa-right-to-bracket"
-							label="Sign In"
-						/>
-					)}
-				</div>
-			</nav>
 		</div>
 	);
 }
diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
@@ -1,7 +1,7 @@
 import { Outlet, NavLink } from 'react-router-dom';
 import { IconButton } from '../components/IconButton';
 import './Layout.css';
-import { useAuth, SignOutButton } from '../api/useAuth.jsx';
+import { useAuth, SignOutButton, SignInButton } from '../api/useAuth.jsx';
 import { auth } from '../api/config.js';
 
 /**
@@ -33,26 +33,46 @@ export function Layout() {
 				</main>
 				<nav className="Nav">
 					<div className="Nav-container">
-						<IconButton
-							as={NavLink}
-							className="Nav-link"
-							icon="fa-solid fa-list"
-							label="View Lists"
-							to="/" //Home Page
-						/>
-						<IconButton
-							as={NavLink}
-							className="Nav-link"
-							icon="fa-solid fa-cart-plus"
-							label="Add Item"
-							to="manage-list" // Relative path to manage-list
-						/>
-						<IconButton
-							as={SignOutButton}
-							className="Nav-link"
-							icon="fa-solid fa-right-from-bracket"
-							label="Sign Out"
-						/>
+						{user && auth.currentUser ? (
+							<>
+								<IconButton
+									as={NavLink}
+									className="Nav-link"
+									icon="fa-solid fa-list"
+									label="View Lists"
+									to="/" //Home Page
+								/>
+								<IconButton
+									as={NavLink}
+									className="Nav-link"
+									icon="fa-solid fa-cart-plus"
+									label="Add Item"
+									to="manage-list" // Relative path to manage-list
+								/>
+								<IconButton
+									as={SignOutButton}
+									className="Nav-link"
+									icon="fa-solid fa-right-from-bracket"
+									label="Sign Out"
+								/>
+							</>
+						) : (
+							<>
+								<IconButton
+									as={NavLink}
+									className="Nav-link"
+									icon="fa-solid fa-info-circle"
+									label="Meet The Team"
+									to="/meet-the-team"
+								/>
+								<IconButton
+									as={SignInButton}
+									className="Nav-link"
+									icon="fa-solid fa-right-to-bracket"
+									label="Sign In"
+								/>
+							</>
+						)}
 					</div>
 				</nav>
 			</div>