Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Building Applications with React and Redux Putting it all Together Solution: The Player Detail Component

Formatting date strings

Guil Hernandez, one thing that I did differently is formatting the date strings. Firstly, because I'm from Australia and I don't like the US date format, and secondly, because using the getMonth() etc methods are a drag!

Here's mine:

let now = new Date();
now = `${now.toLocaleDateString('en-AU')} ${now.toLocaleTimeString('en-AU')}`;

Here are the docs for anyone who is interested in these Date methods:

You can also specify some additional options to those methods to get things like the name of the month in a specific locale, etc.

Should be handy for any other international students here at Treehouse! :)

5 Answers

Evan Goodwin
PLUS
Evan Goodwin
Courses Plus Student 22,260 Points

I have two issues.

1) You can't remove players anymore because the link to the red X is in the 'player-name' div. Anywhere you click in the 'player-name' div triggers selectPlayer and shows the PlayerDetail.

2) I tried adding a date/time stamp for the 'updated' and 'created' fields. If you keep the date/time generator outside of the Player function, the time stays stuck at the time the page first loads and doesn't change when you update a score. I moved the date/stamp (following Mr. Simmons above) inside the ADD_PLAYER case and UPDATE_PLAYER_SCORE cases as so:

case PlayerActionTypes.ADD_PLAYER: {

        var date = new Date();
        var fullDate = date.toLocaleDateString();
        var fullTime = date.toLocaleTimeString();

case PlayerActionTypes.UPDATE_PLAYER_SCORE: { var date = new Date(); var fullDate = date.toLocaleDateString(); var fullTime = date.toLocaleTimeString();

However, this isn't very DRY. How do you generate the date/time stamp in a single place then just call it inside the two cases?

Because the cross/link for deleting players is in the div, the click event will 'bubble' up the DOM tree. You can call event.preventDefault() or event.stopPropogation() to prevent this (need to have event as a parameter).

As for the dates, you can initialize and assign a value to the date variable inside the reducer function, that way it will be set for both the ADD_PLAYER and UPDATE_PLAYER_SCORE actions.

Dan Avramescu
Dan Avramescu
11,286 Points

I saw the bubbling bug too, and now I see your question :) But event.preventDefault() won't help here. https://teamtreehouse.com/community/i-think-that-here-is-a-small-application-bug

No, Date.now() will return the number of milliseconds elapsed since 1 January 1970 00:00:00 UTC (the 'UNIX Epoch') as an integer.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now

You want to use new Date() because it creates a new Date object using its constructor function, and it's that object that contains all the date methods.

Anthony Albertorio
Anthony Albertorio
22,587 Points

I used new Date().toLocaleDateString(). You can pass in your country's code and it will format to it. The method formats to US by default. The example from the MDN docs are as follows:

...
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };

console.log(event.toLocaleDateString('de-DE', options));
// expected output: Donnerstag, 20. Dezember 2012
...

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

My code looks like:

...
export default function Player(state=initialState, action) {
  switch(action.type) {
    case PlayerActionTypes.ADD_PLAYER:
            const addedPlayer = [ ...state.players, {
                    name: action.name,
                    score: 0,
                    created: new Date().toLocaleDateString(),
                    updated: new Date().toLocaleDateString()
                }];

            return {
                ...state,
                players: addedPlayer
            };
...