Merge pull request #24 from the-collab-lab/em-mp-invite-others-to-shopping-list

added invite friend form and connect with shareList func

Author: EmmaBin

src/App.jsx

@@ -49,7 +49,7 @@ export function App() {
 						element={<Home data={lists} setListPath={setListPath} />}
 					/>
 					<Route path="/list" element={<List data={data} />} />
-					<Route path="/manage-list" element={<ManageList />} />
+					<Route path="/manage-list" element={<ManageList userId={userId} />} />
 				</Route>
 			</Routes>
 		</Router>

src/api/firebase.js

@@ -139,21 +139,28 @@ export async function createList(userId, userEmail, listName) {
 export async function shareList(listPath, currentUserId, recipientEmail) {
 	// Check if current user is owner.
 	if (!listPath.includes(currentUserId)) {
-		return;
+		return {
+			response: `You don't have access to the shopping list "${listPath.split('/').pop()}".`,
+		};
 	}
+
 	// 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;
+		return { response: `User with email "${recipientEmail}" does not exist.` };
 	}
 	// Add the list to the recipient user's sharedLists array.
 	const listDocumentRef = doc(db, listPath);
 	const userDocumentRef = doc(db, 'users', recipientEmail);
-	updateDoc(userDocumentRef, {
+	await updateDoc(userDocumentRef, {
 		sharedLists: arrayUnion(listDocumentRef),
 	});
+
+	return {
+		response: `The shopping list "${listPath.split('/').pop()}" has been shared!`,
+	};
 }
 
 /**

src/views/ManageList.jsx

@@ -1,12 +1,13 @@
 import { useState } from 'react';
-import { addItem } from '../api';
+import { addItem, shareList } from '../api';
 
-export function ManageList() {
+export function ManageList({ userId }) {
 	const [formData, setFormData] = useState({
 		name: '',
 		frequency: '',
 	});
 
+	const [email, setEmail] = useState('');
 	function handleChange(e) {
 		e.preventDefault();
 		setFormData((prev) => ({
@@ -15,6 +16,11 @@ export function ManageList() {
 		}));
 	}
 
+	function handleEmailChange(e) {
+		e.preventDefault();
+		setEmail(e.target.value);
+	}
+
 	function handleSubmit(e) {
 		e.preventDefault();
 		if (formData.name.trim() === '') {
@@ -46,6 +52,16 @@ export function ManageList() {
 			});
 	}
 
+	async function handleEmailSubmit(e) {
+		e.preventDefault();
+		const listPath = localStorage.getItem('tcl-shopping-list-path');
+		try {
+			const result = await shareList(listPath, userId, email);
+			window.alert(result.response);
+			setEmail('');
+		} catch (error) {}
+	}
+
 	return (
 		<>
 			<p>
@@ -85,6 +101,20 @@ export function ManageList() {
 
 					<button type="submit">Submit</button>
 				</form>
+
+				<form onSubmit={handleEmailSubmit}>
+					<label htmlFor="invite-email">Invite user by email:</label>
+					<input
+						id="invite-email"
+						type="email"
+						name="email"
+						value={email}
+						onChange={handleEmailChange}
+						required
+					></input>
+
+					<button type="submit">Invite my friend</button>
+				</form>
 			</div>
 		</>
 	);