#6, feat: Add form that allows user to invite another user to list!

src/App.tsx

@@ -8,6 +8,8 @@ import { useAuth, useShoppingListData, useShoppingLists } from "./api";
 
 import { useStateWithStorage } from "./utils";
 
+import { Toaster } from "react-hot-toast";
+
 export function App() {
 	/**
 	 * This custom hook takes the path of a shopping list
@@ -58,6 +60,7 @@ export function App() {
 					/>
 				</Route>
 			</Routes>
+			<Toaster />
 		</Router>
 	);
 }

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/CreateList.tsx

@@ -1,7 +1,7 @@
 import { ChangeEvent, FormEvent, useState } from "react";
 import { createList, User } from "../api";
 import { useNavigate } from "react-router-dom";
-import toast, { Toaster } from "react-hot-toast";
+import toast from "react-hot-toast";
 
 interface Props {
 	user: User;
@@ -60,7 +60,6 @@ export function CreateList({ user, setListPath }: Props) {
 					<br />
 					<button aria-label="Create new shopping list">Create List</button>
 				</form>
-				<Toaster />
 			</li>
 		</>
 	);

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/ManageList.tsx

@@ -1,7 +1,9 @@
 import { ChangeEvent, FormEvent, useState } from "react";
 import { addItem } from "../api/firebase";
 import { validateTrimmedString } from "../utils";
-import toast, { Toaster } from "react-hot-toast";
+import toast from "react-hot-toast";
+
+import ShareListForm from "../components/forms/ShareListForm";
 
 interface Props {
 	listPath: string | null;
@@ -82,79 +84,74 @@ export function ManageList({ listPath }: Props) {
 				Hello from the <code>/manage-list</code> page!
 			</p>
 			{listPath && (
-				<>
-					<form onSubmit={(e) => handleSubmit(e, listPath)}>
-						<label htmlFor="item-name">
-							Item:
+				<form onSubmit={(e) => handleSubmit(e, listPath)}>
+					<label htmlFor="item-name">
+						Item:
+						<input
+							id="item-name"
+							type="text"
+							name="item"
+							value={itemName}
+							onChange={handleItemNameTextChange}
+							required
+							aria-label="Enter the item name"
+							aria-required
+						/>
+					</label>
+					<br />
+					<fieldset>
+						<legend>When to buy:</legend>
+						<label htmlFor={PurchaseTime.soon}>
+							<input
+								type="radio"
+								id={PurchaseTime.soon}
+								name="when-to-buy"
+								value={PurchaseTime.soon}
+								required
+								onChange={() => handleNextPurchaseChange(PurchaseTime.soon)}
+								checked={itemNextPurchaseTimeline === PurchaseTime.soon}
+								aria-label={`Set buy to soon, within ${purchaseTimelines[PurchaseTime.soon]} days`}
+							/>
+							Soon -- Within {purchaseTimelines[PurchaseTime.soon]} days!
+						</label>
+						<br />
+						<label htmlFor={PurchaseTime.kindOfSoon}>
 							<input
-								id="item-name"
-								type="text"
-								name="item"
-								value={itemName}
-								onChange={handleItemNameTextChange}
+								type="radio"
+								id={PurchaseTime.kindOfSoon}
+								name="when-to-buy"
+								value={PurchaseTime.kindOfSoon}
 								required
-								aria-label="Enter the item name"
-								aria-required
+								onChange={() =>
+									handleNextPurchaseChange(PurchaseTime.kindOfSoon)
+								}
+								checked={itemNextPurchaseTimeline === PurchaseTime.kindOfSoon}
+								aria-label={`Set buy to kind of soon, within ${purchaseTimelines[PurchaseTime.kindOfSoon]} days`}
 							/>
+							Kind of soon -- Within{" "}
+							{purchaseTimelines[PurchaseTime.kindOfSoon]} days!
 						</label>
 						<br />
-						<fieldset>
-							<legend>When to buy:</legend>
-							<label htmlFor={PurchaseTime.soon}>
-								<input
-									type="radio"
-									id={PurchaseTime.soon}
-									name="when-to-buy"
-									value={PurchaseTime.soon}
-									required
-									onChange={() => handleNextPurchaseChange(PurchaseTime.soon)}
-									checked={itemNextPurchaseTimeline === PurchaseTime.soon}
-									aria-label={`Set buy to soon, within ${purchaseTimelines[PurchaseTime.soon]} days`}
-								/>
-								Soon -- Within {purchaseTimelines[PurchaseTime.soon]} days!
-							</label>
-							<br />
-							<label htmlFor={PurchaseTime.kindOfSoon}>
-								<input
-									type="radio"
-									id={PurchaseTime.kindOfSoon}
-									name="when-to-buy"
-									value={PurchaseTime.kindOfSoon}
-									required
-									onChange={() =>
-										handleNextPurchaseChange(PurchaseTime.kindOfSoon)
-									}
-									checked={itemNextPurchaseTimeline === PurchaseTime.kindOfSoon}
-									aria-label={`Set buy to kind of soon, within ${purchaseTimelines[PurchaseTime.kindOfSoon]} days`}
-								/>
-								Kind of soon -- Within{" "}
-								{purchaseTimelines[PurchaseTime.kindOfSoon]} days!
-							</label>
-							<br />
-							<label htmlFor={PurchaseTime.notSoon}>
-								<input
-									type="radio"
-									id={PurchaseTime.notSoon}
-									name="when-to-buy"
-									value={PurchaseTime.notSoon}
-									required
-									onChange={() =>
-										handleNextPurchaseChange(PurchaseTime.notSoon)
-									}
-									checked={itemNextPurchaseTimeline === PurchaseTime.notSoon}
-									aria-label={`Set buy to not soon, within ${purchaseTimelines[PurchaseTime.notSoon]} days`}
-								/>
-								Not soon -- Within {purchaseTimelines[PurchaseTime.notSoon]}{" "}
-								days!
-							</label>
-						</fieldset>
-						<button type="submit" aria-label="Add item to shopping list">
-							Submit Item
-						</button>
-					</form>
-					<Toaster />
-				</>
+						<label htmlFor={PurchaseTime.notSoon}>
+							<input
+								type="radio"
+								id={PurchaseTime.notSoon}
+								name="when-to-buy"
+								value={PurchaseTime.notSoon}
+								required
+								onChange={() => handleNextPurchaseChange(PurchaseTime.notSoon)}
+								checked={itemNextPurchaseTimeline === PurchaseTime.notSoon}
+								aria-label={`Set buy to not soon, within ${purchaseTimelines[PurchaseTime.notSoon]} days`}
+							/>
+							Not soon -- Within {purchaseTimelines[PurchaseTime.notSoon]} days!
+						</label>
+					</fieldset>
+					<button type="submit" aria-label="Add item to shopping list">
+						Submit Item
+					</button>
+				</form>
 			)}
+			<ShareListForm listPath={listPath} />
 		</div>
 	);
 }