Add artist show page

app/views/api/artists/show.json.jbuilder

@@ -9,8 +9,8 @@ json.songs do
   end
 end
 
-json.@artist do
+json.artist do
   json.extract! @artist, :id, :name, :song_ids
-  json.photoUrl url_for(@artist.photo);
+  json.photoUrl url_for(@artist.photo)
   json.album_ids @artist.albums.pluck(:id)
 end

frontend/components/main/header/artist_show_container.js

@@ -7,6 +7,7 @@ import { selectArtistSongs } from '../../../reducers/selectors';
 
 
 const mapStateToProps = (state, ownProps) => {
+  debugger
   // const artist = Object.values(state.entities.remoteArtists)[ownProps.match.params.artistId] || ownProps.artists || [],
   const artist = state.entities.artists[ownProps.match.params.artistId] || { name: "", song_ids: [], photoUrl: "" };
   const songs = selectArtistSongs(state, artist);

frontend/components/main/header/songs_index_item.jsx

@@ -47,27 +47,31 @@ class SongsIndexItem extends React.Component {
   }
 
   togglePlay(songId, elementId, elementType) {
-    
+
     if (this.state.playing) {
       this.props.pauseCurrentSong();
       this.setState({ playing: false });
     } else {
-
+      debugger
       this.props.receiveCurrentSong(songId, elementId, elementType);
       this.setState({ playing: true });
     }
   }
 
   render () {
-    
-    const { putSongInState, openModal, song, playlist, album } = this.props;
-    let element = playlist || album;
+
+    const { putSongInState, openModal, song, playlist, album, artist } = this.props;
+    let element = playlist || album || artist;
     let elementType = "playlist";
 
     if (element === album) {
       elementType = "album";
     }
 
+    if (element === artist) {
+      elementType = "artist";
+    }
+
     let indexButton = this.state.playing ? (
         <div className="index-button-container">
           <p id="index-pause" className="material-icons" onClick={() => {

frontend/components/main/playbar/music_player.jsx

@@ -90,6 +90,7 @@ class MusicPlayer extends React.Component {
   }
 
   nextSong(currentSongId) {
+    debugger
     let songList = this.props.songList;
     songList = songList.map((el) => {
       return parseInt(el);

frontend/reducers/selectors.js

@@ -94,6 +94,10 @@ export const selectPlaylistSongs = (state, playlist) => {
   return playlist ? playlist.song_ids.map(id => state.entities.songs[id]) : [];
 };
 
+export const selectArtistSongs = (state, artist) => {
+  return artist ? artist.song_ids.map(id => state.entities.songs[id]) : [];
+};
+
 export const selectAlbumSongs = (state, album) => {
 
   return album ? album.song_ids.map(id => state.entities.songs[id]) : [];
@@ -102,7 +106,7 @@ export const selectAlbumSongs = (state, album) => {
 export const selectAllSongs = state => Object.values(state.entities.songs);
 
 export const getSongList = (state, currentSong) => {
-
+  debugger
   if (!currentSong.id) {
     return [];
   }
@@ -113,6 +117,8 @@ export const getSongList = (state, currentSong) => {
     currentListOfSongIds = state.entities.playlists[parseInt(state.ui.currentSong.playlist)].song_ids;
   } else if (state.ui.currentSong.album) {
     currentListOfSongIds = Object.keys(state.entities.remoteSongs);
+  } else if (state.ui.currentSong.artist) {
+    currentListOfSongIds = state.entities.artists[parseInt(state.ui.currentSong.artist)].song_ids;
   }
 
   if (!currentListOfSongIds) {

frontend/reducers/ui/current_song_reducer.js

@@ -9,8 +9,13 @@ export default (state = {}, action) => {
       let newState = merge({}, state, { id: action.songId, [action.elementType]: action.elementId, playing: true });
       if (action.elementType === "album"){
         delete newState.playlist;
+        delete newState.artist;
       } else if (action.elementType === "playlist") {
         delete newState.album;
+        delete newState.artist;
+      } else if (action.elementType === "artist") {
+        delete newState.album;
+        delete newState.playlist;
       }
       return newState;
     case PAUSE_CURRENT_SONG: