Dc el delete items

src/api/firebase.js

@@ -7,6 +7,7 @@ import {
 	doc,
 	onSnapshot,
 	updateDoc,
+	deleteDoc,
 } from 'firebase/firestore';
 import { useEffect, useState } from 'react';
 import { db } from './config';
@@ -219,10 +220,18 @@ export async function updateItem(listPath, itemId, { totalPurchases }) {
 	}
 }
 
-export async function deleteItem() {
+export async function deleteItem(listPath, itemId) {
 	/**
 	 * 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!
 	 */
+	try {
+		const itemRef = doc(db, listPath, 'items', itemId);
+		await deleteDoc(itemRef);
+		return 'Item has been deleted successfully';
+	} catch (error) {
+		console.log(error);
+		throw new Error('Error deleting the item');
+	}
 }

src/components/ListItem.jsx

@@ -1,18 +1,17 @@
 import { useState, useEffect } from 'react';
 import './ListItem.css';
 
-export function ListItem({ name, dateLastPurchased, onCheck }) {
+export function ListItem({ name, dateLastPurchased, onCheck, onDelete }) {
 	const [isChecked, setIsChecked] = useState(false);
 
-// Update `isChecked` based on the `dateLastPurchased` value
+	// Update `isChecked` based on the `dateLastPurchased` value
 	useEffect(() => {
 		const checkStatus = () => {
 			if (dateLastPurchased) {
 				const purchaseDate = dateLastPurchased.toDate();
 				const timeSinceLastPurchase = new Date() - purchaseDate;
 				const hasBeenPurchasedRecently =
-
-				timeSinceLastPurchase < 24 * 60 * 60 * 1000; // 24 hours
+					timeSinceLastPurchase < 24 * 60 * 60 * 1000; // 24 hours
 				setIsChecked(hasBeenPurchasedRecently);
 			} else {
 				setIsChecked(false);
@@ -22,8 +21,10 @@ export function ListItem({ name, dateLastPurchased, onCheck }) {
 		checkStatus();
 	}, [dateLastPurchased]);
 
-	const handleChecked = () => {
-		onCheck(id);
+	const handleDeleteButton = () => {
+		if (window.confirm(`Do you really want to delete ${name}?`)) {
+			onDelete();
+		}
 	};
 
 	return (
@@ -37,6 +38,7 @@ export function ListItem({ name, dateLastPurchased, onCheck }) {
 				/>
 				{name}
 			</label>
+			<button onClick={handleDeleteButton}>delete</button>
 		</li>
 	);
 }

src/views/List.jsx

@@ -1,10 +1,11 @@
 import { ListItem } from '../components';
 import { useState } from 'react';
-import { updateItem } from '../api/firebase';
+import { updateItem, deleteItem } from '../api/firebase';
 import { Link } from 'react-router-dom';
 
 export function List({ data, listPath, lists }) {
 	const [searchItem, setSearchItem] = useState('');
+	const [errorMsg, setErrorMsg] = useState('');
 
 	const handleSearch = (e) => {
 		e.preventDefault();
@@ -28,6 +29,16 @@ export function List({ data, listPath, lists }) {
 		});
 	};
 
+	const handleDelete = async (itemId) => {
+		try {
+			await deleteItem(listPath, itemId);
+			setErrorMsg('');
+		} catch (error) {
+			console.error(error.message, error);
+			setErrorMsg('Failed to delete the item. Please try again!');
+		}
+	};
+
 	return (
 		<>
 			<p>
@@ -76,11 +87,14 @@ export function List({ data, listPath, lists }) {
 									name={item.name}
 									dateLastPurchased={item.dateLastPurchased}
 									onCheck={() => handleCheck(item)}
+									onDelete={() => handleDelete(item.id)}
 								/>
 							))}
 						</ul>
 					)}
 
+					{errorMsg && <p>{errorMsg}</p>}
+
 					<ul>
 						{data.map((item) => (
 							<ListItem
@@ -89,6 +103,7 @@ export function List({ data, listPath, lists }) {
 								id={item.id}
 								dateLastPurchased={item.dateLastPurchased}
 								onCheck={() => handleCheck(item)}
+								onDelete={() => handleDelete(item.id)}
 							/>
 						))}
 					</ul>