Merge pull request #36 from the-collab-lab/an-sc-issue-12

12. As a user, I want to be able to delete items from my shopping list so that my list isn’t cluttered with items I don’t want to buy in the future.

src/api/firebase.js

@@ -2,6 +2,7 @@ import {
 	arrayUnion,
 	getDoc,
 	setDoc,
+	deleteDoc,
 	collection,
 	doc,
 	onSnapshot,
@@ -202,10 +203,8 @@ export async function updateItem(
 	});
 }
 
-export async function deleteItem() {
-	/**
-	 * TODO: Fill this out so that it uses the correct Firestore function
-	 * to delete an existing item. You'll need to figure out what arguments
-	 * this function must accept!
-	 */
+export async function deleteItem(listPath, itemId) {
+	const listCollectionRef = collection(db, listPath, 'items');
+	const itemDocRef = doc(listCollectionRef, itemId);
+	return deleteDoc(itemDocRef);
 }

src/components/ListItem.jsx

@@ -1,4 +1,4 @@
-import { updateItem } from '../api';
+import { updateItem, deleteItem } from '../api';
 import { subtractDates } from '../utils';
 import { Timestamp } from 'firebase/firestore';
 import { calculateEstimate } from '@the-collab-lab/shopping-list-utils';
@@ -43,6 +43,18 @@ export function ListItem({
 		}
 	};
 
+	const handleDelete = async () => {
+		try {
+			if (window.confirm('Are you sure you want to delete this item?')) {
+				await deleteItem(listPath, id);
+			} else {
+				return;
+			}
+		} catch (err) {
+			console.error(err.message);
+		}
+	};
+
 	return (
 		<li className="ListItem">
 			<label>
@@ -55,6 +67,9 @@ export function ListItem({
 					checked={subtractDates(todaysDate, dateLastPurchased)}
 				></input>
 			</label>
+			<button onClick={handleDelete} className="delete-button">
+				Delete
+			</button>
 		</li>
 	);
 }