As a user, when the songs page loads, I should see all the songs.
AC
WHEN looking at the songs page
THEN I should see a list of all the songs
Dev Notes
STEP 1
in Songs.js create an empty array in state called songs.
create a getSongs function
getSongs should store the uid in a variable called uid and should get the uid by the getUid function crated in authData
getSongs should next call the getAllSongs functino from the SongsData file
.then should reset this.setState to the new songs object
.catch should conole.error unable to get songs on failure
call the componentDidMount() and mount this.getScats function
STEP 2
render() should get { songs } from this.state
Next, it should use buildSongList function to do a map over all the songs
The songs should be created in a songList component and pass the component the key and the song
It should return a div with the className of Songs
It should include an h1 that says songs
The {buildSongList} function should be wrapped in a div with the d-flex and flex-wrap classes
stephencastaneda
commented
4 years ago
User Story
As a user, when the songs page loads, I should see all the songs.
AC
WHEN looking at the songs page THEN I should see a list of all the songs
Dev Notes
STEP 1
Songs.jscreate an empty array in state called songs.getSongsfunctiongetSongsshould store the uid in a variable calleduidand should get the uid by thegetUidfunction crated inauthDatagetSongsshould next call thegetAllSongsfunctino from theSongsDatafile.thenshould resetthis.setStateto the newsongsobject.catchshouldconole.errorunable to get songs on failurecomponentDidMount()and mountthis.getScatsfunctionSTEP 2
render()should get{ songs }fromthis.statebuildSongListfunction to do a map over all the songssongListcomponent and pass the component thekeyand thesongdivwith theclassNameof Songsh1that sayssongs{buildSongList}function should be wrapped in adivwith thed-flexandflex-wrapclassesIN SONGS DATA FILE *create
getAllSongsfunction