[JH] Display next purchased date for each item

[hsiangj]

Description

This code displays next purchased date for each item in a shopping list. For brevity, next purchased date is currently shown as "Buy Next." The Firestore timestamp is first converted to a JavaScript date object, then formatted to a more user-friendly version of the "date next purchased" using a combination of string and array methods.

Related Issue

Closes #33
Sub-issue of #14

Acceptance Criteria

• When an item is shown on the page, a date is displayed using the dateNextPurchased property.

Type of Changes

Use one or more labels to help your team understand the nature of the change(s) you’re proposing. E.g., bug fix or enhancement are common ones.

Updates

Before

After

Testing Steps / QA Criteria

After sign-in, navigate to a list with items. Each item should have a "Buy Next" date displayed below it.

[github-actions]

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

https://tcl-69-smart-shopping-list--pr38-jh-display-date-for-ryq0ssal.web.app

_{(expires Tue, 26 Mar 2024 22:56:13 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 93172cc46147b7d365c2b1b8239b61e2efb07a80}

[hsiangj]

I played around with displaying date last purchased as well but it looked cluttered and I'm not sure if it's as pertinent as date next purchased at this point. I did see how some of the past cohorts incorporated an additional information button for each item to display dates and number of purchases - inspo if we decide to expand on the info shown.

[krsnamara]

Looks great!

[piecanoe]

Nice job!