Deleting item off the list

src/api/firebase.js

@@ -8,6 +8,7 @@ import {
 	updateDoc,
 	addDoc,
 	Timestamp,
+	deleteDoc,
 } from 'firebase/firestore';
 import { useEffect, useState } from 'react';
 import { db } from './config';
@@ -232,10 +233,12 @@ export async function updateItem(listPath, checked, itemData) {
 	}
 }
 
-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, id) {
+	const listCollectionRef = collection(db, listPath, 'items');
+	const itemRef = doc(listCollectionRef, id);
+	try {
+		await deleteDoc(itemRef);
+	} catch (error) {
+		console.error('Error deleting your item', error);
+	}
 }

src/components/ListItem.jsx

@@ -1,7 +1,8 @@
 import './ListItem.css';
-import { updateItem } from '../api';
+import { updateItem, deleteItem } from '../api';
 import { useEffect } from 'react';
 import { ONE_DAY_IN_MILLISECONDS } from '../utils/dates';
+import toast from 'react-hot-toast';
 
 export function ListItem({
 	listPath,
@@ -26,6 +27,16 @@ export function ListItem({
 		});
 	};
 
+	const handleDelete = async () => {
+		const confirm = window.confirm(`are you sure you want to delete ${name}?`);
+		if (confirm) {
+			await deleteItem(listPath, id);
+			toast.success(`${name} was deleted from the list`);
+		} else {
+			toast.error('Deletion canceled');
+		}
+	};
+
 	useEffect(() => {
 		const today = new Date().getTime();
 		const datePurchasedInMillis = dateLastPurchased?.toMillis();
@@ -51,6 +62,9 @@ export function ListItem({
 				disabled={isChecked}
 			/>
 			<label htmlFor={`${id}`}>{name}</label>
+			<button type="button" id={id} onClick={handleDelete}>
+				Delete
+			</button>
 		</li>
 	);
 }