Restrict app access to anonymous users

src/App.jsx

@@ -1,6 +1,6 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 
-import { Home, Layout, List, ManageList } from './views';
+import { Home, Layout, List, ManageList, About } from './views';
 
 import { useAuth, useShoppingListData, useShoppingLists } from './api';
 
@@ -55,6 +55,7 @@ export function App() {
 							/>
 						}
 					/>
+					<Route path="/about" element={<About />} />
 					<Route
 						path="/list"
 						element={<List data={data} lists={lists} listPath={listPath} />}

src/views/About.jsx

@@ -0,0 +1,17 @@
+export function About() {
+	return (
+		<>
+			<h2>This is the About page</h2>
+			<p>We want to add following info here:</p>
+			<ul>
+				<li>introduction to the app - what does it do</li>
+				<li>how to use the app</li>
+				<li>info/link to collab lab</li>
+				<li>github link to the app repo</li>
+				<li>
+					info/github links to dev team - <i>optional</i>
+				</li>
+			</ul>
+		</>
+	);
+}

src/views/Home.jsx

@@ -3,11 +3,14 @@ import { SingleList } from '../components';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { createList } from '../api/firebase';
+import { auth } from '../api/config.js';
+import { SignInButton, useAuth } from '../api/useAuth';
 
 export function Home({ data, setListPath, userId, userEmail }) {
 	const [listName, setListName] = useState('');
 	const [message, setMessage] = useState('');
 	const navigate = useNavigate();
+	const { user } = useAuth();
 
 	const handleCreateListButton = async (e) => {
 		e.preventDefault();
@@ -31,43 +34,53 @@ export function Home({ data, setListPath, userId, userEmail }) {
 
 	return (
 		<div className="Home">
-			<p>
-				Hello from the home (<code>/</code>) page!
-			</p>
-			{data.length === 0 && (
-				<p>
-					{' '}
-					It seems you don&apos;t have any lists yet, Please create a list using
-					the form below
-				</p>
-			)}
-			{data.length > 0 && (
-				<ul>
-					{data.map((list, id) => (
-						<SingleList
-							key={id}
-							name={list.name}
-							path={list.path}
-							setListPath={setListPath}
+			{!!user ? (
+				<>
+					<p>Welcome back {auth.currentUser.displayName}!</p>
+					{data.length === 0 && (
+						<p>
+							{' '}
+							It seems you don&apos;t have any lists yet, Please create a list
+							using the form below
+						</p>
+					)}
+					{data.length > 0 && (
+						<ul>
+							{data.map((list, id) => (
+								<SingleList
+									key={id}
+									name={list.name}
+									path={list.path}
+									setListPath={setListPath}
+								/>
+							))}
+						</ul>
+					)}
+
+					<form onSubmit={handleCreateListButton}>
+						<label htmlFor="listName">List Name:</label>
+						<input
+							type="text"
+							id="listName"
+							value={listName}
+							onChange={(e) => setListName(e.target.value)}
+							placeholder="Enter the name of your new list"
 						/>
-					))}
-				</ul>
+						<button type="submit" className="button">
+							Create list
+						</button>
+						{message}
+					</form>
+				</>
+			) : (
+				<>
+					<p>
+						Welcome to the Shopping List app. Some catchy phrase / intro
+						message. Picture below?
+					</p>
+					<SignInButton></SignInButton>
+				</>
 			)}
-
-			<form onSubmit={handleCreateListButton}>
-				<label htmlFor="listName">List Name:</label>
-				<input
-					type="text"
-					id="listName"
-					value={listName}
-					onChange={(e) => setListName(e.target.value)}
-					placeholder="Enter the name of your new list"
-				/>
-				<button type="submit" className="button">
-					Create list
-				</button>
-				{message}
-			</form>
 		</div>
 	);
 }

src/views/Layout.css

@@ -71,3 +71,9 @@
 	text-decoration-thickness: 0.22em;
 	text-underline-offset: 0.1em;
 }
+
+header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}

src/views/Layout.jsx

@@ -1,6 +1,5 @@
-import { Outlet, NavLink } from 'react-router-dom';
+import { Outlet, NavLink, Link } from 'react-router-dom';
 import './Layout.css';
-import { auth } from '../api/config.js';
 import { SignInButton, SignOutButton, useAuth } from '../api/useAuth';
 
 /**
@@ -17,12 +16,11 @@ export function Layout() {
 		<>
 			<div className="Layout">
 				<header className="Layout-header">
-					<h1>Smart shopping list</h1>
+					<Link to="/">
+						<h1>#APP/LogoPic</h1>
+					</Link>
 					{!!user ? (
-						<div>
-							<span>Welcome {auth.currentUser.displayName}!</span>
-							<SignOutButton></SignOutButton>
-						</div>
+						<SignOutButton></SignOutButton>
 					) : (
 						<SignInButton></SignInButton>
 					)}
@@ -35,11 +33,18 @@ export function Layout() {
 						<NavLink to="/" className="Nav-link">
 							Home
 						</NavLink>
-						<NavLink to="/list" className="Nav-link">
-							List
-						</NavLink>
-						<NavLink to="/manage-list" className="Nav-link">
-							Manage List
+						{user && (
+							<NavLink to="/list" className="Nav-link">
+								List
+							</NavLink>
+						)}
+						{user && (
+							<NavLink to="/manage-list" className="Nav-link">
+								Manage List
+							</NavLink>
+						)}
+						<NavLink to="/about" className="Nav-link">
+							About
 						</NavLink>
 					</div>
 				</nav>

src/views/index.js

@@ -2,3 +2,4 @@ export * from './ManageList';
 export * from './Home';
 export * from './Layout';
 export * from './List';
+export * from './About';