Using Redux for the simple scoreboard application was a great way of getting

comfortable with the basics of Redux.

Now mastering when to use Redux takes a lot more practice,

but we have to start with the basics.

So now it's your turn to use the skills, you learn in this course

to add a new feature to the scoreboard app using React and Redux.

Let's have a look at where you're going to build.

In this challenge,

you're going to add a player detail component to the scoreboard app.

I've already included some code to get you started so to start.

You'll need to download the project files for this challenge and

run N-P-N install to install all the dependencies.

I've posted the link to the files in the teacher's notes.

So the new player detail component should display a player's name, score,

the date when the player was added to the scoreboard,

as well as the date when the player score was updated.

And this information should appear down here in

the player detail component whenever a user clicks on a player in the scoreboard.

So for example when I click on Andrew, we see Andrew Chalkley,

score 20, created on November 9, 2016 and updated November 10, 2016.

Now if you update Andrew's score, you see the score and

the player detail component updated as well, and

the updated date changes to 11/15/2016, the current date.

And when you add a player to the score board and click on the new player,

you'll see the score, created date, and no updated value yet but

once you update the new player score it changes to the current date.

In the project files, I've already included a player detail component with

some of the code to get you started, so this is a pure component that's going

to provide the currently selected players information.

And over in the producer's player digest file, you'll notice that

the initial state is a little different, it has some extra data in it.

So the initial state constant is now an object containing players array and

in the player's array the player objects have new data for

the created and updated date.

That will display in the player detail component and

I just added some placeholder dates for the initial state.

Then below the players array, I added a separate field for

tracking the currently selected player index you see.

You'll need to use the selected player index to pass the correct player or

the player that was clicked to the player detail component.

Then, you'll use what you learn about redux like an action type reducer and

bound action creator to handle the selected player data.

And display it in the player detail component so now, let's walk through

the steps you'll need to take in order to implement this feature.

I've also posted the steps in the teacher's notes,

so first, in the action types player.js file.

You'll need to add and export a new action for

select the player just like you did for these three.

Then you'll define a reducer that will interpret the select player action and

produce a new state for the player detail data.

So back in the reducer file down in the add player switch block you'll need to set

the newly added players created value to the current date with the javascript here.

Then you'll add a new switch case for the new select Select player action type and

in this new block you'll need to set the selected player index

to the value being passed in.

So for example you can do it with action.index.

And finally, in the UPDATE_PLAYER_SCORE switch case,

you also need to set the player's updated value to the current date and

you can do things a little different if you like.

So for example, I'm just displaying a date for the Created and

Updated values but you could also display a time for these.

Keep in mind that since the initial player data is now being defined as an object,

containing a player's array.

And a selected player index field outside that array, you'll need to make a few

changes to the way you produce a new state in the reducer file switch block.

So for example, for the add player, remove player and update player score cases

you'll want to update just the players array data when returning a new state.

So you'll make a copy of the existing state for both players and

selected player index and change just the player's data.

Next over in the actionsPlayer.js file you'll create the action creator for

the select player action just like you did earlier.

So the new action creator should take an index argument and

generate an action object with a type of select player.

And provide the index as the action metadata and over in scoreboard.js

Don't forget to update the map state to props method to account for

the selected player index, and up in the render method.

You're going to wanna pull selected player index off this stop props,

so you'll add that here.

Then right below you'll add a new bound action creator for

the select player action creator so just like these three here.

And then we need to write some javascript here that uses

the index to pull out just the selected player

from the player's rate if the selected player index is not negative one.

So a javascript conditional would work great for that.

Then, right below you'll pass the select player bound action creator

to the player component, and the return statement the prop

provided to the playerDetail component should be the selected player object.

All right, so back in the new player detail component you're going to use

the data being passed via the selected player prop to pass the name score and

the created and updated data, if the selected player prop is being passed.

Otherwise, it should display the paragraph click on a player to see more details and

again, when you click on a player, it should display the details from that

player down here in the player detail component.

So over in the player digest component, you'll devise a way to detect

an on click for a player that invokes the select player bound action creator.

And that function you write should provide the index of the player as an argument, so

it's going to be very similar to the On Click for remove player.

And finally, don't forget to update your prop validation for

select player and scoreboard RTS and the player component.

And make sure you also have prop validation on the player info coming into

the new player detail component.

This extension to the scoreboard app is a great example of a real purpose use case

for redux.

So good luck, have fun, and in the next video,

I'll walk you through the methods I used to implement this feature.