added UI element to List and ManageList indicating which list the use…

…r has selected

src/views/List.jsx

@@ -5,6 +5,7 @@ import { comparePurchaseUrgency } from '../api/firebase';
 
 export function List({ data, listPath }) {
 	const [searchTerm, setSearchTerm] = useState('');
+	const listName = listPath.split('/')[1];
 
 	const navigate = useNavigate();
 
@@ -27,7 +28,7 @@ export function List({ data, listPath }) {
 	});
 
 	filteredData.sort(comparePurchaseUrgency);
-
+	console.log(listPath);
 	return (
 		<>
 			{!listPath ? (
@@ -40,6 +41,7 @@ export function List({ data, listPath }) {
 			) : null}
 			{listPath && data.length === 0 ? (
 				<>
+					<h2>{listName}</h2>
 					<h2>
 						This list is currently empty. Click below to add your first item.
 					</h2>
@@ -49,19 +51,22 @@ export function List({ data, listPath }) {
 				</>
 			) : null}
 			{data.length > 0 ? (
-				<form>
-					<label htmlFor="itemFilter">
-						Search for an item:
-						<input
-							type="text"
-							id="itemFilter"
-							name="itemFilter"
-							value={searchTerm}
-							onChange={handleChange}
-						/>
-					</label>
-					{searchTerm ? <button onClick={reset}>Reset</button> : null}
-				</form>
+				<>
+					<h2>{listName}</h2>
+					<form>
+						<label htmlFor="itemFilter">
+							Search for an item:
+							<input
+								type="text"
+								id="itemFilter"
+								name="itemFilter"
+								value={searchTerm}
+								onChange={handleChange}
+							/>
+						</label>
+						{searchTerm ? <button onClick={reset}>Reset</button> : null}
+					</form>
+				</>
 			) : null}
 			<ul>
 				{filteredData.map((item) => {

src/views/ManageList.jsx

@@ -3,6 +3,8 @@ import { addItem } from '../api';
 import { shareList } from '../api/firebase.js';
 
 export function ManageList({ listPath, userId, data }) {
+	const listName = listPath.split('/')[1];
+
 	const initialItemFormState = {
 		itemName: '',
 		daysUntilNextPurchase: 0,
@@ -71,9 +73,7 @@ export function ManageList({ listPath, userId, data }) {
 
 	return (
 		<>
-			<p>
-				Hello from the <code>/manage-list</code> page!
-			</p>
+			<h2>{listName}</h2>
 			<section>
 				<form onSubmit={handleItemSubmit}>
 					<label htmlFor="itemName">