A way for an new user to understand how the app functions (#41)

* feat: adding sample list route & page * mod: change SampleList to about * mod: a text version/skeleton of the about page of the application * feat: added an unauthenticated home context with way to navigate to about page with button * feat: added unauthenticated nav bar for another option on getting to about page * feat: added links for app creators * fix: fixed a few typos and add name to the place holder * feat: created Authenticated/Unauthenticated home components * feat: update vite config to utilize the svgr plugin for the svg logo used on about * feat: making it so the sign in button can change the value in the label based on if needs to sign up or in * feat: added links to mentors and added link to the collab lab * fix: removed bullet point from the create list form label * fix: fixing some buttons and styling issues weird messed up in resolving merge conflicts * fix: fixing the new UnauthenticatedNavBar to use the correct bootstrap comp since didn't get them in conflict resolve * fix: if signing up or out from about page properly redirects to home page since it is not a protected route it was just staying on about * mod: added name to layout * fix: scroll bars on bottom of all pages because the page wasn't extend to the view fully and they were always showing
the-collab-lab · Sep 30, 2024 · a97e76b · a97e76b
1 parent fceec4b
commit a97e76b
Show file tree

Hide file tree

Showing 17 changed files with 360 additions and 69 deletions.
diff --git a/index.html b/index.html
@@ -18,7 +18,7 @@
 			crossorigin="anonymous"
 		/>
 		<meta name="color-scheme" content="dark light" />
-		<title>Smart Shopping List</title>
+		<title>GrocerEase</title>
 		<script type="module" src="/src/index.tsx" async></script>
 	</head>
 	<body>

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,8 +1,10 @@
+/// <reference types="vite-plugin-svgr/client" />
+
 import React from "react";
 
 import { Routes, Route } from "react-router-dom";
 
-import { Home, Layout, List, ManageList, PageNotFound } from "./views";
+import { Home, Layout, List, ManageList, PageNotFound, About } from "./views";
 
 import { useFindUser, useShoppingListData, useShoppingLists } from "./api";
 
@@ -74,6 +76,8 @@ export function App() {
 						/>
 					</Route>
 
+					<Route path="/about" element={<About />}></Route>
+
 					{/* a catch all route for if someone tries to manually navigate to something not created yet */}
 					<Route path="*" element={<PageNotFound />} />
 				</Route>

diff --git a/src/api/useAuth.tsx b/src/api/useAuth.tsx
@@ -4,34 +4,72 @@ import { GoogleAuthProvider, signInWithPopup } from "firebase/auth";
 import { addUserToDatabase, User } from "./firebase";
 import toast from "react-hot-toast";
 import Button from "react-bootstrap/Button";
+import { useLocation, useNavigate } from "react-router-dom";
 
 /**
  * A button that signs the user in using Google OAuth. When clicked,
  * 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 = () => (
-	<Button
-		type="button"
-		onClick={() => signInWithPopup(auth, new GoogleAuthProvider())}
-	>
-		Sign In
-	</Button>
-);
+
+type SignInButtonProps = {
+	isSignIn?: boolean;
+};
+
+export const SignInButton = ({ isSignIn = true }: SignInButtonProps) => {
+	const location = useLocation();
+	const navigate = useNavigate();
+
+	return (
+		<Button
+			type="button"
+			onClick={() => {
+				signInWithPopup(auth, new GoogleAuthProvider())
+					.then(() => {
+						if (location.pathname === "/about") {
+							navigate("/");
+						}
+					})
+					.catch((error) => {
+						console.error(error);
+						toast.error(
+							"An error occurred while signing in. Please try again.",
+						);
+					});
+			}}
+			className="m-2"
+		>
+			{isSignIn ? "Sign In" : "Sign Up"}
+		</Button>
+	);
+};
 
 /**
  * A button that signs the user out of the app using Firebase Auth.
  */
 export const SignOutButton = () => {
+	const location = useLocation();
+	const navigate = useNavigate();
+
 	return (
 		<Button
 			type="button"
 			onClick={() => {
-				auth.signOut().catch((error) => {
-					console.error(error);
-					toast.error("An error occurred while signing out. Please try again.");
-				});
+				auth
+					.signOut()
+					.then(() => {
+						if (location.pathname === "/about") {
+							navigate("/");
+						}
+					})
+					.catch((error) => {
+						console.error(error);
+						toast.error(
+							"An error occurred while signing out. Please try again.",
+						);
+					});
 			}}
+			className="m-2"
 		>
 			Sign Out
 		</Button>

diff --git a/src/components/CreateList.tsx b/src/components/CreateList.tsx
@@ -45,23 +45,25 @@ export function CreateList({ user, setListPath }: Props) {
 	};
 
 	return (
-		<Form onSubmit={handleSubmit}>
-			<h3>Create New Shopping List</h3>
-			<Form.Label htmlFor="newListName">Name Your List</Form.Label>
-			<InputGroup>
-				<br />
-				<Form.Control
-					type="text"
-					value={inputValue}
-					onChange={handleChange}
-					name="newListName"
-					id="newListName"
-					aria-label="Shopping List Name"
-					aria-required="true" // Indicates that this field is required
-				/>
-				<br />
-				<Button aria-label="Create new shopping list">Create List</Button>
-			</InputGroup>
-		</Form>
+		<>
+			<Form onSubmit={handleSubmit}>
+				<h3>Create New Shopping List</h3>
+				<Form.Label htmlFor="newListName">Name Your List</Form.Label>
+				<InputGroup>
+					<br />
+					<Form.Control
+						type="text"
+						value={inputValue}
+						onChange={handleChange}
+						name="newListName"
+						id="newListName"
+						aria-label="Shopping List Name"
+						aria-required="true" // Indicates that this field is required
+					/>
+					<br />
+					<Button aria-label="Create new shopping list">Create List</Button>
+				</InputGroup>
+			</Form>
+		</>
 	);
 }
diff --git a/src/components/AuthenticatedNavBar.css → src/components/NavBar.css b/src/components/AuthenticatedNavBar.css → src/components/NavBar.css
diff --git a/src/components/AuthenticatedNavBar.tsx → ...nts/authenticated/AuthenticatedNavBar.tsx b/src/components/AuthenticatedNavBar.tsx → ...nts/authenticated/AuthenticatedNavBar.tsx
@@ -1,11 +1,11 @@
 import React from "react";
 import { NavLink } from "react-router-dom";
-import { SignOutButton } from "../api";
+import { SignOutButton } from "../../api";
 import Navbar from "react-bootstrap/Navbar";
 import Container from "react-bootstrap/Container";
 import Nav from "react-bootstrap/Nav";
 
-import "./AuthenticatedNavBar.css";
+import "../NavBar.css";
 
 export function AuthenticatedNavBar() {
 	return (

diff --git a/src/components/index.ts b/src/components/index.ts
@@ -2,5 +2,6 @@ export * from "./ListItem";
 export * from "./SingleList";
 export * from "./CreateList";
 export * from "./ProtectedRoute";
-export * from "./AuthenticatedNavBar";
+export * from "./authenticated/AuthenticatedNavBar";
 export * from "./forms/ShareListForm";
+export * from "./unauthenticated/UnauthenticatedNavBar";
diff --git a/src/components/unauthenticated/UnauthenticatedNavBar.tsx b/src/components/unauthenticated/UnauthenticatedNavBar.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+import Navbar from "react-bootstrap/Navbar";
+import Container from "react-bootstrap/Container";
+import Nav from "react-bootstrap/Nav";
+
+import "../NavBar.css";
+
+export function UnauthenticatedNavBar() {
+	return (
+		<Navbar expand="lg" fixed="bottom" className="Nav">
+			<Container className="d-flex justify-content-around Nav-container">
+				<Nav.Link as={NavLink} to="/" className="Nav-link" aria-label="Home">
+					Home
+				</Nav.Link>
+				<Nav.Link
+					as={NavLink}
+					to="/about"
+					className="Nav-link"
+					aria-label="About"
+				>
+					About
+				</Nav.Link>
+			</Container>
+		</Navbar>
+	);
+}
diff --git a/src/icons/GithubLogo.svg b/src/icons/GithubLogo.svg
diff --git a/src/icons/LinkedInLogo.svg b/src/icons/LinkedInLogo.svg
diff --git a/src/views/Home.tsx b/src/views/Home.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import "./Home.css";
-import { SingleList, CreateList } from "../components";
-import { List, User } from "../api/firebase";
+import { List, User } from "../api";
+import { AuthenticatedHome, UnauthenticatedHome } from "../views";
 
 interface Props {
 	data: List[];
@@ -12,24 +12,11 @@ interface Props {
 export function Home({ data, setListPath, user }: Props) {
 	return (
 		<>
-			<div className="Home">
-				<p>
-					Hello from the home (<code>/</code>) page!
-				</p>
-				{user && (
-					<ul>
-						{data.map((list, index) => (
-							<SingleList
-								key={index}
-								name={list.name}
-								path={list.path}
-								setListPath={setListPath}
-							/>
-						))}
-						<CreateList user={user} setListPath={setListPath} />
-					</ul>
-				)}
-			</div>
+			{user ? (
+				<AuthenticatedHome data={data} setListPath={setListPath} user={user} />
+			) : (
+				<UnauthenticatedHome />
+			)}
 		</>
 	);
 }
diff --git a/src/views/Layout.tsx b/src/views/Layout.tsx
@@ -1,7 +1,8 @@
 import React from "react";
-import { Outlet } from "react-router-dom";
-import { SignInButton, User } from "../api";
-import { AuthenticatedNavBar } from "../components";
+import { Outlet, useNavigate } from "react-router-dom";
+import { User } from "../api";
+import { AuthenticatedNavBar, UnauthenticatedNavBar } from "../components";
+import Button from "react-bootstrap/Button";
 
 import "./Layout.css";
 
@@ -10,16 +11,27 @@ interface Props {
 }
 
 export function Layout({ user }: Props) {
+	const navigate = useNavigate();
 	return (
-		<div className="Layout vh-100">
-			<header className="Layout-header">
-				<h1>Smart shopping list</h1>
-			</header>
-			<main className="Layout-main overflow-scroll">
-				<Outlet />
-				{!user && <SignInButton />}
-			</main>
-			{user && <AuthenticatedNavBar />}
-		</div>
+		<>
+			<div className="Layout vh-100">
+				<header className="Layout-header">
+					<h1>GrocerEase</h1>
+				</header>
+				<main className="Layout-main overflow-auto">
+					{user && (
+						<Button
+							onClick={() => navigate("/about")}
+							aria-label="Navigate to the about application page."
+							className="m-2"
+						>
+							about
+						</Button>
+					)}
+					<Outlet />
+				</main>
+				{user ? <AuthenticatedNavBar /> : <UnauthenticatedNavBar />}
+			</div>
+		</>
 	);
 }
diff --git a/src/views/authenticated/AuthenticatedHome.tsx b/src/views/authenticated/AuthenticatedHome.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { SingleList, CreateList } from "../../components";
+import { List, User } from "../../api";
+
+interface Props {
+	data: List[];
+	setListPath: (path: string) => void;
+	user: User | null;
+}
+
+export function AuthenticatedHome({ data, setListPath, user }: Props) {
+	return (
+		<>
+			<p>
+				Hello from the home (<code>/</code>) page!
+			</p>
+			{user && (
+				<>
+					<ul>
+						{data.map((list, index) => (
+							<SingleList
+								key={index}
+								name={list.name}
+								path={list.path}
+								setListPath={setListPath}
+							/>
+						))}
+					</ul>
+					<CreateList user={user} setListPath={setListPath} />
+				</>
+			)}
+		</>
+	);
+}
diff --git a/src/views/index.ts b/src/views/index.ts
@@ -3,3 +3,6 @@ export * from "./Home";
 export * from "./Layout";
 export * from "./authenticated/List";
 export * from "./unauthenticated/PageNotFound";
+export * from "./unauthenticated/About";
+export * from "./unauthenticated/UnauthenticatedHome";
+export * from "./authenticated/AuthenticatedHome";