teaching machines

CS 347: Lab 23 – Dukebox

November 29, 2021 by Chris Johnson. Filed under fall-2021, labs, webdev.

Dear students:

Welcome to lab. Now’s your chance to apply the ideas you read about. Find a partner and complete as much of the task below as you can. At the end of our time together, paste your files into Crowdsource in order to receive credit.

Task 1

Your task is in this lab is to create a multi-page client for a music streaming service. The client has three pages:

• the artists
• the albums of an artist
• the tracks of an album

Clicking on an artist takes the user to the albums page. Clicking on an album takes the user to the tracks page. To keep this exercise manageable, your client will not actually play any music. Extending it to really play music is something to do when all the homework’s turned in.

Create a new React app and strip out the boilerplate code as you have done in the past. Install these helper libraries: react-redux, react-router-dom, and redux-thunk.

Components

Add a component for each page. Initially, just have each component render a heading that clearly identifies which component is visible.

Choose which page is displayed using the Router library. Ensure that you can visit each page by manually adjusting the path.

Store

Now create a global Redux store that holds the model behind each page. Ultimately you will fill this store with data you pull down from a web service. But don’t start there. For the moment, pre-populate your store with this initial state:

const initialState = {
  artists: [
    'The Album Leaf',
    'Balmorhea',
    'Library Tapes',
    'Nils Frahm',
    'Ólafur Arnalds',
  ],

  // These a Balmorhea's albums...
  albums: [
    'Balmorhea',
    'Rivers Arms',
    'All Is Wild, All Is Silent',
    'Constellations',
    'Stranger',
    'Clear Language',
    'The Wind',
  ],

  // These are the tracks of Rivers Arms...
  tracks: [
    'San Solomon',
    'Lament',
    'The Summer',
    'The Winter',
    'Greyish Tapering Ash',
    'Baleen Morning',
    'Barefoot Pilgrims',
    'Context',
    'Process',
    'Divisadero',
    'Limmat',
    'Theme No. 1',
    'Windansea',
    'San Solomon (Reprise)',
  ],
};

Have each component pull out the relevant data from this store and display it in lists. Make each artist a Link to the albums page, with the artist passed in as a parameter. Make each album a Link to the tracks page, with the album and artist passed in as parameters.

Web Service

Instead of pre-populating the initial state, pull down the data using thunk creators that call fetch. You are encouraged to implement this by following these steps:

• In actions.js, add an Action enum with the following keys: LoadArtists, LoadAlbums, LoadTracks.
• Create action creators for the three actions. Each takes an array of the relevant items as a parameter, which becomes the payload.
• Add cases to your reducer that replace the relevant array in the state with the action’s payload.
• Add a thunk creator named fetchArtists. It pulls down an array of artists from https://dukebox.twodee.org:8443/artists and drops them into the store.
• Dispatch the artists thunk just once using useEffect in the App component.
• Add a thunk creator named fetchAlbums. It accepts the artist name as a parameter and pulls down an array of albums for an artist from https://dukebox.twodee.org:8443/artists/ARTIST and drops them into the store. ARTIST must be replaced by the artist’s actual name.
• Dispatch the albums thunk using useEffect in the albums component.
• Add a thunk creator named fetchTracks. It accepts the artist and album names as parameters and pulls down an array of tracks from https://dukebox.twodee.org:8443/artists/ARTIST/ALBUM and drops them into the store. ARTIST and ALBUM must be replaced by the artist’s and album’s actual names.
• Dispatch the tracks thunk using useEffect in the tracks component.

Once a fetch finishes and dispatches a Load* action, the store will be updated by the reducer. Any component that has called useSelector to pull out the changed state will automatically re-render.

TODO

The next step of your learning is to complete the following tasks:

• Research some aspect of web development on your own. Find articles and videos beyond what’s assigned. Summarize what you learn in a couple paragraphs of your own words and a snippet of source code in your next blog entry before Friday morning. Clearly put the date of the blog entry on your index page. If any of the requirements is not met, you will not receive full credit.
• Keep working on project 3.

See you next time.

Sincerely,