Merge pull request #24 from the-collab-lab/an-sc-issue-6

6. As a user, I want to be able to invite others to an existing shopping list #6

src/api/firebase.js

@@ -137,21 +137,22 @@ 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 'You are not the owner of this list. Only the owner can share the list.';
 	}
 	// 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 'User not found, please 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),
 	});
+	return `Yay, ${recipientEmail} was invited to your list!`;
 }
 
 /**

src/components/InviteForm.jsx

@@ -0,0 +1,47 @@
+import { useState } from 'react';
+import { shareList } from '../api';
+import { useAuth } from '../api/useAuth.jsx';
+
+const InviteForm = ({ listPath, closeModal }) => {
+	const [input, setInput] = useState('');
+	const { user } = useAuth();
+
+	const handleSubmit = async (e) => {
+		e.preventDefault();
+		try {
+			const message = await shareList(listPath, user.uid, input);
+			if (message) {
+				alert(message);
+				setInput('');
+				closeModal();
+				return;
+			}
+		} catch (err) {
+			console.error(err);
+		}
+	};
+
+	const handleInputChange = (e) => {
+		setInput(e.target.value);
+	};
+	return (
+		<>
+			<form onSubmit={handleSubmit}>
+				<label htmlFor="email">
+					Please enter the email of the person you want to invite:
+					<input
+						type="email"
+						name="recipientEmail"
+						placeholder="[email protected]"
+						id="email"
+						value={input}
+						onChange={handleInputChange}
+					/>
+				</label>
+				<button type="submit">Invite to List</button>
+			</form>
+		</>
+	);
+};
+
+export default InviteForm;

src/components/Modal.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const Modal = ({ isOpen, onClose, children }) => {
+	return (
+		<>
+			{isOpen ? (
+				<div className="modal-overlay">
+					<div className="modal-content">
+						<button className="close-btn" onClick={onClose}>
+							Close
+						</button>
+						{children}
+					</div>
+				</div>
+			) : null}
+		</>
+	);
+};
+
+export default Modal;

src/views/ManageList.jsx

@@ -1,11 +1,29 @@
+import { useState } from 'react';
 import AddItem from '../components/AddItem';
+import InviteForm from '../components/InviteForm';
+import Modal from '../components/Modal';
 
 export function ManageList({ listPath }) {
+	const [openInviteModal, setOpenInviteModal] = useState(false);
+
+	const openModal = () => {
+		setOpenInviteModal(true);
+	};
+
+	const closeModal = () => {
+		setOpenInviteModal(false);
+	};
+
 	return (
 		<>
 			<p>
 				Hello from the <code>/manage-list</code> page!
 			</p>
+			{/* Button to open modal for inviting user */}
+			{!openInviteModal ? <button onClick={openModal}>Invite</button> : null}
+			<Modal isOpen={openInviteModal} onClose={closeModal}>
+				<InviteForm listPath={listPath} closeModal={closeModal} />
+			</Modal>
 			<AddItem listPath={listPath} />
 		</>
 	);