Delete Shopping List Items #29

bethmelmtv · 2023-05-09T23:35:55Z

Description

Before this PR, users were not able to delete an item from their shopping list. This PR adds functionality to the application that allows users to delete individual items from their shopping list. This was accomplished by adding a Delete button that is rendered in the List view for each item in the list. If a user chooses to delete an item, they will be prompted with a message asking them to confirm their choice to delete the item. If the user selects Yes, the item is then deleted on the List view page and deleted from the firestore database. If the user decides to change their mind , the user can select No option, and the item will not be deleted.

Related Issue

Closes #11

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

	Type
	🐛 Bug fix
✓	✨ New feature
	🔨 Refactoring
	💯 Add tests
	🔗 Update dependencies
	📜 Docs

Updates

Before

Before this change, the List view UI had no way of allowing the user to delete items from their list that they no longer want to buy.

After

After this change, a delete button appears next to each list item. Clicking it prompts the user to confirm that they want to remove the item. Clicking "Yes" removes the item from the list. Clicking "No" leaves the item as is.

screen-capture.1.webm

Testing Steps / QA Criteria

Create a list from the Home view and start adding items to your list. Or type in the token id to an existing list.
In the list view a delete button should appear next to each item.
Click the delete button on a desired item. A windows prompt will appear that asks to confirm the deletion. Click 'Yes.' The alert box should close, and your item should disappear from the list.
Check that the item has disappeared from the data set in state in your browser developer tools, or check on the Firebase console that your item has been removed.
Click on another item's delete button. This time click 'No' when the prompt appears. This time the alert box should close, and nothing should change on your list.

github-actions · 2023-05-09T23:36:54Z

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

https://tcl-57-smart-shopping-list--pr29-ap-bm-delete-shoppin-q6pqg26m.web.app

