» CS 347: Lab 22 – MP3 Player, Part II

CS 347: Lab 22 – MP3 Player, Part II

November 17, 2020 by Chris Johnson. Filed under fall-2020, labs, webdev.

Welcome to lab. This lab is a continuation of the previous lab.

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 is broken into two parts. In the first part, we focused on the web service and Redux. In this second part, we add multiple pages using React Router.

Router

Follow these steps to switch between multiple pages in your single-page application.

In index.js, add a router into the hierarchy.
Add URL-based switching to your App component. When the path is of the form /artists, show the Artists component. When the path is of the form /artist/:artist, show the Artist component, passing the artist name along as a prop. When the path is of the form /artist/:artist/album/:album, show the Album component, passing the artist and album names along as props. When the path is of any other form, show the Artists component.
In your Artists component, make each artist link to /artist/:artist.
In your Artist component, make each album link to /artist/:artist/album/:album.

Submission

Host, when your group is done or when time is up, submit just your group’s actions.js on Crowdsource.

Reference Implementation

Album.js

import React, {useEffect} from 'react';
import {useSelector, useDispatch} from 'react-redux';
import {fetchAlbum} from './actions';
import {Link} from 'react-router-dom';
import {Spinner} from './Spinner';

export function Album(props) {
  const isWaiting = useSelector(state => state.isWaiting);
  const {artistName, albumName} = props;
  const album = useSelector(state => state.album);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchAlbum(artistName, albumName));
  }, [dispatch, artistName, albumName]);

  return (
    <React.Fragment>
      <nav>
        <Link to="/artists">artists</Link> &gt; <Link to={`/artist/${encodeURIComponent(artistName)}`}>{artistName}</Link>
      </nav>
      <h1>
        {albumName}
        {album.tracks && <button onClick={() => dispatch(playMany(album.tracks))}>&#x25b6;</button>}
        {album.tracks && <button onClick={() => dispatch(pushMany(album.tracks))}>&#x2795;</button>}
      </h1>
      <h3>{artistName}</h3>
      {isWaiting && <Spinner />}
      <ul className="track-list">
        {album.tracks?.map(track =>
          <Track key={track.index} track={track} />
        )}
      </ul>
    </React.Fragment>
  );
}

function Track({track}) {
  const dispatch = useDispatch();
  return (
    <li>
      <button onClick={() => dispatch(playOne(track))}>&#x25b6;</button>
      <button onClick={() => dispatch(pushOne(track))}>&#x2795;</button>
      {track.title}
    </li>
  );
}

App.css

.App {
  margin: 0;
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-rows: 1fr auto;
  height: 100vh;
}

h1 {
  margin: 0;
}

#audio-player {
  grid-column: 1 / span 2;
  width: 100%;
  border-radius: 0;
  outline: none;
  padding: 0;
  margin: 0;
}

/* Browser-dependent. */
audio::-webkit-media-controls-enclosure {
  border-radius: 0;
}

.track-list {
  list-style-type: none;
  padding-left: 0;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
}

button:hover {
  color: orange;
}

#queue-root {
  background-color: black;
  color: white;
  overflow-y: auto;
}

#content-root {
  overflow: auto;
  position: relative;
}

#queue-root, #content-root {
  padding: 20px;
  min-width: 200px;
}

.search-box {
  margin-left: auto;
  display: block;
}

