Ap sm delete item

src/api/firebase.js

@@ -1,5 +1,6 @@
 import {
 	addDoc,
+	deleteDoc,
 	arrayUnion,
 	getDoc,
 	setDoc,
@@ -239,10 +240,12 @@ export async function updateItem(listPath, itemID, isChecked) {
 	}
 }
 
-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) {
+	// Note - firebase deleteDoc will remove the entire collection if the item being removed is the last in said collection!
+	const listRef = doc(db, listPath, 'items', itemID);
+	try {
+		await deleteDoc(listRef);
+	} catch (error) {
+		console.log(error);
+	}
 }

src/components/ListItem.jsx

@@ -1,5 +1,5 @@
 import './ListItem.css';
-import { updateItem } from '../api/firebase.js';
+import { updateItem, deleteItem } from '../api/firebase.js';
 import { useState, useEffect, useMemo } from 'react';
 import { ONE_DAY_IN_MILLISECONDS } from '../utils/dates.js';
 
@@ -29,6 +29,13 @@ export function ListItem({ listPath, item }) {
 		purchaseItem();
 	};
 
+	const deleteHandler = async (e) => {
+		// Note: Should we add more user feedback when items are successfully deleted? Some might further interrupt usability.
+		if (window.confirm(`Are you sure you'd like to delete ${item.name}?`)) {
+			await deleteItem(listPath, item.id);
+		}
+	};
+
 	//Calculate time remaining if purchase was less than 24 hours ago
 	const updateTimer = () => {
 		if (item.dateLastPurchased) {
@@ -65,6 +72,9 @@ export function ListItem({ listPath, item }) {
 					checked={isChecked}
 				/>
 			</label>
+			<button type="button" onClick={deleteHandler}>
+				Delete
+			</button>
 		</li>
 	);
 }