Issue # 12: Deleting a shopping list item #36

eternalmaha · 2024-09-20T17:38:50Z

Description

Users will need to be able to delete items they no longer need to purchase or if the item was added by mistake. We need to avoid cluttering the shopping list, and only display items that fit the users' current state of needs.

Related Issue

closes #12

Acceptance Criteria

The ListItem component renders a button that allows the user to delete an item from their list when clicked
Clicking the delete button prompts the user to confirm that they really want to delete the item
The deleteItem function in api/firebase.js has been filled out, and deletes the item from the Firestore database

Type of Changes

new feature
enhancement

Updates

deleteitems.mov

Testing Steps / QA Criteria

Sign onto the application.
Select a list from the home view.
Add list items if list is empty.
Press the "delete item" button to delete item.
A dialogue will appear to confirm deletion
If user clicks "yes", a confirmation message is displayed
If user clicks "cancel", they are returned to the windows page as normal.

…mHandler and wirte up to delete button. Add dialog element to that deleteItemHandler for confirmation. Co-authored-by: Maha Ahmed <eternalmaha@users.noreply.github.com>

… 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

…es 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

…tes 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

github-actions · 2024-09-20T17:39:48Z

Visit the preview URL for this PR (updated for commit 439f163):

https://tcl-77-smart-shopping-list--pr36-ma-rc-feat-delete-it-mfmocw0q.web.app

_{(expires Sun, 29 Sep 2024 02:19:39 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: b77df24030dca7d8b6561cb24957d2273c5e9d72}

adidalal · 2024-09-20T18:44:49Z

src/api/firebase.ts

-	 */
+//delete an item from the list
+export async function deleteItem(listPath: string, item: ListItem) {
+	const itemDocRef = doc(db, listPath, "items", item.id);


what happens if itemDocRef is null?

Great point! We try to use nullable types ass much as possible!

We were able to do a little razzle dazzle like this!

@RossaMania @adidalal This seems helpful :) We can play around with firebase getting documents methods

I see what you are saying now! The problem could be that FireBase is not getting the item to begin with. So we need to make sure that the item document is grabbed from firebase properly.

@eternalmaha brought up, since this is the file and functions talking to the firebase, we should use the .exists() method! I haven't seen that since MongoDB!

alex-andria

Works as expected great work Ross and Maha! 👏 👏

alex-andria · 2024-09-21T12:19:58Z

src/api/firebase.ts

+	// Let's try the deleteDoc from Firestore.
+	try {
+		await deleteDoc(itemDocRef);
+		alert("Item has been successfully deleted!");


I like the alert to let the user know if an item's successfully deleted! Maybe an enhancement in the future could be to pull the item name so that the alert confirms if "Cheese has been successfully deleted!" but that is a scope creep for the acceptance criteria of this card I suppose.

Fantastic suggestion! A nice touch! Simple to implement!

Yes! We always want to make sure the user knows they are doing the action they're supposed to!

tannaurus · 2024-09-21T15:08:37Z

src/components/ListItem.tsx

+		console.log("List Path:", listPath);
+
+		if (isConfirmed) {
+			deleteItem(listPath as string, item);


Because deleteItem re-throws, we'll have to catch it here and handle it too 🙂

Great point!

We wrapped the deleteItem() func call in a try-catch block! In the catch, we have the error being logged into the console! @eternalmaha pointed out we can keep notifying the user simple by doing some sort of alert! I thought we could just tuck an alert in the catch block!

@RossaMania and I were just thinking about the purposes of try-catchs in our deleteItem() call. I was wrapping my head around well "if deleteItem() throws an error as part of the function", do we need to throw an error again when its called? If im understanding correctly, its because there can be an error of course when deleting the item, then there can be an error when the function is being called itself. **as I research more about try-catches and function calls ** We decided to wrap a try catch around the whole function call.

…d item name in alert message.

… 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.

@eternalmaha

… block for error handling and display an alert message on error. Commit co-authored by @eternalmaha

…emDocRef. 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.

…. 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 <eternalmaha@users.noreply.github.com>

RossaMania and others added 4 commits September 19, 2024 21:08

feat: Add delete button to src/components/ListItem.tsx. Add deleteIte…

c65a77a

…mHandler and wirte up to delete button. Add dialog element to that deleteItemHandler for confirmation. Co-authored-by: Maha Ahmed <eternalmaha@users.noreply.github.com>

refactor: Update deleteItem function in firebase.ts. This commit upda…

a20648c

…tes 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

eternalmaha assigned eternalmaha and RossaMania Sep 20, 2024

eternalmaha added new feature enhancement New feature or request labels Sep 20, 2024

Merge branch 'main' into ma-rc-feat/delete-item

e5424ba

adidalal reviewed Sep 20, 2024

View reviewed changes

alert message appears after deleted item

ddf6957

alex-andria approved these changes Sep 21, 2024

View reviewed changes

tannaurus reviewed Sep 21, 2024

View reviewed changes

refactor: Update deleteItem function in firebase.ts to display delete…

4fbb127

…d item name in alert message.

eternalmaha requested review from bbland1 and zahrafalak September 22, 2024 01:14

eternalmaha marked this pull request as ready for review September 22, 2024 01:24

RossaMania and others added 5 commits September 21, 2024 20:38

refactor: Update deleteItem function in ListItem.tsx to use try-catch…

98e7a17

… 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.

refactor: Update deleteItem function in ListItem.tsx to use try-catch…

7104cb0

… block for error handling and display an alert message on error. Commit co-authored by @eternalmaha

cleaning up the console.logs and specifying the error messages

439f163

eternalmaha merged commit a2bcb7f into main Sep 22, 2024
2 checks passed

eternalmaha deleted the ma-rc-feat/delete-item branch September 22, 2024 02:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issue # 12: Deleting a shopping list item #36

Issue # 12: Deleting a shopping list item #36

eternalmaha commented Sep 20, 2024 •

edited

Loading

github-actions bot commented Sep 20, 2024 •

edited

Loading

adidalal Sep 20, 2024

RossaMania Sep 22, 2024

RossaMania Sep 22, 2024

eternalmaha Sep 22, 2024

eternalmaha Sep 22, 2024

RossaMania Sep 22, 2024

alex-andria left a comment

alex-andria Sep 21, 2024

RossaMania Sep 22, 2024

eternalmaha Sep 22, 2024

tannaurus Sep 21, 2024

RossaMania Sep 22, 2024

eternalmaha Sep 22, 2024

Issue # 12: Deleting a shopping list item #36

Issue # 12: Deleting a shopping list item #36

Conversation

eternalmaha commented Sep 20, 2024 • edited Loading

Description

Related Issue

Acceptance Criteria

Type of Changes

Updates

Testing Steps / QA Criteria

github-actions bot commented Sep 20, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alex-andria left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

eternalmaha commented Sep 20, 2024 •

edited

Loading

github-actions bot commented Sep 20, 2024 •

edited

Loading