.spinner {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 15px solid cornflowerblue;
  border-top-color: lightgray;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  animation: spin 1s infinite linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

nav {
  text-align: right;
  margin-bottom: 20px;
}

h3 {
  margin-top: 5px;
  font-weight: normal;
  font-style: italic;
}

a, a:visited {
  color: mediumblue;
}

App.js

import React from 'react';
import {Switch, Route, Redirect} from 'react-router-dom';
import './App.css';
import {Artists} from './Artists';
import {Artist} from './Artist';
import {Album} from './Album';

function App() {
  return (
    <div className="App">
      <div id="content-root">
        <Switch>
          <Route exact path="/artists">
            <Artists />
          </Route>
          <Route exact path="/artist/:artist" children={props =>
            <Artist artistName={decodeURIComponent(props.match.params.artist)} />
          } />
          <Route exact path="/artist/:artist/album/:album" children={props =>
            <Album
              artistName={decodeURIComponent(props.match.params.artist)}
              albumName={decodeURIComponent(props.match.params.album)}
            />
          } />
          <Redirect to="/artists" />
        </Switch>
      </div>
    </div>
  );
}

export default App;

Artist.js

import React, {useEffect} from 'react';
import {useSelector, useDispatch} from 'react-redux';
import {Link} from 'react-router-dom';
import {fetchArtist} from './actions';
import {Spinner} from './Spinner';

export function Artist(props) {
  const isWaiting = useSelector(state => state.isWaiting);
  const {artistName} = props;
  const artist = useSelector(state => state.artist);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchArtist(artistName));
  }, [dispatch, artistName]);

  return (
    <React.Fragment>
      <nav>
        <Link to="/artists">artists</Link>
      </nav>
      <h1>{artistName}</h1>
      {isWaiting && <Spinner />}
      <ul>
        {artist.albums?.map(album => <li key={album}><Link to={`/artist/${encodeURIComponent(artistName)}/album/${encodeURIComponent(album)}`}>{album}</Link></li>)}
      </ul>
    </React.Fragment>
  );
}

Artists.js

import React, {useEffect} from 'react';
import {useSelector, useDispatch} from 'react-redux';
import {Link} from 'react-router-dom';
import {fetchArtists} from './actions';

export function Artists(props) {
  const artists = useSelector(state => state.artists);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchArtists());
  }, [dispatch]);

  return (
    <React.Fragment>
      <h1>Artists</h1>
      <ul>
        {artists.map(artist => <li key={artist}><Link to={`/artist/${encodeURIComponent(artist)}`}>{artist}</Link></li>)}
      </ul>
    </React.Fragment>
  );
}

actions.js

export const Action = Object.freeze({
  LoadArtists: 'LoadArtists',
  LoadArtist: 'LoadArtist',
  LoadAlbum: 'LoadAlbum',
});

export const loadArtists = artists => ({
  type: Action.LoadArtists,
  payload: artists,
});

export const loadArtist = albums => ({
  type: Action.LoadArtist,
  payload: albums,
});

export const loadAlbum = album => ({
  type: Action.LoadAlbum,
  payload: album,
});

const url = 'https://twodee.org:3997';

export function fetchArtists() {
  return dispatch => {
    dispatch(startWaiting());
    fetch(`${url}/artists`)
      .then(response => response.json())
      .then(data => {
        dispatch(loadArtists(data));
      });
  };
}

export function fetchArtist(artist) {
  return dispatch => {
    dispatch(startWaiting());
    fetch(`${url}/artist/${encodeURIComponent(artist)}`)
      .then(response => response.json())
      .then(data => {
        dispatch(loadArtist(data));
      });
  };
}

export function fetchAlbum(artist, album) {
  return dispatch => {
    dispatch(startWaiting());
    fetch(`${url}/artist/${encodeURIComponent(artist)}/album/${encodeURIComponent(album)}`)
      .then(response => response.json())
      .then(data => {
        console.log(data);
        const album = {
          artist: data.artist,
          album: data.album,
          tracks: data.tracks.map(track => ({
            album: data.album,
            artist: data.artist,
            title: track.title,
            index: track.index,
            key: `${data.artist}/${data.album}/${track.index}`
          })),
        };
        dispatch(loadAlbum(album));
      });
  };
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {Provider} from 'react-redux';
import store from './store';
import {BrowserRouter} from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

reducer.js

import {Action} from './actions';

const initialState = {
  artists: [],
  artist: {},
  album: {},
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case Action.LoadArtists:
      return {
        ...state,
        album: {},
        artist: {},
        artists: action.payload,
        isWaiting: false,
      };
    case Action.LoadArtist:
      return {
        ...state,
        album: {},
        artist: action.payload,
        isWaiting: false,
      };
    case Action.LoadAlbum:
      return {
        ...state,
        album: action.payload,
        isWaiting: false,
      };
    default:
      return state;
  }
}

export default reducer;

store.js

import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer';

const store = createStore(reducer, applyMiddleware(thunk));
export default store;