Merge pull request #56 from the-collab-lab/am-create-landing-page

src/App.jsx

@@ -45,22 +45,30 @@ export function App() {
 	return (
 		<Router>
 			<Routes>
+				<Route index element={<Home />} />
 				<Route path="/" element={<Layout />}>
-					<Route
-						index
-						element={
-							<Home data={lists} setListPath={setListPath} user={user} />
-						}
-					/>
 					<Route
 						path="/list"
 						element={
-							<List data={data} listPath={listPath} currentUserId={userId} />
+							<List
+								user={user}
+								data={data}
+								lists={lists}
+								listPath={listPath}
+								setListPath={setListPath}
+								currentUserId={userId}
+							/>
 						}
 					/>
 					<Route
 						path="/manage-list"
-						element={<ManageList listPath={listPath} currentUserId={userId} />}
+						element={
+							<ManageList
+								data={data}
+								listPath={listPath}
+								currentUserId={userId}
+							/>
+						}
 					/>
 					<Route path="/about" element={<About />} />
 				</Route>

src/views/Home.css

@@ -0,0 +1,33 @@
+/**
+ * The `env()` function used in this block of code
+ * allows us to reference special variables that might be defined
+ * by certain browsers. In this case, we are making sure that
+ * the app stays within the 'safe' viewable area of a mobile phone,
+ * and isn't covered up by the phone's UI.
+ *
+ * @see: https://developer.mozilla.org/en-US/docs/Web/CSS/env
+ */
+.Home {
+	display: flex;
+	flex-direction: column;
+	height: 100dvh;
+}
+
+.Home > * {
+	padding-inline: min(5dvw, 3.2rem);
+}
+
+.Home-header {
+	background-color: var(--color-bg);
+	padding-bottom: 0.5rem;
+	padding-top: max(env(safe-area-inset-top), 1rem);
+	text-align: center;
+}
+
+.Home-header > h1 {
+	margin: 0;
+}
+
+.checkbox {
+	height: 200px;
+}

src/views/Home.jsx

@@ -1,60 +1,40 @@
 import './Home.css';
-import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { SingleList } from '../components';
-import { createList } from '../api/firebase';
-
-export function Home({ data, setListPath, user }) {
-	const [shoppingListName, setShoppingListName] = useState('');
-	const navigate = useNavigate(); // useNavigate doc suggests using redirect
-
-	const handleSubmit = async (e) => {
-		e.preventDefault();
-		try {
-			const newListPath = await createList(
-				user.uid,
-				user.email,
-				shoppingListName,
-			);
-			setListPath(newListPath);
-			alert('You have created a new shopping list: ' + shoppingListName);
-			navigate('/list');
-		} catch (error) {
-			alert(`Your list was not created, please try again. Error: ${error}`);
-		}
-	};
+import { useAuth, SignInButton, SignOutButton } from '../api/useAuth.jsx';
+import { auth } from '../api/config.js';
+import { Link } from 'react-router-dom';
 
+export function Home() {
+	const { user } = useAuth();
 	return (
-		<div className="Home">
-			<p>
-				Hello from the home (<code>/</code>) page!
-			</p>
-			<ul>
-				{data && data.length > 0 ? (
-					data.map((list) => (
-						<SingleList
-							key={list.name}
-							name={list.name}
-							setListPath={setListPath}
-							path={list.path}
-						/>
-					))
-				) : (
-					<h1>You have no Lists!</h1>
-				)}
-			</ul>
-			<form onSubmit={handleSubmit}>
-				<label>
-					Shopping List:
-					<input
-						type="text"
-						value={shoppingListName}
-						id="shopping-list"
-						onChange={(e) => setShoppingListName(e.target.value)}
-					></input>
-				</label>
-				<input type="submit" />
-			</form>
-		</div>
+		<>
+			<div className="Home">
+				<header className="Home-header">
+					<h2>Welcome to Box Makers!</h2>
+					<img
+						className="checkbox"
+						src="img/checkbox.png"
+						alt="black checkbox with green check"
+					/>
+					<h3>
+						New to the app? Click <Link to="/about">here</Link> to learn more!
+					</h3>
+					{!!user ? (
+						<div>
+							<span>Welcome back {auth.currentUser.displayName}!</span> (
+							<SignOutButton />)
+							<br />
+							<span>
+								View your lists <Link to="/list">here</Link>
+							</span>
+						</div>
+					) : (
+						<div>
+							<span>Click 'Sign In' to register and get started: </span>
+							<SignInButton />
+						</div>
+					)}
+				</header>
+			</div>
+		</>
 	);
 }

src/views/Layout.jsx

@@ -29,9 +29,6 @@ export function Layout() {
 						<NavLink to="/list" className="Nav-link">
 							List
 						</NavLink>
-						<NavLink to="/manage-list" className="Nav-link">
-							Manage List
-						</NavLink>
 						<NavLink to="/about" className="Nav-link">
 							About
 						</NavLink>