View item details

[sar-mko]

Description

• In ListItem created a div to hold item details
• Passed in dateNextPurchased and totalPurchases from the item object
• displayed the details in a list
• created a toggle button to switch between open and closed states

Ideally, we can use this as a base for more stylistic choices coming up.

Related Issue

closes #37 (#21)

Acceptance Criteria

• User has the option to view details on an item from their list
• User can see dateLastPurchased, dateNextPurchase, and totalPurchases pertaining to a single item.
• Data is accurate to the specific item

Type of Changes

enhancement

Updates

After

Testing Steps / QA Criteria

• View list of items on List and there should be a View Purchase Details button
• Clicking button will open and should display details
• Open Firebase to list info see if dateLastPurchased, dateNextPurchase, and totalPurchases are the same as whats displayed
• Clicking button should toggle between displaying and hiding the div

[github-actions]

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

https://tcl-76-smart-shopping-list--pr40-sm-view-item-details-urkzd2dq.web.app

_{(expires Wed, 02 Oct 2024 18:37:00 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 512b1a88be8ae05fd3e727b99332819df760271d}

[arandel1]

Functionality works great!

nit-pick/non-blocking: To set us up for adding CSS later, can we make the list items as <p> instead of <h2>? They just look a little big.

nit-pick/non-blocking: In the View Details section, can we add a space between the three stats? They currently look like this: "Last Purchase:Fri Sep 20 2024" and I'm wanting a space after the colon: "Last Purchase: Fri Sep 20 2024".

[EmmaBin]

I tested by adding a new item and making purchases, and all data was correctly reflected in the div.

[sar-mko]

Functionality works great!

nit-pick/non-blocking: To set us up for adding CSS later, can we make the list items as <p> instead of <h2>? They just look a little big.

nit-pick/non-blocking: In the View Details section, can we add a space between the three stats? They currently look like this: "Last Purchase:Fri Sep 20 2024" and I'm wanting a space after the colon: "Last Purchase: Fri Sep 20 2024".

Hi, I added fontSize inline for now and added a span around the date to get the spacing.

[MarcosPerez16]

Tested and it everything is working on my end.