15.1 Implement protected route component and standardize icons

src/App.jsx

@@ -1,5 +1,6 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { Home, Layout, List, ManageList, LandingPage } from './views';
+import { ProtectedRoute } from './components/ProtectedRoute';
 import { useAuth, useShoppingListData, useShoppingLists } from './api';
 import { useStateWithStorage } from './utils';
 
@@ -44,17 +45,15 @@ export function App() {
 					<Route
 						index
 						element={
-							user ? (
+							<ProtectedRoute>
 								<Home
 									data={data}
 									lists={lists}
 									listPath={listPath}
 									setListPath={setListPath}
 									user={user}
 								/>
-							) : (
-								<LandingPage user={user} />
-							)
+							</ProtectedRoute>
 						}
 					/>
 					<Route

src/api/useAuth.jsx

@@ -9,14 +9,13 @@ import { useNavigate } from 'react-router-dom';
  * the button redirects the user to the Google OAuth sign-in page.
  * After the user signs in, they are redirected back to the app.
  */
-export const SignInButton = ({ className }) => (
+export const SignInButton = ({ children, className }) => (
 	<button
-		className={className}
 		type="button"
+		className={className}
 		onClick={() => signInWithPopup(auth, new GoogleAuthProvider())}
 	>
-		<i className="fa-solid fa-right-to-bracket"></i> <br />
-		Sign In
+		{children}
 	</button>
 );
 

src/components/IconButton.jsx

@@ -2,14 +2,13 @@ import '../views/Layout.css';
 
 export function IconButton({
 	as: Component = 'button',
-	icon,
-	label,
+	IconComponent,
 	...props
 }) {
 	return (
 		<Component {...props}>
-			{icon && <i className={icon}></i>} <br />
-			{label && <span>{label}</span>}
+			{IconComponent && <IconComponent />} <br />
+			{props.label && <span>{props.label}</span>}
 		</Component>
 	);
 }

src/components/ProtectedRoute.jsx

@@ -0,0 +1,11 @@
+import { useAuth } from '../api/useAuth.jsx';
+import { LandingPage } from '../views/index.js';
+
+export function ProtectedRoute({ children }) {
+	const { user } = useAuth();
+
+	if (!user) {
+		return <LandingPage />;
+	}
+	return children;
+}

src/views/Layout.jsx

@@ -1,8 +1,14 @@
 import { Outlet, NavLink } from 'react-router-dom';
+import {
+	FaList,
+	FaSignInAlt,
+	FaSignOutAlt,
+	FaInfoCircle,
+} from 'react-icons/fa';
 import { IconButton } from '../components/IconButton';
-import './Layout.css';
 import { useAuth, SignOutButton, SignInButton } from '../api/useAuth.jsx';
 import { auth } from '../api/config.js';
+import './Layout.css';
 
 /**
  * TODO: The links defined in this file don't work!
@@ -61,14 +67,14 @@ export function Layout() {
 								<IconButton
 									as={NavLink}
 									className="Nav-link"
-									icon="fa-solid fa-info-circle"
+									IconComponent={FaInfoCircle}
 									label="Meet The Team"
 									to="/meet-the-team"
 								/>
 								<IconButton
+									aria-label="Sign In"
 									as={SignInButton}
-									className="Nav-link"
-									icon="fa-solid fa-right-to-bracket"
+									IconComponent={FaSignInAlt}
 									label="Sign In"
 								/>
 							</>