Resolves Issue #13 (#35) - View Purchase Details

[mjhcodes]

Issue: #35

Tasks:

The main purpose of the issue was to create a way for the user to view the details of their purchase to better understand their purchase patterns. We opted to use a modal to display the item details, which is opened by clicking a button, which is found alongside each item on the list.

Actions:

• Imported the modal, which had been created as part of a previous issue
• Created a toggle state and function for opening and closing the modal
• Created an initialized state for the modal details, as this is rendered at load time and would return an error otherwise.
• Created the hideDetails and showDetails functions, with the latter also inserting the details of the item into state
• Created the handleDetails function, which displays the four data points requested as part of the issue inside of the modal, if all four are available; the name and number of purchases are always displayed at a minimum
• Created a function to convert the seconds returned by the date purchased value into a more readable date format and incorporated this inside the modal
• Created a button to allow the opening of the modal when clicked
• Placed the modal inside the return, to be rendered if the isViewDetailOpen value is set to true

Notes:

PR appears to mistakenly also include the changes made as part of a previous issue

Screenshots:

EXAMPLE 1 - VIEW DETAILS BUTTON

EXAMPLE 2 - LIMITED DETAILS MODAL

EXAMPLE 3 - FULL DETAILS MODAL

[rmorabia]

LGTM.

[rmorabia]

Remove unnecessary comments!

[RachaelSkye]

LOL that was mine and I'm so sorry I keep forgetting about it and it never dies

[jcwesley93]

I think that everything here looks good code wise. This is probably my favorite PR description thus far! I liked your use of screenshots and the detailed description. I was able to navigate the code changes easily because of this. Great work!

[jcwesley93]

I really like that you all used Modal - I think it makes for a cleaner UI experience.

[RachaelSkye]

Everything looks great and I definitely like using the modal to view details. Also, this has definitely been a lesson in PR requests! Thanks for being so thorough!

[msholty-fd]

Excellent! 🏅