Ia ks checkbox purchase

[ksiman14]

Description

• Created new SingleItem component with checkbox for each item in ItemList
• Refactored ItemList component so it now displays SingleItem component for each item, not an unordered list
• Added new field to Item in Firestore isPurchased for if an item has been purchased
• Checking checkbox changes isPurchased to true and adds current date as lastPurchasedDate in Firestore (and opposite if uncheck)
• When SingleItem renders, if lastPurchasedDate is greater than 24 hours ago, isPurchased changes to false and checkbox clears

Related Issue

closes #8

Acceptance Criteria

• [x] User is able to tap a checkbox or similar UI element to mark an item in the list as purchased
• [x] Item should be shown as checked for 24 hours after the purchase is made (i.e. we assume the user does not need to buy the item again for at least 1 day)

Type of Changes

	Type
	:bug: Bug fix
✓	:sparkles: New feature
✓	:hammer: Refactoring
	:100: Add tests
	:link: Update dependencies
	:scroll: Docs

Updates

Before

After

Testing Steps / QA Criteria

• Pull down this branch (ia-ks-checkbox-purchase)
• npm start
• Add items to your list
• Click checkbox to set items as purchased

To test 24 hour clearing:

• Find item in Firestore by filtering by name and token
• Subtract at least 24 60 60 * 1000 (milliseconds in 24 hours) from lastPurchaseDate and save in Firestore
• Watch checkbox go to unchecked!

[github-actions[bot]]

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

https://tcl-28-shopping-list--pr29-ia-ks-checkbox-purch-sva05n88.web.app

_{(expires Thu, 12 Aug 2021 19:19:21 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

[ksiman14]

Wow, I personally find calculating dates and times intimidating too, so great job to both of you for tackling this! Everything works on my end, and isPurchased was changed to false and the box unchecked itself after I manually changed the lastPurchasedDate. Love the use for the new component too.

As a side note, I did get a linter warning for the useEffect on the SingleItem component, because we used async in its callback so I think it might return a promise? Usually, I would create a separate async function and invoke it, but I don't know how much of a difference it makes!

Good point on the async within useEffect, I am going to modify and push up changes now.

[ksiman14]

Hey nice job! The only comment I have is that the checkbox will only update if you either navigate away from or refresh the page, so staying on the page won't trigger a refresh, which is probably an edge case. If you did want to do that, you can use something like setInterval to check the expiration date every 30 seconds so that users would get immediate feedback about their items.

This is a great idea! I'm including this now in a new commit.