CS 347: Lab 21 – MP3 Player, Part I
Welcome to lab. By now you have already watched the lecture videos on your own. Now we will apply the ideas from those videos in an exercise, which you will complete in small groups.
Within your breakout room, designate one of your team to be the host. Host, claim your group’s task on Crowdsource. Make sure to enter every group member’s JMU eID so that they receive credit. Your group will be assigned a task number.
Team, complete the assigned task below. Host, be careful not to dominate. All members should contribute ideas.
Task
Your task is to write a music library explorer called MyTunes—which could sometime be fleshed out to be a full-fledged web-based MP3 player. You will create views for a list of artists, a list of a single’s artists albums or discography, and a list of an album’s tracks. The music data will be provided by an RESTful API that I provide.
This lab will be broken into two parts. In this first part, we focus on the web service and Redux. In the second part, we’ll add multiple pages using React Router.
Setup
Host, follow these steps:
The next three sections can be done in parallel. Split them up between team members.
Store
Create store.js that looks just like the one made in the videos. It uses the reducer (defined elsewhere) and the thunk middleware.
Provider
In index.js, add a Provider component and pass your store as a prop as demonstrated in the videos.
Reducer
Create reducer.js with a similar structure to the one made in the videos. Use this initial state:
const initialState = {
artists: [],
artist: {},
album: {},
};
Each entry in this state holds the data for one of the views described below.
The reducer function should handle just the default case for the moment. Whatever the action, return the unmodified state.
Actions
The actions for
App
In part 2 of this lab, you will add pages to your app using React Router. For the time being, we’ll just use App as a staging ground to test your components one at a time. Right now, have it return a blank div.
Artists
Define an Artists component in Artists.js. It grabs the list of artists from the store and displays a heading with the text “Artists” and the artists’ names in an unordered list. It also fires off a fetchArtists action when the component first renders. (What hook do you use to fire off a callback only on the first render?)
Have App render your Artists component. After the fetch fires off and dispatches loadArtists, your component will rerender because the list of artists in the store has changed. You should see a list of artist names.
Artist
Define an Artist component in Artist.js. It receives a prop named artistName. It grabs the artist from the store and displays the artist’s name in a heading and the artist’s album names in an unordered list. It also fires off a fetchArtist action when the component first renders.
Have App render your Artist component instead of Artists. Pass in an artistName prop. After the fetch fires off and dispatches loadArtist, your component will rerender because the artist in the store has changed. You should see a list of album names.
Album
Define an Album component in Album.js. It receives props named artistName and albumName. It grabs the album from the store and displays the artist and album names in headings and the album’s track names in an ordered list. It also fires off a fetchAlbum action when the component first renders.
Have App render your Album component instead of Artist. Pass in artistName and albumName props. After the fetch fires off and dispatches loadAlbum, your component will rerender because the album in the store has changed. You should see a list of track names.
Submission
Screen sharer, when your group is done or when time is up, submit just your group’s actions.js on Crowdsource.
Peer Review
After you have submitted the exercise, transition into your peer review for project 2. The following things should happen: