Share list component

src/App.jsx

@@ -53,7 +53,7 @@ export function App() {
 					<Route path="/list" element={<List data={data} />} />
 					<Route
 						path="/manage-list"
-						element={<ManageList listPath={listPath} />}
+						element={<ManageList listPath={listPath} user={user} />}
 					/>
 				</Route>
 			</Routes>

src/api/firebase.js

@@ -11,7 +11,7 @@ import {
 import { useEffect, useState } from 'react';
 import { db } from './config';
 import { getFutureDate } from '../utils';
-
+import toast from 'react-hot-toast';
 /**
  * A custom hook that subscribes to the user's shopping lists in our Firestore
  * database and returns new data whenever the lists change.
@@ -138,23 +138,32 @@ export async function createList(userId, userEmail, listName) {
  * @param {string} recipientEmail The email of the user to share the list with.
  */
 export async function shareList(listPath, currentUserId, recipientEmail) {
-	// Check if current user is owner.
-	if (!listPath.includes(currentUserId)) {
-		return;
-	}
-	// Get the document for the recipient user.
-	const usersCollectionRef = collection(db, 'users');
-	const recipientDoc = await getDoc(doc(usersCollectionRef, recipientEmail));
-	// If the recipient user doesn't exist, we can't share the list.
-	if (!recipientDoc.exists()) {
-		return;
+	try {
+		// Check if current user is owner.
+		if (!listPath.includes(currentUserId)) {
+			toast.error('You are not the owner of this list');
+			return;
+		}
+		// Get the document for the recipient user.
+		const usersCollectionRef = collection(db, 'users');
+		const recipientDoc = await getDoc(doc(usersCollectionRef, recipientEmail));
+		// If the recipient user doesn't exist, we can't share the list.
+
+		if (!recipientDoc.exists()) {
+			toast.error('Recipient email does not exist');
+			return;
+		}
+		// Add the list to the recipient user's sharedLists array.
+		const listDocumentRef = doc(db, listPath);
+		const userDocumentRef = doc(db, 'users', recipientEmail);
+		await updateDoc(userDocumentRef, {
+			sharedLists: arrayUnion(listDocumentRef),
+		});
+
+		toast.success('List shared successfully!');
+	} catch (error) {
+		toast.error('Failed to share, try again.');
 	}
-	// Add the list to the recipient user's sharedLists array.
-	const listDocumentRef = doc(db, listPath);
-	const userDocumentRef = doc(db, 'users', recipientEmail);
-	updateDoc(userDocumentRef, {
-		sharedLists: arrayUnion(listDocumentRef),
-	});
 }
 
 /**

src/components/ManageListForms/AddItemForm.jsx

@@ -0,0 +1,57 @@
+import { useState } from 'react';
+import { addItem } from '../../api/firebase';
+
+export default function AddItemForm({ listPath }) {
+	const [formData, setFormData] = useState({
+		itemName: '',
+		daysUntilNextPurchase: '',
+	});
+
+	const handleSubmit = async (event) => {
+		try {
+			event.preventDefault();
+			await addItem(listPath, formData);
+			alert(`${formData.itemName} was added to the list successfully`);
+		} catch (error) {
+			alert(`There was a problem adding ${formData.itemName} to the list`);
+		}
+	};
+
+	const handleChange = (event) => {
+		let { name, value } = event.target;
+		setFormData((prevFormData) => ({ ...prevFormData, [name]: value }));
+	};
+
+	return (
+		<form onSubmit={(event) => handleSubmit(event)}>
+			<div className="item-name">
+				<label htmlFor="itemName">Enter the item name: </label>
+				<input
+					type="text"
+					name="itemName"
+					id="itemName"
+					required
+					value={formData.itemName}
+					onChange={handleChange}
+				/>
+			</div>
+			<div className="buy-again">
+				<label htmlFor="daysUntilNextPurchase">
+					When do you think you will need to purchase this item again?
+				</label>
+				<select
+					name="daysUntilNextPurchase"
+					id="daysUntilNextPurchase"
+					value={formData.daysUntilNextPurchase}
+					onChange={handleChange}
+				>
+					<option value="">Select Time</option>
+					<option value="7">Soon (7 days)</option>
+					<option value="14">Kind of soon (14 days)</option>
+					<option value="30">Not soon (30 days)</option>
+				</select>
+			</div>
+			<button type="submit">Add Item</button>
+		</form>
+	);
+}

src/components/ManageListForms/ShareListForm.jsx

@@ -0,0 +1,27 @@
+import { useState } from 'react';
+import { shareList } from '../../api';
+
+export default function ShareListForm({ listPath, user }) {
+	const [recipientEmail, setRecipientEmail] = useState('');
+	const currentUserId = user?.uid;
+
+	const handleSubmit = async (event) => {
+		event.preventDefault();
+		await shareList(listPath, currentUserId, recipientEmail);
+		setRecipientEmail('');
+	};
+
+	return (
+		<form onSubmit={(event) => handleSubmit(event)}>
+			<label htmlFor="email">Invite a user by email: </label>
+			<input
+				type="text"
+				id="email"
+				required
+				value={recipientEmail}
+				onChange={(e) => setRecipientEmail(e.target.value)}
+			/>
+			<button type="submit">Invite</button>
+		</form>
+	);
+}

src/views/ManageList.jsx

@@ -1,56 +1,11 @@
-import { useState } from 'react';
-import { addItem } from '../api/firebase';
-export function ManageList({ listPath }) {
-	const [formData, setFormData] = useState({
-		itemName: '',
-		daysUntilNextPurchase: '',
-	});
-
-	const handleSubmit = async (event) => {
-		try {
-			event.preventDefault();
-			await addItem(listPath, formData);
-			alert(`${formData.itemName} was added to the list successfully`);
-		} catch (error) {
-			alert(`There was a problem adding ${formData.itemName} to the list`);
-		}
-	};
-
-	const handleChange = (event) => {
-		let { name, value } = event.target;
-		setFormData((prevFormData) => ({ ...prevFormData, [name]: value }));
-	};
+import AddItemForm from '../components/ManageListForms/AddItemForm';
+import ShareListForm from '../components/ManageListForms/ShareListForm';
 
+export function ManageList({ listPath, user }) {
 	return (
-		<form onSubmit={(event) => handleSubmit(event)}>
-			<div className="item-name">
-				<label htmlFor="itemName">Enter the item name: </label>
-				<input
-					type="text"
-					name="itemName"
-					id="itemName"
-					required
-					value={formData.itemName}
-					onChange={handleChange}
-				/>
-			</div>
-			<div className="buy-again">
-				<label htmlFor="daysUntilNextPurchase">
-					When do you think you will need to purchase this item again?
-				</label>
-				<select
-					name="daysUntilNextPurchase"
-					id="daysUntilNextPurchase"
-					value={formData.daysUntilNextPurchase}
-					onChange={handleChange}
-				>
-					<option value="">Select Time</option>
-					<option value="7">Soon (7 days)</option>
-					<option value="14">Kind of soon (14 days)</option>
-					<option value="30">Not soon (30 days)</option>
-				</select>
-			</div>
-			<button type="submit">Add Item</button>
-		</form>
+		<div>
+			<AddItemForm listPath={listPath} />
+			<ShareListForm listPath={listPath} user={user} />
+		</div>
 	);
 }