Issue #12: Delete Items from Shopping List

src/api/firebase.js

@@ -7,6 +7,7 @@ import {
 	onSnapshot,
 	updateDoc,
 	addDoc,
+	deleteDoc,
 } from 'firebase/firestore';
 import { useEffect, useState } from 'react';
 import { db } from './config';
@@ -233,10 +234,7 @@ 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 itemDocRef = doc(db, listPath, `items`, itemId);
+	await deleteDoc(itemDocRef);
 }

src/components/ListItem.jsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { useToggle } from '@uidotdev/usehooks';
 import { Toggle } from './Toggle.jsx';
 import './ListItem.css';
-import { updateItem } from '../api/firebase.js';
+import { updateItem, deleteItem } from '../api/firebase.js';
 
 export function ListItem({
 	name,
@@ -12,9 +12,11 @@ export function ListItem({
 	dateLastPurchased,
 	purchaseInterval,
 	dateCreated,
+	setMessage,
 }) {
 	const [purchased, setPurchased] = useToggle(false);
 	const [isDisabled, setIsDisabled] = useState(false);
+
 	useEffect(() => {
 		if (dateLastPurchased) {
 			const checkExpiration = () => {
@@ -59,6 +61,22 @@ export function ListItem({
 		}
 	};
 
+	// handleDelete Function
+	const handleDelete = async () => {
+		const deleteConfirm = window.confirm(
+			`Are you sure you want to delete ${name}?`,
+		);
+
+		if (deleteConfirm) {
+			try {
+				await deleteItem(listPath, itemId);
+				setMessage(`${name} has been deleted successfully!`);
+			} catch (error) {
+				console.log(`Error:`, error);
+			}
+		}
+	};
+
 	return (
 		<>
 			<li className="ListItem">
@@ -72,6 +90,9 @@ export function ListItem({
 				/>
 
 				{dateLastPurchased ? dateLastPurchased.toDate().toLocaleString() : ''}
+				<button onClick={handleDelete} aria-label={`Delete ${name}`}>
+					Delete
+				</button>
 			</li>
 		</>
 	);

src/views/List.jsx

@@ -4,6 +4,8 @@ import { NavLink } from 'react-router-dom';
 
 export function List({ data, listPath }) {
 	const [searchInput, setSearchInput] = useState('');
+	const [message, setMessage] = useState('');
+
 	const handleInputChange = (e) => {
 		setSearchInput(e.target.value);
 	};
@@ -62,6 +64,7 @@ export function List({ data, listPath }) {
 								dateLastPurchased={item.dateLastPurchased}
 								purchaseInterval={item.purchaseInterval}
 								dateCreated={item.dateCreated}
+								setMessage={setMessage}
 							/>
 						);
 					})
@@ -71,6 +74,8 @@ export function List({ data, listPath }) {
 						No items found! <NavLink to="/manage-list"> Add item</NavLink>
 					</li>
 				)}
+				<br />
+				<span>{message}</span>
 			</ul>
 		</>
 	);