US11 Filter the player list by position

[Frank-Schaeske]

Value Proposition

As a user I want to be able to filter the player list by position So that I can view my saved goalkeepers, defenders, midfielders or attackers separately ​

Description

Acceptance Criteria

• [x] Five radio buttons are visible
• [x] It is possible to choose all players and in this case all players are visible
• [x] It is possible to choose only goalkeepers and afterwards only goalkeepers are visible
• [x] It is possible to choose only defenders and afterwards only defenders are visible
• [x] It is possible to choose only midfielders and afterwards only midfielders are visible
• [x] It is possible to choose only attackers and afterwards only attackers are visible ​

Tasks

• [x] Create a feature branch
• [x] Create a new component PositionRadioButtons
• [x] Set up a state variable to hold the filtered position
• [x] Create a filter function
• [x] Render the data depending on the filter position

[CJAkkuec]

Create a new component PlayerFilteredByPosition

🤓

[Frank-Schaeske]

Thanks for your comment CJ! However, I'm unsure if the renaming really makes sense, since the component is actually the filter.

[CJAkkuec]

I see 🤔 I'm not sure where you are at right now in terms of your app architecture, but are you handling the filtering of players and a general player overview on different pages?

Either way, if PlayerFilterByPosition is the component that lets the user select the position to filter for, I'd probably even argue it should be PositionRadioButtons. Something like PlayerFilterByPosition would be a more apt name for a derived state variable. Although I'd probably go for something like this, maybe ...

const [position, setPosition] = useState("");

//fancy radio buttons component

const filteredPlayers = //fancy filter function

return (

{filteredPlayers.map(//fancy mapping)}

)