Issue #8 - Mark an item on my shopping list as purchased

[apdsrocha]

Description

This PR updates the List view which was previously displaying the information straight from the JSON file. The list items are now showing individual list items with a checkbox that can be used to mark purchased items.

Related Issue

closes #9

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

https://user-images.githubusercontent.com/47455758/116334400-c2cdc700-a79a-11eb-8571-0fd94d637b0f.mp4

After

https://user-images.githubusercontent.com/47455758/116334417-ca8d6b80-a79a-11eb-8208-274f98e64c55.mp4

Testing Steps / QA Criteria

1. run git checkout jc-ar-mark-items-purchased
2. run npm install
3. run npm start
4. If you need to enter a token, you can use sire agnew dutch
5. If a checkbox is checked blue already, that means it was marked purchased less than 24 hours prior. Check any boxes that are unchecked, and uncheck any boxes that are checked. Hit refresh and they will each maintain their checked or unchecked stats.
6. If you add a new item, you will see that the checkbox is initially unchecked.

Notes

• I feel great about how we completed the AC!
• One thing that was not clear in the AC was how to handle if the user wants the item unchecked less than 24 hours.
  • We decided to allow the user to uncheck a checkbox that is still less than 24 hours old. What if they accidentally marked it as purchased? Or what if they realize they need MORE milk for breakfast tomorrow?
  • So when the item is marked as purchased, the checkbox remains checked for 24 hours, BUT if the user unchecks it, we update Firestore with last_purchased: null again.
• If I'm being honest, I initially over-complicated the issue, but then I found some incredibly simple solutions for functionality I thought was going to be difficult! For example:

function compareTimeStamps(lastPurchased) {
  const currentElapsedMilliseconds = Date.now();
  const millisecondsInOneDay = 86400000;
  return currentElapsedMilliseconds - lastPurchased < millisecondsInOneDay;
}
...
<ul>
  {listItem.docs.map((doc) => (
    <div className="checkbox-wrapper">
      <input
        type="checkbox"
        defaultChecked={
          compareTimeStamps(doc.data().last_purchased) ? true : false
         }
         onClick={(e) => markItemPurchased(e, doc.id)}
       />
      <li key={doc.id}>{doc.data().item_name}</li>
    </div>
  ))}
</ul>

• The defaultChecked property for an <input type="checkbox" /> is so simple and elegant!
• We created a function compareTimeStamps(lastPurchased) that we call inside the defaultChecked property. We pass in the doc.data().last_purchased to compareTimeStamps(lastPurchased) and that checks if the .last_purchased property is less than 24 hours (or 86,400,00 milliseconds) from the current moment the List.js component mounts, const currentElapsedMilliseconds = Date.now(). This returns to us a true or false boolean that dictates whether the checkbox is checked or not, even on page reload.

Updates

• After our mid-week meeting, we decided NOT to send a last_purchased: null back to Firestore when an item is unchecked. We will have decisions to make in a later story, issue 10, where we decide how to keep track of multiple timestamps to be able to compare and calculate average purchase frequency.

That said, I removed lines 16-19:

} else {
  db.collection(props.token).doc(id).update({
    last_purchased: null,
  });

[github-actions[bot]]

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

https://tcl-23-shopping-list--pr22-jc-ar-mark-items-pur-jmjj22gz.web.app

_{(expires Sun, 09 May 2021 17:19:22 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

[jamesncox]

Ready for merge approval!