_{(expires Sun, 21 May 2023 23:09:50 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: ad3eb6c34c2ec5986fcc218178df5985eb9c9ffb}

…andleyesclick is not working

emilysellers · 2023-05-12T22:48:47Z

src/api/firebase.js

-	 * this function must accept!
-	 */
+/**
+ * Deletes an individual item from the user's shopping list.


Nice use of JSDoc here!

emilysellers

Nice work, Beth and Amy! Everything is working as expected on my end.

jongranados

Feature works exactly as expected. Super clean implementation; code is easy to read. I'm a fan of your decision to go with a modal over an alert. Great work! 🎉

jongranados · 2023-05-13T01:33:51Z

src/components/ListItem.jsx

+	const dialogRef = useRef();
+
+	function confirmDelete() {
+		dialogRef.current.showModal();


Mind blown! Had no idea there was a built-in method that handles this sort of behavior so cleanly! Loved your original alert implementation but I dig this even more!

Agree with everyone else here - this is a super cool!

jongranados · 2023-05-13T01:38:29Z

src/components/ListItem.jsx

+			<button type="button" onClick={confirmDelete}>
+				Delete
+			</button>
+			<dialog ref={dialogRef}>


Awesome use-case for a ref.

mxmason

Congrats on being the first TCL team (to my knowledge) to implement a native Dialog element in your shopping list! Great work figuring out this relatively new, tricky DOM API, and implementing a ref to boot!

mxmason · 2023-05-13T08:33:21Z

src/components/ListItem.jsx

 }) {
+	const dialogRef = useRef();
+
+	function confirmDelete() {


🔍 This function's name is a little ambiguous. The modal asks our user to confirm their delete action, yes, but confirmDelete also kind of reads like "we have confirmed the delete; let's go ahead and do it." I think we can call this openModal, because that's what it does.

mxmason · 2023-05-13T08:44:14Z

src/components/ListItem.jsx

+			<dialog ref={dialogRef}>
+				<p>Are you sure you want to remove "{name}" from your list?</p>
+				<button onClick={handleYesClick}>Yes</button>
+				<button onClick={handleNoClick}>No</button>
+			</dialog>


🔍 Excellent job implementing this Dialog element! We have an opportunity to clean it up, as well. Right now, we render a dialog for each individual ListItem. Technically, this is fine. It's unlikely to cause any problems (that I'm aware of), but it also doesn't need to be this way. We could, in theory, have exactly one dialog element, and reuse it for every list item.

My only guess is that it needs to be its own component?

danainjax · 2023-05-13T14:08:57Z

Congrats on being the first TCL team (to my knowledge) to implement a native Dialog element in your shopping list! Great work figuring out this relatively new, tricky DOM API, and implementing a ref to boot!

🎉😁👍🏻 Awesome job, team!

danainjax

Awesome job. Dialog implementation took it to the next level. Good work.

djtaylor8

Fantastic work, @Amy-Pr and @bethmelmtv! To EJ's point, curious to see how this could be refactored, but this implementation is 🔥!

djtaylor8 · 2023-05-13T16:46:20Z

src/components/ListItem.jsx

+	const dialogRef = useRef();
+
+	function confirmDelete() {
+		dialogRef.current.showModal();


Agree with everyone else here - this is a super cool!

Amy-Pr added 8 commits May 8, 2023 16:39

complete pseudocode steps in ListItem component

6b63849

add more pseudocode to ListItem component

7201b81

fill in deleteItem function with firestore method

e3b4cce

progress on deleteItemFromList handler

f9f8251

fix firebase function and deleteItemFromList handler

7cc0144

remove unused parameter definition from deleteItem and comments

5e00a25

refactor onClick callback in button element

e1dd381

remove pseudocode and add comments to firebase function

c462946

Amy-Pr and others added 5 commits May 9, 2023 16:42

change confirm message

008532e

progress on dialog modal

71bf31f

added handleYesClick and handleNoClick and buttons in listItem.jsx, h…

f5ca9b2

…andleyesclick is not working

complete dialog confirm delete modal

5c9162f

remove commented code

12f8003

Amy-Pr marked this pull request as ready for review May 12, 2023 18:11

Amy-Pr requested review from jongranados, danainjax, emilysellers, djtaylor8 and mxmason May 12, 2023 18:11

emilysellers reviewed May 12, 2023

View reviewed changes

emilysellers approved these changes May 12, 2023

View reviewed changes

jongranados approved these changes May 13, 2023

View reviewed changes

mxmason approved these changes May 13, 2023

View reviewed changes

danainjax approved these changes May 13, 2023

View reviewed changes

djtaylor8 approved these changes May 13, 2023

View reviewed changes

Amy-Pr added 3 commits May 14, 2023 10:01

change function name to openModal

4a892e5

refactor to single instance of dialog

72a9284

clean up comments and rename yes and no click handlers

a472ba7

add to-do about dialog message

e80ed42

bethmelmtv merged commit 87575e2 into main May 15, 2023
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Delete Shopping List Items #29

Delete Shopping List Items #29

bethmelmtv commented May 9, 2023 •

edited by Amy-Pr

github-actions bot commented May 9, 2023 •

edited

emilysellers May 12, 2023

emilysellers left a comment

jongranados left a comment

jongranados May 13, 2023

djtaylor8 May 13, 2023

jongranados May 13, 2023

mxmason left a comment

mxmason May 13, 2023

danainjax May 13, 2023

mxmason May 13, 2023

Amy-Pr May 14, 2023

danainjax commented May 13, 2023

danainjax left a comment

djtaylor8 left a comment

djtaylor8 May 13, 2023

Delete Shopping List Items #29

Delete Shopping List Items #29

Conversation

bethmelmtv commented May 9, 2023 • edited by Amy-Pr

Description

Related Issue

Acceptance Criteria

Type of Changes

Updates

Before

After

Testing Steps / QA Criteria

github-actions bot commented May 9, 2023 • edited

Choose a reason for hiding this comment

emilysellers left a comment

Choose a reason for hiding this comment

jongranados 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

mxmason 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

danainjax commented May 13, 2023

danainjax left a comment

Choose a reason for hiding this comment

djtaylor8 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bethmelmtv commented May 9, 2023 •

edited by Amy-Pr

github-actions bot commented May 9, 2023 •

edited