teaching machines

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 {
  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;
}

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;

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>
  );
}

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>
  );
}

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));
      });
  };
}

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')
);

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;

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

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