Merge pull request #44 from the-collab-lab/ma/view-list-name

Issue #43 Users should be  able to view the list name

src/App.tsx

@@ -70,6 +70,10 @@ export function App() {
 							path="/list"
 							element={<List data={data} listPath={listPath} />}
 						/>
+						<Route
+							path="/list/:listName"
+							element={<List data={data} listPath={listPath} />}
+						/>
 						<Route
 							path="/manage-list"
 							element={<ManageList listPath={listPath} data={data || []} />}

src/components/AuthenticatedNavBar 2.css

@@ -0,0 +1,35 @@
+.Nav {
+	background-color: var(--color-bg);
+	border-top: 1px solid var(--color-border);
+	bottom: 0;
+	display: flex;
+	flex-direction: row;
+	padding-bottom: max(env(safe-area-inset-bottom), 1rem);
+	padding-top: 1rem;
+	place-content: center;
+	position: fixed;
+	width: 100%;
+}
+
+.Nav-container {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-evenly;
+	width: min(72ch, 100%);
+}
+
+.Nav-link {
+	--color-text: var(--color-accent);
+	color: var(--color-text);
+	font-size: 1.4em;
+	flex: 0 1 auto;
+	line-height: 1;
+	padding: 0.8rem;
+	text-align: center;
+	text-underline-offset: 0.1em;
+}
+
+.Nav-link.active {
+	text-decoration-thickness: 0.22em;
+	text-underline-offset: 0.1em;
+}

src/components/AuthenticatedNavBar.tsx

@@ -12,9 +12,7 @@ export function AuthenticatedNavBar() {
 				<NavLink to="/" className="Nav__link" aria-label="Home">
 					Home
 				</NavLink>
-				<NavLink to="/list" className="Nav__link" aria-label="List">
-					List
-				</NavLink>
+
 				<NavLink
 					to="/manage-list"
 					className="Nav__link"

src/components/CreateList.tsx

@@ -32,7 +32,8 @@ export function CreateList({ user, setListPath }: Props) {
 			toast.success("Success: Your New List is Created!");
 			// Delay for toast notification before redirecting
 			setTimeout(() => {
-				navigate("/list");
+				const listName = path.split("/").pop();
+				navigate(`/list/${listName}`);
 			}, 1500); // 1.5 seconds delay
 		} catch (error) {
 			console.error("Error creating list:", error);

src/components/ListItem 2.css

@@ -0,0 +1,15 @@
+.ListItem {
+	align-items: baseline;
+	display: flex;
+	flex-direction: row;
+	font-size: 1.2em;
+	justify-content: space-between;
+}
+
+.ListItem-checkbox {
+	accent-color: var(--color-accent);
+}
+
+.ListItem-label {
+	margin-left: 0.2em;
+}

src/components/SingleList 2.css

@@ -0,0 +1,10 @@
+.SingleList {
+	align-items: baseline;
+	display: flex;
+	flex-direction: row;
+	font-size: 1.2em;
+}
+
+.SingleList-label {
+	margin-left: 0.2em;
+}

src/components/SingleList.tsx

@@ -1,14 +1,17 @@
-import * as api from "../api/firebase";
+
+import "./SingleList.css";
 import Button from "react-bootstrap/Button";
 import "./SingleList.scss";
+import { useNavigate } from "react-router-dom";
+
+export function SingleList({ name }: { name: string }) {
+	const navigate = useNavigate();
 
-interface Props extends Pick<api.List, "name" | "path"> {
-	setListPath: (path: string) => void;
-}
 
-export function SingleList({ name, path, setListPath }: Props) {
 	function handleClick() {
-		setListPath(path);
+		setTimeout(() => {
+			navigate(`/list/${name}`);
+		}, 200);
 	}
 
 	return (

src/components/forms/AddItemForm.tsx

@@ -87,7 +87,10 @@ export function AddItemForm({ listPath, data: unfilteredListItems }: Props) {
 		}
 	};
 	const navigateToListPage = () => {
-		navigate("/list");
+		if (listPath) {
+			const listName = listPath.split("/").pop();
+			navigate(`/list/${listName}`);
+		}
 	};
 
 	return (

src/index 2.css

@@ -0,0 +1,101 @@
+:root {
+	--color-black: hsla(220, 13%, 18%, 1);
+	--color-gray-dark: hsla(220, 13%, 25%, 1);
+	--color-white: hsla(220, 13%, 98%, 1);
+	--color-gray-light: hsla(220, 13%, 94%, 1);
+	--color-emerald-green: hsla(168, 92%, 25%, 1);
+	--color-vermillion-green: hsla(168, 92%, 43%, 1);
+	--color-cobalt-blue: hsla(215, 100%, 34%, 1);
+	--color-pastel-blue: hsla(215, 100%, 73%, 1);
+	--color-red: hsl(0, 68%, 42%);
+
+	--color-accent: var(--color-pastel-blue);
+	--color-bg: var(--color-black);
+	--color-border: hsla(220, 13%, 32%, 1);
+	--color-error: var(--color-red);
+	--color-text: var(--color-white);
+
+	/**
+ * Set the value of 1rem to 10px to make relative units
+ * easier to work with.
+ * (The default is 16px. 16 * 62.5% = 10)
+ */
+	font-size: 62.5%;
+}
+
+@media screen and (prefers-color-scheme: light) {
+	:root {
+		--color-accent: var(--color-cobalt-blue);
+		--color-bg: var(--color-white);
+		--color-border: hsla(220, 13%, 78%, 1);
+		--color-text: var(--color-black);
+	}
+}
+
+:root.theme-light {
+	--color-accent: var(--color-cobalt-blue);
+	--color-bg: var(--color-white);
+	--color-border: hsla(220, 13%, 78%, 1);
+	--color-text: var(--color-black);
+}
+
+*,
+*::after,
+*::before {
+	box-sizing: border-box;
+}
+
+body {
+	background-color: var(--color-bg);
+	color: var(--color-text);
+	font-family:
+		-apple-system,
+		BlinkMacSystemFont,
+		avenir next,
+		avenir,
+		segoe ui,
+		helvetica neue,
+		helvetica,
+		Ubuntu,
+		roboto,
+		noto,
+		arial,
+		sans-serif;
+	font-size: 1.8rem;
+	/** Make sure the app fills the height of the screen. */
+	height: 100dvh;
+	line-height: 1.4;
+	margin: 0;
+
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+code {
+	--color-bg: var(--color-gray-dark);
+	--color-text: var(--color-accent);
+
+	background-color: var(--color-bg);
+	border-radius: 4px;
+	color: var(--color-text);
+	display: inline-block;
+	font-family:
+		Menlo,
+		Consolas,
+		Monaco,
+		Liberation Mono,
+		Lucida Console,
+		monospace;
+	font-size: 0.9em;
+	padding: 2px 2px;
+}
+
+@media screen and (prefers-color-scheme: light) {
+	code {
+		--color-bg: var(--color-gray-light);
+	}
+}
+
+:root.theme-light code {
+	--color-bg: var(--color-gray-light);
+}

src/views/Home.tsx

@@ -1,4 +1,8 @@
 import React from "react";
+import "./Home.css";
+import { SingleList, CreateList } from "../components";
+import { List, User } from "../api/firebase";
+
 import "./Home.scss";
 import { List, User } from "../api";
 import { AuthenticatedHome, UnauthenticatedHome } from "../views";
@@ -12,6 +16,21 @@ 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} />
+						))}
+
+						<CreateList user={user} setListPath={setListPath} />
+					</ul>
+				)}
+			</div>
 			{user ? (
 				<AuthenticatedHome data={data} setListPath={setListPath} user={user} />
 			) : (

src/views/Layout 2.css

@@ -0,0 +1,36 @@
+/**
+ * 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
+ */
+.Layout {
+	display: flex;
+	flex-direction: column;
+	height: 100dvh;
+}
+
+.Layout > * {
+	padding-inline: min(5dvw, 3.2rem);
+}
+
+.Layout-header {
+	background-color: var(--color-bg);
+	padding-bottom: 0.5rem;
+	padding-top: max(env(safe-area-inset-top), 1rem);
+	text-align: center;
+}
+
+.Layout-header > h1 {
+	margin: 0;
+}
+
+.Layout-main {
+	margin: 0 auto;
+	padding-block: 0;
+	padding-block-end: 6.26rem;
+	width: min(72ch, 100%);
+}

src/views/authenticated/List.tsx

@@ -1,8 +1,8 @@
+import { useParams, useNavigate } from "react-router-dom";
 import { useState, useMemo } from "react";
 import { ListItemCheckBox } from "../../components/ListItem";
 import { FilterListInput } from "../../components/FilterListInput";
 import { ListItem, comparePurchaseUrgency } from "../../api";
-import { useNavigate } from "react-router-dom";
 import Button from "react-bootstrap/Button";
 
 interface Props {
@@ -12,6 +12,7 @@ interface Props {
 
 export function List({ data: unfilteredListItems, listPath }: Props) {
 	const navigate = useNavigate();
+	const { listName } = useParams<{ listName: string }>();
 	const [searchTerm, setSearchTerm] = useState<string>("");
 
 	const filteredListItems = useMemo(() => {
@@ -38,6 +39,9 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 	if (unfilteredListItems.length === 0) {
 		return (
 			<>
+
+				<h1>{listName}</h1>
+
 				<Header />
 				<section>
 					<h3>
@@ -59,6 +63,9 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 	// Main content when list is not empty
 	return (
 		<>
+
+			<h1>{listName}</h1>
+
 			<Header />
 
 			<section className="sticky-top bg-dark">
@@ -76,6 +83,7 @@ export function List({ data: unfilteredListItems, listPath }: Props) {
 					{"Add items"}
 				</Button>
 			</section>
+
 			<section>
 				{filteredListItems.map((item) => (
 					<ListItemCheckBox key={item.id} item={item} listPath={listPath} />