From c65a77ade6d63f27d7ef4445ce296e69d0e93762 Mon Sep 17 00:00:00 2001 From: RossaMania Date: Thu, 19 Sep 2024 21:08:56 -0500 Subject: [PATCH 01/11] feat: Add delete button to src/components/ListItem.tsx. Add deleteItemHandler and wirte up to delete button. Add dialog element to that deleteItemHandler for confirmation. Co-authored-by: Maha Ahmed --- src/components/ListItem.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx index 09e3b68..7e1b6f9 100644 --- a/src/components/ListItem.tsx +++ b/src/components/ListItem.tsx @@ -52,6 +52,20 @@ export function ListItemCheckBox({ item, listPath }: Props) { } }; + const deleteItemHandler = () => { + +

Do you want to delete this item?

+
+ + +
+ ; + //if (user confirms delete) { + //deleteItem() + }; + + return; + return (
+
); } From 801d3c62ff040ba6c84c83d949225e05876690dc Mon Sep 17 00:00:00 2001 From: RossaMania Date: Thu, 19 Sep 2024 22:07:34 -0500 Subject: [PATCH 02/11] feat: Refactor ListItem component. This commit refactors the ListItem component in ListItem.tsx. It replaces the previous implementation of the deleteItemHandler with a new implementation that uses the window.confirm method to prompt the user for confirmation before deleting the item. If the user confirms the deletion, the deleteItem function is called with the listPath and item as arguments. If the user cancels the deletion, nothing happens. Co-authored-by: eternalmaha --- src/api/firebase.ts | 9 +++------ src/components/ListItem.tsx | 21 ++++++++++----------- 2 files changed, 13 insertions(+), 17 deletions(-) diff --git a/src/api/firebase.ts b/src/api/firebase.ts index 189d00c..f17a349 100644 --- a/src/api/firebase.ts +++ b/src/api/firebase.ts @@ -266,10 +266,7 @@ export async function updateItem(listPath: string, item: ListItem) { } } -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! - */ +//delete an item +export async function deleteItem(listPath: string, item: ListItem) { + const listCollectionRef = collection(db, listPath, "items"); } diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx index 7e1b6f9..ce37f6b 100644 --- a/src/components/ListItem.tsx +++ b/src/components/ListItem.tsx @@ -53,18 +53,17 @@ export function ListItemCheckBox({ item, listPath }: Props) { }; const deleteItemHandler = () => { - -

Do you want to delete this item?

