Merge branch 'main' into dtp-nr-sorting

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,
@@ -13,9 +13,11 @@ export function ListItem({
 	purchaseInterval,
 	dateCreated,
 	sortCriteria,
+	setMessage,
 }) {
 	const [purchased, setPurchased] = useToggle(false);
 	const [isDisabled, setIsDisabled] = useState(false);
+
 	useEffect(() => {
 		if (dateLastPurchased) {
 			const checkExpiration = () => {
@@ -59,13 +61,35 @@ 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);
+			}
+		}
+	};
 
 	const urgencyClass = sortCriteria.tag.toLowerCase().replace(/\s/g, '');
 
 	return (
 		<>
 			<tr className="ListItem">
-				<td>{name}</td>
+				<td>{name}
+	        <button onClick={handleDelete} aria-label={`Delete ${name}`}>
+					Delete
+				</button>
+         </td>
+
 				<td>
 					<Toggle
 						toggle={handleToggle}
@@ -80,6 +104,7 @@ export function ListItem({
 				</td>
 				<td className={urgencyClass}>{sortCriteria.tag}</td>
 			</tr>
+
 		</>
 	);
 }

src/views/List.jsx

@@ -1,12 +1,15 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { ListItem } from '../components';
 import { NavLink } from 'react-router-dom';
 import { comparePurchaseUrgency } from '../utils/dates.js';
 
 export function List({ data, listPath }) {
 	const [searchInput, setSearchInput] = useState('');
+	const [message, setMessage] = useState('');
+
 	const handleInputChange = (e) => {
 		setSearchInput(e.target.value);
+		setMessage('');
 	};
 
 	const clearSearchInput = () => {
@@ -21,6 +24,14 @@ export function List({ data, listPath }) {
 			: item;
 	});
 
+	useEffect(() => {
+		if (message !== '') {
+			setInterval(() => {
+				setMessage('');
+			}, 5000);
+		}
+	}, [message]);
+
 	return (
 		<>
 			<p>
@@ -73,14 +84,18 @@ export function List({ data, listPath }) {
 								dateLastPurchased={item.dateLastPurchased}
 								purchaseInterval={item.purchaseInterval}
 								dateCreated={item.dateCreated}
+               	setMessage={setMessage}
 								sortCriteria={item.sortCriteria}
 							/>
 						))}
 					</tbody>
 				</table>
 			) : (
 				<p>No items to display</p>
-			)}
+			)}	
+				<br />
+				<span>{message}</span>
+
 		</>
 	);
 }