Merge branch 'main' into bb/navbar-auth-status

package.json

@@ -31,7 +31,7 @@
 		"eslint-plugin-react": "^7.35.0",
 		"husky": "^9.1.4",
 		"jsdom": "^24.1.1",
-		"lint-staged": "^15.2.8",
+		"lint-staged": "^15.2.9",
 		"prettier": "^3.3.3",
 		"typescript-eslint": "^8.2.0",
 		"vite": "^5.3.5",

src/App.tsx

@@ -7,14 +7,14 @@ import { Home, Layout, List, ManageList, PageNotFound } from "./views";
 import { useFindUser, useShoppingListData, useShoppingLists } from "./api";
 
 import { useStateWithStorage } from "./utils";
-
 import { ProtectRoute } from "./components";
 
 /**
  * Putting Toaster at the top level of the App allows
  * react-hot-toast to work anywhere in the app by just
  * importing toast as done in useAuth.
  */
+
 import { Toaster } from "react-hot-toast";
 
 export function App() {

src/api/firebase.ts

@@ -212,7 +212,9 @@ export async function shareList(
 	const recipientDoc = await getDoc(doc(usersCollectionRef, recipientEmail));
 	// If the recipient user doesn't exist, we can't share the list.
 	if (!recipientDoc.exists()) {
-		return;
+		throw new Error(
+			"Unable to share list. Please verify correct email address.",
+		);
 	}
 	// Add the list to the recipient user's sharedLists array.
 	const listDocumentRef = doc(db, listPath);

src/components/FilterListInput.tsx

@@ -0,0 +1,35 @@
+import { ChangeEvent, FormEvent } from "react";
+
+interface FilterListProps {
+	searchTerm: string;
+	setSearchTerm: (term: string) => void;
+}
+
+export function FilterListInput({
+	searchTerm,
+	setSearchTerm,
+}: FilterListProps) {
+	const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+		setSearchTerm(e.target.value);
+	};
+
+	const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+		e.preventDefault();
+	};
+
+	return (
+		<form onSubmit={handleSubmit}>
+			<label htmlFor="filterList">
+				Filter List:
+				<input
+					type="search"
+					onChange={handleChange}
+					value={searchTerm}
+					id="filterList"
+					aria-label="Filter items in the list"
+					placeholder="Search items..."
+				/>
+			</label>
+		</form>
+	);
+}

src/components/forms/ShareListForm.tsx

@@ -0,0 +1,74 @@
+import { ChangeEvent, FormEvent, useState } from "react";
+import { shareList } from "../../api/firebase";
+
+import toast from "react-hot-toast";
+
+import { useAuth } from "../../api/useAuth";
+
+import { User } from "../../api/firebase";
+
+interface Props {
+	listPath: string | null;
+}
+
+const ShareListForm = ({ listPath }: Props) => {
+	const { user: currentUser } = useAuth();
+
+	const [emailName, setEmailName] = useState("");
+
+	const handleEmailNameChange = (e: ChangeEvent<HTMLInputElement>) => {
+		setEmailName(e.target.value);
+	};
+
+	const handleInvite = async (
+		e: FormEvent<HTMLFormElement>,
+		listPath: string | null,
+	) => {
+		console.log("Button clicked! Inviting user!");
+		e.preventDefault();
+
+		if (!listPath) {
+			return;
+		}
+
+		try {
+			await toast.promise(shareList(listPath, currentUser as User, emailName), {
+				loading: "sharing list with existing user",
+				success: () => {
+					setEmailName("");
+					return `Successfully invited ${emailName} to your list!`;
+				},
+				error: () => {
+					return `Oops! Failed to invite ${emailName} to your list. Please verify correct email!`;
+				},
+			});
+		} catch (error) {
+			console.error("Oops! Failed to invite user:", error);
+		}
+	};
+
+	return (
+		<form onSubmit={(e) => handleInvite(e, listPath)}>
+			<label htmlFor="recipient-email">
+				Recipient Email:
+				<input
+					id="recipient-email"
+					type="email"
+					name="recipient-email"
+					value={emailName}
+					placeholder="Enter e-mail address. . ."
+					onChange={handleEmailNameChange}
+					required
+					aria-label="Enter the user email address to share list"
+					aria-required
+				/>
+			</label>
+			<br />
+			<button type="submit" aria-label="submits form to share shopping list">
+				Invite User
+			</button>
+		</form>
+	);
+};
+
+export default ShareListForm;

src/views/List.tsx

@@ -1,23 +1,38 @@
-import React from 'react';
-import { ListItem as ListItemComponent } from '../components/ListItem';
-import { ListItem } from '../api';
+import { useState, useMemo } from "react";
+import { ListItem as ListItemComponent } from "../components/ListItem";
+import { FilterListInput as FilterListComponent } from "../components/FilterListInput";
+import { ListItem } from "../api";
 
 interface Props {
 	data: ListItem[];
 }
 
-export function List({ data }: Props) {
-	const hasItem = data.length !== 0;
+export function List({ data: unfilteredListItems }: Props) {
+	const [searchTerm, setSearchTerm] = useState<string>("");
+
+	const filteredListItems = useMemo(() => {
+		return unfilteredListItems.filter((item) =>
+			item.name.toLowerCase().includes(searchTerm.toLowerCase()),
+		);
+	}, [searchTerm, unfilteredListItems]);
+
 	return (
 		<>
 			<p>
 				Hello from the <code>/list</code> page!
 			</p>
+
+			{unfilteredListItems.length > 0 && (
+				<FilterListComponent
+					searchTerm={searchTerm}
+					setSearchTerm={setSearchTerm}
+				/>
+			)}
+
 			<ul>
-				{hasItem &&
-					data.map((item) => (
-						<ListItemComponent key={item.id} name={item.name} />
-					))}
+				{filteredListItems.map((item) => (
+					<ListItemComponent key={item.id} name={item.name} />
+				))}
 			</ul>
 		</>
 	);

src/views/ManageList.tsx

@@ -3,6 +3,8 @@ import { addItem } from "../api/firebase";
 import { validateTrimmedString } from "../utils";
 import toast from "react-hot-toast";
 
+import ShareListForm from "../components/forms/ShareListForm";
+
 interface Props {
 	listPath: string | null;
 }
@@ -154,6 +156,7 @@ export function ManageList({ listPath }: Props) {
 					</form>
 				</>
 			)}
+			<ShareListForm listPath={listPath} />
 		</div>
 	);
 }