Merge pull request #49 from the-collab-lab/gb-nk-delete-item

Delete button deletes item from list and firebase after user confirma…

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';
@@ -210,10 +211,13 @@ 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) {
+	// reference the item path
+	const itemDocRef = doc(db, listPath, 'items', itemId);
+	try {
+		// delete the item from the database
+		await deleteDoc(itemDocRef);
+	} catch (error) {
+		throw new Error(`Failed updating item: ${error.message}`);
+	}
 }

src/components/AddItems.jsx

@@ -62,13 +62,10 @@ export function AddItems({ items }) {
 					type="text"
 					id="item-name"
 					placeholder="Enter item name"
-					pattern="^[^\s].+[^\s]$"
-				>
-					Item Name:
-				</TextInputElement>
-				<label htmlFor="item-name" required={true}>
-					Item Name:
-				</label>
+					label="Item Name:"
+					required={true}
+				/>
+
 				{Object.entries(daysUntilPurchaseOptions).map(([key, value]) => (
 					<RadioInputElement
 						key={key}

src/components/ListItem.jsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import './ListItem.css';
-import { updateItem } from '../api';
+import { updateItem, deleteItem } from '../api';
 import { calculateDateNextPurchased, ONE_DAY_IN_MILLISECONDS } from '../utils';
 
 const currentDate = new Date();
@@ -44,6 +44,17 @@ export function ListItem({ item, listPath }) {
 		}
 	};
 
+	const handleDeleteItem = async () => {
+		if (confirm(`Are you sure you want to delete this item?`)) {
+			try {
+				await deleteItem(listPath, id);
+			} catch (error) {
+				alert('Item was not deleted');
+			}
+		}
+		return;
+	};
+
 	return (
 		<li className="ListItem">
 			<input
@@ -53,6 +64,7 @@ export function ListItem({ item, listPath }) {
 				onChange={handleChange}
 			/>
 			<label htmlFor={`checkbox-${id}`}>{name}</label>
+			<button onClick={handleDeleteItem}>Delete Item</button>
 		</li>
 	);
 }

src/components/TextInputElement.jsx

@@ -16,6 +16,7 @@ const TextInputElement = ({
 				placeholder={placeholder}
 				onChange={onChange}
 				required={required}
+				pattern="^[^\s].+[^\s]$"
 			/>
 			<br />
 		</>

src/views/List.jsx

@@ -1,12 +1,10 @@
 import { ListItem } from '../components';
 import { useState } from 'react';
-import { useStateWithStorage } from '../utils';
 import { AddItems } from '../components/AddItems';
 import TextInputElement from '../components/TextInputElement';
 
-export function List({ data }) {
+export function List({ data, listPath }) {
 	const [searchItem, setSearchItem] = useState('');
-	const [listPath] = useStateWithStorage('tcl-shopping-list-path', null);
 
 	const handleTextChange = (event) => {
 		setSearchItem(event.target.value);
@@ -20,12 +18,12 @@ export function List({ data }) {
 
 	return (
 		<>
-			{!data.length ? (
+			{!data?.length ? (
 				<>
 					<p>Welcome to {listName}!</p>
 					<p>Ready to add your first item? Start adding below!</p>
 
-					<AddItems />
+					<AddItems items={data} />
 				</>
 			) : (
 				<>

tests/List.test.jsx

@@ -14,7 +14,7 @@ beforeEach(() => {
 
 describe('List Component', () => {
 	test('renders the shopping list name, search field, and all list items from the data prop', () => {
-		render(<List data={mockShoppingListData} />);
+		render(<List data={mockShoppingListData} listPath={'/groceries'} />);
 
 		expect(screen.getByText('groceries')).toBeInTheDocument();
 		expect(screen.getByLabelText('Search Item:')).toBeInTheDocument();
@@ -25,7 +25,7 @@ describe('List Component', () => {
 	});
 
 	test('shows welcome message and AddItems component when no items are present', () => {
-		render(<List data={[]} />);
+		render(<List data={[]} listPath={'/groceries'} />);
 
 		expect(screen.getByText('Welcome to groceries!')).toBeInTheDocument();
 		expect(screen.getByLabelText('Item Name:')).toBeInTheDocument();