REMOVE_PLAYER and selectedPlayerIndex bug, with solution

Because this project uses index to track players instead of some uid, a bug occurs when the user removes a player whose index is <= the current selectedPlayerIndex. Reproduce it:

1. Open the app
2. Click on the last player
3. Observe the player's details correctly displayed in the PlayerDetail component at bottom
4. Click the "X" next to the last player to remove that player.
5. Observe error in console: Uncaught TypeError: Cannot read property 'name' of undefined

Also:

1. Open the app
2. Click on the first player
3. Observe the player's details correctly displayed in the PlayerDetail component at bottom
4. Click the "X" next to the first player to remove that player.
5. Observe that the PlayerDetail component now unexpectedly shows the details for the second player, even though we never clicked on that player.

This is because the REMOVE_PLAYER reducer does not return an updated selectedPlayerIndex, even though the landscape of the indexes has been changed by removing a player.

In a more robust app the appropriate way to handle this would be to use some UID instead of indexes, but for the purposes of this project, a simple bugfix would be to use a bit of logic to return an updated selectedPlayerIndex in the REMOVE_PLAYER reducer like so:

case PlayerActionTypes.REMOVE_PLAYER:
  return {
    ...state,
    players: [
      ...state.players.slice(0, action.index),
      ...state.players.slice(action.index + 1)
    ],
    selectedPlayerIndex: (state.selectedPlayerIndex === action.index ? -1 : (state.selectedPlayerIndex > action.index ? state.selectedPlayerIndex - 1 : state.selectedPlayerIndex)),
  };

This snippet ensures that if the user removes the currently selected player selectedPlayerIndex will become -1 (thereby hiding the PlayerDetail component), and if the user removes a player with an index that is less than the index of the currently selected player selectedPlayerIndex will be adjusted down by one to accommodate for the shift in indexes.