-
- - -
- ; - //if (user confirms delete) { - //deleteItem() - }; + const isConfirmed = window.confirm("Do you want to delete this item?"); + console.log(isConfirmed); - return; + if (isConfirmed) { + deleteItem(listPath, item); + alert("Item has been successfully deleted!"); + } + if (!isConfirmed) { + return; + } + }; return (
From 06f0d71056431914b07b5677ebe6181f8a80343e Mon Sep 17 00:00:00 2001 From: RossaMania Date: Thu, 19 Sep 2024 22:17:59 -0500 Subject: [PATCH 03/11] refactor: Update deleteItem function in firebase.ts This commit updates the deleteItem function in firebase.ts to use the item's document reference instead of the collection reference. This change improves the efficiency and accuracy of deleting items from the list. Co-authored by eternalmaha --- src/api/firebase.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/api/firebase.ts b/src/api/firebase.ts index f17a349..d12e223 100644 --- a/src/api/firebase.ts +++ b/src/api/firebase.ts @@ -3,6 +3,7 @@ import { getDoc, setDoc, addDoc, + deleteDoc, collection, doc, onSnapshot, @@ -266,7 +267,7 @@ export async function updateItem(listPath: string, item: ListItem) { } } -//delete an item +//delete an item from the list export async function deleteItem(listPath: string, item: ListItem) { - const listCollectionRef = collection(db, listPath, "items"); + const itemDocRef = doc(db, listPath, "items", item.id); } From a20648c7d7173cb05b3ffd6f7a1c1a718d2867f1 Mon Sep 17 00:00:00 2001 From: RossaMania Date: Thu, 19 Sep 2024 22:27:29 -0500 Subject: [PATCH 04/11] refactor: Update deleteItem function in firebase.ts. This commit updates the deleteItem function in firebase.ts to use a try-catch block to try to delete the item with the deleteDoc func from Firestore, or catch the error. Co-authored by eternalmaha --- src/api/firebase.ts | 10 ++++++++++ src/components/ListItem.tsx | 2 +- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/api/firebase.ts b/src/api/firebase.ts index d12e223..e264feb 100644 --- a/src/api/firebase.ts +++ b/src/api/firebase.ts @@ -270,4 +270,14 @@ export async function updateItem(listPath: string, item: ListItem) { //delete an item from the list export async function deleteItem(listPath: string, item: ListItem) { const itemDocRef = doc(db, listPath, "items", item.id); + // Delete the item from the list in Firestore. + // Should be a simple try-catch block. Try === deletes the item. Catch === logs the error. + // Let's try the deleteDoc from Firestore. + try { + await deleteDoc(itemDocRef); + } catch (error) { + // If there's an error, log it to the console and throw it. + console.error("Oops! Error deleting Item!", error); + throw error; + } } diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx index ce37f6b..08a9638 100644 --- a/src/components/ListItem.tsx +++ b/src/components/ListItem.tsx @@ -1,5 +1,5 @@ import "./ListItem.css"; -import { updateItem, ListItem } from "../api"; +import { updateItem, deleteItem, ListItem } from "../api"; import { useState } from "react"; import toast from "react-hot-toast"; import { moreThan24HoursPassed } from "../utils"; From ddf6957d5038575c776c4bd73ffc1a2f5d590378 Mon Sep 17 00:00:00 2001 From: Maha Date: Fri, 20 Sep 2024 16:33:38 -0400 Subject: [PATCH 05/11] alert message appears after deleted item --- src/api/firebase.ts | 1 + src/components/ListItem.tsx | 7 ++++--- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/api/firebase.ts b/src/api/firebase.ts index 76c3baa..b0ef450 100644 --- a/src/api/firebase.ts +++ b/src/api/firebase.ts @@ -303,6 +303,7 @@ export async function deleteItem(listPath: string, item: ListItem) { // Let's try the deleteDoc from Firestore. try { await deleteDoc(itemDocRef); + alert("Item has been successfully deleted!"); } catch (error) { // If there's an error, log it to the console and throw it. console.error("Oops! Error deleting Item!", error); diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx index 08a9638..0394aef 100644 --- a/src/components/ListItem.tsx +++ b/src/components/ListItem.tsx @@ -55,10 +55,11 @@ export function ListItemCheckBox({ item, listPath }: Props) { const deleteItemHandler = () => { const isConfirmed = window.confirm("Do you want to delete this item?"); console.log(isConfirmed); + console.log("Item:", item); + console.log("List Path:", listPath); if (isConfirmed) { - deleteItem(listPath, item); - alert("Item has been successfully deleted!"); + deleteItem(listPath as string, item); } if (!isConfirmed) { return; @@ -80,7 +81,7 @@ export function ListItemCheckBox({ item, listPath }: Props) { /> {item.name} - +
); } From 4fbb12738d6130f4fee9569dfa24ecfbf8430925 Mon Sep 17 00:00:00 2001 From: RossaMania Date: Sat, 21 Sep 2024 20:14:14 -0500 Subject: [PATCH 06/11] refactor: Update deleteItem function in firebase.ts to display deleted item name in alert message. --- src/api/firebase.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/api/firebase.ts b/src/api/firebase.ts index b0ef450..42b58b0 100644 --- a/src/api/firebase.ts +++ b/src/api/firebase.ts @@ -303,7 +303,7 @@ export async function deleteItem(listPath: string, item: ListItem) { // Let's try the deleteDoc from Firestore. try { await deleteDoc(itemDocRef); - alert("Item has been successfully deleted!"); + alert(`${item.name} has been successfully deleted!`); } catch (error) { // If there's an error, log it to the console and throw it. console.error("Oops! Error deleting Item!", error); From 98e7a1772e6a867a85812e453167f07b944e9242 Mon Sep 17 00:00:00 2001 From: RossaMania Date: Sat, 21 Sep 2024 20:38:04 -0500 Subject: [PATCH 07/11] refactor: Update deleteItem function in ListItem.tsx to use try-catch block for error handling. If an error occurs during the deletion process, it will be caught and logged to the console. This change improves the robustness of the delete functionality. --- src/components/ListItem.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx index 0394aef..e682352 100644 --- a/src/components/ListItem.tsx +++ b/src/components/ListItem.tsx @@ -59,7 +59,12 @@ export function ListItemCheckBox({ item, listPath }: Props) { console.log("List Path:", listPath); if (isConfirmed) { - deleteItem(listPath as string, item); + try { + deleteItem(listPath as string, item); + } catch (error) { + console.error("Error deleting item", error); + throw error; + } } if (!isConfirmed) { return; From 7104cb009b53663c99b3bc9de4883e06855e5812 Mon Sep 17 00:00:00 2001 From: RossaMania Date: Sat, 21 Sep 2024 20:48:00 -0500 Subject: [PATCH 08/11] refactor: Update deleteItem function in ListItem.tsx to use try-catch block for error handling and display an alert message on error. Commit co-authored by @eternalmaha --- src/components/ListItem.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx index e682352..dc47e83 100644 --- a/src/components/ListItem.tsx +++ b/src/components/ListItem.tsx @@ -63,9 +63,10 @@ export function ListItemCheckBox({ item, listPath }: Props) { deleteItem(listPath as string, item); } catch (error) { console.error("Error deleting item", error); - throw error; + alert("Error deleting item!"); } } + if (!isConfirmed) { return; } From bd31f440fcceab336c27081518030a36586d0032 Mon Sep 17 00:00:00 2001 From: RossaMania Date: Sat, 21 Sep 2024 20:56:53 -0500 Subject: [PATCH 09/11] refactor: Update deleteItem function in firebase.ts to handle null itemDocRef. The deleteItem function in firebase.ts has been updated to handle the case where the itemDocRef is null. This change improves the robustness of the delete functionality by preventing potential errors when trying to delete an item that does not exist. --- src/api/firebase.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/api/firebase.ts b/src/api/firebase.ts index 42b58b0..b6eeef1 100644 --- a/src/api/firebase.ts +++ b/src/api/firebase.ts @@ -297,7 +297,7 @@ export async function updateItem(listPath: string, item: ListItem) { //delete an item from the list export async function deleteItem(listPath: string, item: ListItem) { - const itemDocRef = doc(db, listPath, "items", item.id); + const itemDocRef = doc(db, listPath, "items", item.id) || null; // Delete the item from the list in Firestore. // Should be a simple try-catch block. Try === deletes the item. Catch === logs the error. // Let's try the deleteDoc from Firestore. From a9622c175f9538f16939d934a462f7049bbc7c7e Mon Sep 17 00:00:00 2001 From: RossaMania Date: Sat, 21 Sep 2024 21:15:23 -0500 Subject: [PATCH 10/11] refactor: Improve deleteItem function in firebase.ts and ListItem.tsx. The deleteItem function in firebase.ts has been updated to handle the case where the itemDocRef is null, improving the robustness of the delete functionality. Additionally, the deleteItem function in ListItem.tsx now uses a try-catch block for error handling and displays an alert message on error. If an error occurs during the deletion process, it will be caught and logged to the console. Furthermore, the deleteItem function in firebase.ts has been modified to display the deleted item name in the alert message. This change enhances the overall delete functionality and user experience. Co-authored-by: Maha Ahmed --- src/api/firebase.ts | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/src/api/firebase.ts b/src/api/firebase.ts index b6eeef1..32b43ac 100644 --- a/src/api/firebase.ts +++ b/src/api/firebase.ts @@ -297,16 +297,20 @@ export async function updateItem(listPath: string, item: ListItem) { //delete an item from the list export async function deleteItem(listPath: string, item: ListItem) { - const itemDocRef = doc(db, listPath, "items", item.id) || null; + const itemDocRef = doc(db, listPath, "items", item.id); + const docSnap = await getDoc(itemDocRef); + // Delete the item from the list in Firestore. // Should be a simple try-catch block. Try === deletes the item. Catch === logs the error. // Let's try the deleteDoc from Firestore. - try { - await deleteDoc(itemDocRef); - alert(`${item.name} has been successfully deleted!`); - } catch (error) { - // If there's an error, log it to the console and throw it. - console.error("Oops! Error deleting Item!", error); - throw error; + if (docSnap.exists()) { + try { + await deleteDoc(itemDocRef); + alert(`${item.name} has been successfully deleted!`); + } catch (error) { + // If there's an error, log it to the console and throw it. + console.error("Oops! Error deleting Item!", error); + throw error; + } } } From 439f1637332c4b0652f5898d608aeb2d7a39e3a6 Mon Sep 17 00:00:00 2001 From: Maha Date: Sat, 21 Sep 2024 22:18:35 -0400 Subject: [PATCH 11/11] cleaning up the console.logs and specifying the error messages --- src/api/firebase.ts | 2 ++ src/components/ListItem.tsx | 5 +---- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/api/firebase.ts b/src/api/firebase.ts index 32b43ac..cc98f42 100644 --- a/src/api/firebase.ts +++ b/src/api/firebase.ts @@ -297,7 +297,9 @@ export async function updateItem(listPath: string, item: ListItem) { //delete an item from the list export async function deleteItem(listPath: string, item: ListItem) { + //reference the item document const itemDocRef = doc(db, listPath, "items", item.id); + //get the document from firebase const docSnap = await getDoc(itemDocRef); // Delete the item from the list in Firestore. diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx index dc47e83..057da4d 100644 --- a/src/components/ListItem.tsx +++ b/src/components/ListItem.tsx @@ -54,15 +54,12 @@ export function ListItemCheckBox({ item, listPath }: Props) { const deleteItemHandler = () => { const isConfirmed = window.confirm("Do you want to delete this item?"); - console.log(isConfirmed); - console.log("Item:", item); - console.log("List Path:", listPath); if (isConfirmed) { try { deleteItem(listPath as string, item); } catch (error) { - console.error("Error deleting item", error); + console.error(`Error deleting ${item.name}`, error); alert("Error deleting item!"); } }