fill deleteItem function in api/firebase.js and add "Delete item" but…

…ton in ListItem.jsx
the-collab-lab · Mar 11, 2024 · 9200fa5 · 9200fa5
1 parent 3e1607b
commit 9200fa5
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 17 deletions.
diff --git a/src/api/firebase.js b/src/api/firebase.js
@@ -1,20 +1,17 @@
 import {
+	addDoc,
 	arrayUnion,
-	getDoc,
-	setDoc,
 	collection,
+	deleteDoc,
 	doc,
+	getDoc,
 	onSnapshot,
+	setDoc,
 	updateDoc,
-	addDoc,
 } from 'firebase/firestore';
 import { useEffect, useState } from 'react';
 import { db } from './config';
-import {
-	getFutureDate,
-	getDaysBetweenDates,
-	isMoreThanADayAgo,
-} from '../utils';
+import { getDaysBetweenDates, getFutureDate } from '../utils';
 import { calculateEstimate } from '@the-collab-lab/shopping-list-utils';
 
 /**
@@ -215,10 +212,9 @@ export async function updateItem(listPath, itemId) {
 	return itemDocumentRef;
 }
 
-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 listCollectionRef = collection(db, listPath, 'items');
+	const itemDocumentRef = doc(listCollectionRef, itemId);
+
+	await deleteDoc(itemDocumentRef);
 }
diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
@@ -1,4 +1,5 @@
 import './ListItem.css';
+import { deleteItem } from '../api/firebase';
 
 export function ListItem({
 	isRecentlyPurchased,
@@ -27,6 +28,7 @@ export function ListItem({
 					className="ListItem__label"
 				>{`Mark ${name} as purchased`}</label>
 			</div>
+			<button onClick={() => deleteItem(listPath, itemId)}>Delete item</button>
 		</li>
 	);
 }
diff --git a/src/utils/inputValidation.js b/src/utils/inputValidation.js
@@ -6,7 +6,7 @@ export const inputHasOnlyNUmbers = (string) => {
 	return !!string.match(/^\d+$/);
 };
 
-export const inputHasRepeatedValue = (string, value) => {
+export const stringsHaveSameValue = (string, value) => {
 	const regex = /[^a-z]/g;
 	const stringOne = string.toLowerCase().trim().replace(regex, '');
 	const stringTwo = value.toLowerCase().trim().replace(regex, '');

diff --git a/src/views/ManageList.jsx b/src/views/ManageList.jsx
@@ -6,7 +6,7 @@ import ErrorMessage from '../components/ErrorMessage';
 import {
 	inputHasValue,
 	inputHasOnlyNUmbers,
-	inputHasRepeatedValue,
+	stringsHaveSameValue,
 } from '../utils/inputValidation';
 
 export function ManageList({ data, listPath, userId, userEmail }) {
@@ -28,7 +28,7 @@ export function ManageList({ data, listPath, userId, userEmail }) {
 			return;
 		}
 
-		if (data.some((item) => inputHasRepeatedValue(item.name, itemName))) {
+		if (data.some((item) => stringsHaveSameValue(item.name, itemName))) {
 			setAddItemErrMessage('This item is already in your list');
 			form.reset();
 			return;