Added delete button and implemented a function. Created a confirm win…

…dow for the user upon deleting item. Filled out deleteItem function in firebase

Co-authored-by: EmmaBin <[email protected]>

src/api/firebase.js

@@ -7,6 +7,7 @@ import {
 	onSnapshot,
 	updateDoc,
 	increment,
+	deleteDoc,
 } from 'firebase/firestore';
 import { useEffect, useState } from 'react';
 import { db } from './config';
@@ -228,10 +229,10 @@ export async function updateItem(listPath, itemId, item) {
 	return updateDoc(updateItemListDocRef, updateData);
 }
 
-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, item) {
+	try {
+		await deleteDoc(doc(db, listPath, 'items', item.name));
+	} catch (error) {
+		console.log(error);
+	}
 }

src/components/ListItem.jsx

@@ -1,11 +1,22 @@
 import { useState, useEffect } from 'react';
 import './ListItem.css';
-import { updateItem } from '../api';
+import { updateItem, deleteItem } from '../api';
 
 export function ListItem({ item }) {
-	const { name, dateLastPurchased, dateCreated, id } = item;
+	const { name, dateLastPurchased, id } = item;
 	const [checked, setChecked] = useState(false);
 
+	const handleDelete = async () => {
+		try {
+			if (window.confirm(`Are you sure you want to delete ${name}?`)) {
+				const listPath = localStorage.getItem('tcl-shopping-list-path');
+				await deleteItem(listPath, item);
+			}
+		} catch (error) {
+			console.log(error);
+		}
+	};
+
 	const has24HoursPassed = (dateLastPurchased) => {
 		const millisecondsFromTimestamp =
 			dateLastPurchased.seconds * 1000 +
@@ -47,6 +58,7 @@ export function ListItem({ item }) {
 				disabled={checked}
 			/>
 			{name}
+			<button onClick={handleDelete}>Delete</button>
 		</li>
 	);
 }