Challenge #2: OrdersList Time Format

[bchehraz]

Changes

List Changes Introduced by this PR

1. Replaces current method of outputting time via getHours(), getMinutes(), getSeconds() methods to just use toLocaleTimeString(...) instead.

Purpose

Describe the problem or feature in addition to a link to the issues.

• Link to issue: Bug: Order Time does not format time correctly Shift3/react-challenge-project-jan-2022#2
• The issue was the current display of time simply used getHours(), getMinutes() and getSeconds() which accurately return the number of hours, minutes, and seconds for that given Date object. However, it was not meant for display purposes and requires modification to display correctly.

Approach

How does this change address the problem?

• I simply added .toLocaleTimeString('en-US', { hour12: false }) to convert the Date object to hh:mm:ss. It was not specified whether this project was meant to be used for any locale other than en-US, so I made the decision to use en-US and converted to 24-hour time to meet the specified hh:mm:ss format.
• Alternatively I could have added an npm package like moment.js; however, this would add additional functionality that would exceed the needs of the task and scope of the project OR I could have added a helper function to manually convert the time string to the correct readable format. Using Date.toLocaleTimeString seems to be the best fit here.

Pre-Testing TODOs

What needs to be done before testing

• Make sure there is at least 1 order stored in the database before testing, with a hours, minutes, or seconds value less than 10.

Testing Steps

How do the users test this change?

• Simply visit the /view-orders page to see that the time value is displaying correctly.

Learning

Describe the research stage

• I simply looked up what methods the Date object has and determined toLocaleTimeString would best fit the needs of the task.

Links to blog posts, patterns, libraries or addons used to solve this problem

• JavaScript Date: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
• toLocaleTimeString: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString

Closes Shift3#2