Songs - Update

[stephencastaneda]

User Story

As a user, when the edit song page loads, I should able to edit songs in the list

AC

WHEN looking at the songs page THEN I click on the edit song button AND I am taken to the edit song page AND I should be able to edit a song

Dev Notes

on Song page and SingleSong page

• add a link that takes you to editSong page

on editSong page

• in state create an object that is set to an empty string with the keys songTitle albumTitle artist releaseYear and albumImage

• create componentDidMount()

• on mount store editId in this.props.match.params.songId;

• .then should return the response

• store song in response.data

• setState should be take new values of song.songTitle song.albumTitle song.artist song.releaseYear and song.albumImage

• create functions to reset the setState to e.target.value

• the functions should be titleChange albumChange artistChange releaseYearChange and albumImageChange

• updateSong should store { songId } in this.props.match.params

• it should get songTitle albumTitle artist releaseYear and albumImage from this.state

• it should then build an updateSong object with the following keys titleChange albumChange artistChange releaseYearChange and albumImageChange

• then it should call putSong from itemsData and pass in songId and updatedSong

• the .then should use this.props.history.push to take the user back to /songs page

• the.catch should console.error unable to save song

• the render() should retrieve songTitle albumTitle artist releaseYear and albumImage from this.state

• the return should build a form with the following inputs <input type="text" className="form-control" id="song-title" value={songTitle} onChange={this.titleChange} />

• the bottom of the form should include a button

• the button should have an onClick function that calls this.updateSong