Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Challenge: The Player Detail Component

7:01 with Guil Hernandez and Beau Palmquist

In this challenge, you're going to use the skills learned in this course to add a new feature to the Scoreboard application, using React and Redux.

Download the challenge files

Challenge Steps

  • In the 'actiontypes/player.js' file, add and export a new action for SELECT_PLAYER
  • Define a reducer that will interpret the SELECT_PLAYER action and produce a new state for the playerDetail data
  • In 'reducers/player.js', in the ADD_PLAYER switch block, set the newly added player’s created value to the current date
  • Add a switch case for the new SELECT_PLAYER action type. You'll need to set the selectedPlayerIndex to the value passed in -- for example, with action.index.
  • In the UPDATE_PLAYER_SCORE switch case, set the player's updated value to the current date
  • In 'actions/player.js', create the action creator for the selectPlayer action. 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.
  • In the Scoreboard component, don't forget to update the mapStateToProps method to account for the selectedPlayerIndex and, in the render method, pull selectedPlayerIndex off this.props
  • Add a new bound action creator for the selectPlayer action creator
  • Use the index to pull out just the selectedPlayer from the players array if the selectedPlayerIndex is not -1 (a conditional would work great for this)
  • Pass the selectPlayer bound action creator to the player component and, in the return statement, the prop provided to PlayerDetail should be the selelectedPlayer object
  • In the new PlayerDetail component, use the data being passed via the selectedPlayer prop to display the name, score, created, and updated data, if the selectedPlayer prop is being passed. Otherwise, it should display the paragraph "Click on a player to see more details".
  • When you click on a player, it should display the details for that player in the PlayerDetail component. In the Player component, you'll devise a way to detect an onClick for a player that invokes the selectPlayer bound action creator
  • The function you write should provide the index of the player as an argument -- similar to the onClick for removePlayer

Don't forget to update your prop validation for selectedPlayerIndex in the Scoreboard component and selectPlayer the Player component, and make sure you also have prop validation on the selectedPlayer info coming into the new PlayerDetail component.

Using Redux for the simple scoreboard application was a great way of getting 0:00 comfortable with the basics of Redux. 0:03 Now mastering when to use Redux takes a lot more practice, 0:05 but we have to start with the basics. 0:09 So now it's your turn to use the skills, you learn in this course 0:11 to add a new feature to the scoreboard app using React and Redux. 0:14 Let's have a look at where you're going to build. 0:18 In this challenge, 0:20 you're going to add a player detail component to the scoreboard app. 0:21 I've already included some code to get you started so to start. 0:25 You'll need to download the project files for this challenge and 0:28 run N-P-N install to install all the dependencies. 0:30 I've posted the link to the files in the teacher's notes. 0:33 So the new player detail component should display a player's name, score, 0:36 the date when the player was added to the scoreboard, 0:40 as well as the date when the player score was updated. 0:43 And this information should appear down here in 0:45 the player detail component whenever a user clicks on a player in the scoreboard. 0:49 So for example when I click on Andrew, we see Andrew Chalkley, 0:54 score 20, created on November 9, 2016 and updated November 10, 2016. 0:59 Now if you update Andrew's score, you see the score and 1:05 the player detail component updated as well, and 1:10 the updated date changes to 11/15/2016, the current date. 1:13 And when you add a player to the score board and click on the new player, 1:19 you'll see the score, created date, and no updated value yet but 1:24 once you update the new player score it changes to the current date. 1:29 In the project files, I've already included a player detail component with 1:34 some of the code to get you started, so this is a pure component that's going 1:38 to provide the currently selected players information. 1:43 And over in the producer's player digest file, you'll notice that 1:46 the initial state is a little different, it has some extra data in it. 1:50 So the initial state constant is now an object containing players array and 1:55 in the player's array the player objects have new data for 2:00 the created and updated date. 2:05 That will display in the player detail component and 2:07 I just added some placeholder dates for the initial state. 2:12 Then below the players array, I added a separate field for 2:17 tracking the currently selected player index you see. 2:21 You'll need to use the selected player index to pass the correct player or 2:25 the player that was clicked to the player detail component. 2:30 Then, you'll use what you learn about redux like an action type reducer and 2:34 bound action creator to handle the selected player data. 2:38 And display it in the player detail component so now, let's walk through 2:42 the steps you'll need to take in order to implement this feature. 2:46 I've also posted the steps in the teacher's notes, 2:49 so first, in the action types player.js file. 2:52 You'll need to add and export a new action for 2:56 select the player just like you did for these three. 2:59 Then you'll define a reducer that will interpret the select player action and 3:03 produce a new state for the player detail data. 3:07 So back in the reducer file down in the add player switch block you'll need to set 3:10 the newly added players created value to the current date with the javascript here. 3:16 Then you'll add a new switch case for the new select Select player action type and 3:22 in this new block you'll need to set the selected player index 3:27 to the value being passed in. 3:32 So for example you can do it with action.index. 3:34 And finally, in the UPDATE_PLAYER_SCORE switch case, 3:37 you also need to set the player's updated value to the current date and 3:41 you can do things a little different if you like. 3:45 So for example, I'm just displaying a date for the Created and 3:48 Updated values but you could also display a time for these. 3:52 Keep in mind that since the initial player data is now being defined as an object, 3:56 containing a player's array. 4:01 And a selected player index field outside that array, you'll need to make a few 4:03 changes to the way you produce a new state in the reducer file switch block. 4:07 So for example, for the add player, remove player and update player score cases 4:12 you'll want to update just the players array data when returning a new state. 4:18 So you'll make a copy of the existing state for both players and 4:22 selected player index and change just the player's data. 4:26 Next over in the actionsPlayer.js file you'll create the action creator for 4:30 the select player action just like you did earlier. 4:35 So the new action creator should take an index argument and 4:39 generate an action object with a type of select player. 4:43 And provide the index as the action metadata and over in scoreboard.js 4:47 Don't forget to update the map state to props method to account for 4:52 the selected player index, and up in the render method. 4:57 You're going to wanna pull selected player index off this stop props, 5:02 so you'll add that here. 5:07 Then right below you'll add a new bound action creator for 5:09 the select player action creator so just like these three here. 5:13 And then we need to write some javascript here that uses 5:17 the index to pull out just the selected player 5:21 from the player's rate if the selected player index is not negative one. 5:24 So a javascript conditional would work great for that. 5:29 Then, right below you'll pass the select player bound action creator 5:32 to the player component, and the return statement the prop 5:37 provided to the playerDetail component should be the selected player object. 5:41 All right, so back in the new player detail component you're going to use 5:47 the data being passed via the selected player prop to pass the name score and 5:52 the created and updated data, if the selected player prop is being passed. 6:00 Otherwise, it should display the paragraph click on a player to see more details and 6:05 again, when you click on a player, it should display the details from that 6:09 player down here in the player detail component. 6:14 So over in the player digest component, you'll devise a way to detect 6:16 an on click for a player that invokes the select player bound action creator. 6:22 And that function you write should provide the index of the player as an argument, so 6:27 it's going to be very similar to the On Click for remove player. 6:32 And finally, don't forget to update your prop validation for 6:36 select player and scoreboard RTS and the player component. 6:40 And make sure you also have prop validation on the player info coming into 6:44 the new player detail component. 6:48 This extension to the scoreboard app is a great example of a real purpose use case 6:51 for redux. 6:55 So good luck, have fun, and in the next video, 6:56 I'll walk you through the methods I used to implement this feature. 6:58

You need to sign up for Treehouse in order to download course files.

Sign up