Constructor
# <MusicSelection choirId choirName isMobileBrowser history doesUserGetFeedback match showAlert musicSelected setUserGetsFeedback />
PropTypes:
| Name | Type | Required | Description | Default |
|---|---|---|---|---|
choirId |
string | Yes | The id of the selected choir | |
choirName |
string | Yes | The name of the selected choir | |
isMobileBrowser |
bool | Yes | Indicates if the browser is a mobile browser | |
history |
object | Yes | React Router history object. This is provided by the withRouter function. | |
doesUserGetFeedback |
bool | No | Indicates if the user gets feedback | |
match |
object | Yes | React Router match object. This is provided by the withRouter function. | |
showAlert |
func | Yes | Shows an alert | |
musicSelected |
func | Yes | Updates Redux with music data | |
setUserGetsFeedback |
func | Yes | Sets if the user gets feedback |
Extends
- Component
Members
# state
MusicSelection component state
Properties:
| Name | Type | Description |
|---|---|---|
isLoading |
boolean | Indicates if the component is in a loading state |
musicList |
array | An array of sheet music associated with the selected choir |
Methods
# static mapDispatchToProps(dispatch) → {object}
Passes certain Redux actions to the MusicSelection component as props.
This function is used only by the react-redux connect function.
Parameters:
| Name | Type | Description |
|---|---|---|
dispatch |
function | The react-redux dispatch function |
Redux actions used in the MusicSelection component
object
# static mapStateToProps(state) → {object}
Gets the current state from Redux and passes parts of it to the MusicSelection component as props.
This function is used only by the react-redux connect function.
Parameters:
| Name | Type | Description |
|---|---|---|
state |
object | The Redux state |
Redux state properties used in the MusicSelection component
object
# componentDidMount()
Sets _isMounted to true
Gets the list of music
# componentWillUnmount()
Sets _isMounted to false
# getMusicCards() → {array}
Gets an array of MusicCard components
An array of MusicCard components
array
# getMusicList()
Gets the list of music associated with the selected choir.
Updates state with the music list.
# render()
Renders the MusicSelection component
# showMobileBrowserAlert()
Shows an alert indicating that the user cannot access the selected page on a mobile browser
# viewPerformanceClickedHandler(id)
If the browser is not a mobile browser,
(1) Updates Redux with the selected piece of music, and
(2) Routes to the music performance page
Parameters:
| Name | Type | Description |
|---|---|---|
id |
string | The id of the selected piece of music |
# viewSongClickedHandler(id)
If the browser is not a mobile browser,
(1) Updates Redux with the selected piece of music, and
(2) Routes to the practice music page
Parameters:
| Name | Type | Description |
|---|---|---|
id |
string | The id of the selected piece of music |