Merge pull request #22 from the-collab-lab/hm-mm-shareList

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>
  );
 }