Fix songs index bug

app/assets/stylesheets/components/main_content.scss

@@ -1,5 +1,5 @@
 .main-container {
-  // height: 100%;
+  min-height: 100vh;
   background: #34e89e;  /* fallback for old browsers */
   background: -webkit-linear-gradient(to top, #0f3443, #34e89e);  /* Chrome 10-25, Safari 5.1-6 */
   background: linear-gradient(to top, #0f3443, #34e89e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
@@ -123,27 +123,31 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  margin-left: 20%;
+  padding-left: 20%;
 }
 
 .playlist-item {
-  padding: 10px;
-  flex-basis: 20%;
-  box-sizing: border-box;
-}
-
-.playlist-item-image {
   min-width: 150px;
   min-height: 150px;
   max-height: 320px;
   max-width: 320px;
+  padding: 15px 15px 15px;
+  width: 20%;
+  box-sizing: border-box;
+  align-items: center;
+  text-align: center;
+  margin-bottom: 2%;
+}
+
+.playlist-item-image {
+
 }
 
 .playlist-subtext {
   padding-top: 10px;
+  width: 100%;
   display: flex;
   flex-direction: column;
-  align-items: center;
 }
 
 .playlist-subtext p {

app/assets/stylesheets/components/show_box_content.scss

@@ -39,6 +39,20 @@
  margin-top: 160px;
 }
 
+.loading::after {
+  content: "";
+  top: 0;
+  left: 0;
+  right: 0;
+  // margin: auto;
+  width: 100vw;
+  height: 100vh;
+  z-index: -1;
+  position: absolute;
+  background: -webkit-linear-gradient(to top, #0f3443, #34e89e);  /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(to top, #0f3443, #34e89e);
+}
+
 .main-container {
   flex-direction: row;
 }

app/controllers/api/playlists_controller.rb

@@ -19,7 +19,7 @@ def create
       render json: @playlist.errors.full_messages, status: 422
     end
   end
-  # 
+  #
   # def add_song
   #   @playlist = Playlist.find(params[:playlist_id])
   #   @song = Song.find(params[:song_id])

app/controllers/api/songs_controller.rb

@@ -1,14 +1,15 @@
 class Api::SongsController < ApplicationController
 
   def index
-    @songs = Song.all
+    @saved_playlist = current_user.playlists.first
+    @songs = @saved_playlist.songs
     render :index
   end
 
   private
 
   def song_params
-    params.require(:song).permit(:title, :album_id, :track)
+    params.require(:song).permit(:title, :album_id, :track, :playlist_id)
   end
-
+#
 end

app/controllers/api/users_controller.rb

@@ -1,10 +1,10 @@
 class Api::UsersController < ApplicationController
 
   def create
-
     @user = User.new(user_params)
-
     if @user.save
+      # the first playlist for a user will be the 'saved' songs playlist
+      @user.playlists += [Playlist.create(title: 'Saved')]
       login!(@user)
       render 'api/users/show'
     else

app/views/api/songs/index.json.jbuilder

@@ -1,3 +1,7 @@
+json.playlist do
+  json.extract! @playlist, :id, :title, :song_ids, :author_id
+  json.author @playlist.author.username
+end
 
 @songs.each do |song|
   json.set! song.id do

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

@@ -1,3 +1,3 @@
 
-json.extract! @user, :id, :username, :song_ids, :album_ids
+json.extract! @user, :id, :username, :song_ids, :album_ids, :saved_playlist_id
 # json.artist_ids @artists.pluck(:id)

config/routes.rb

@@ -6,7 +6,9 @@
     resources :users, only: [:show, :create]
     resource :session, only: [:create, :destroy]
     resources :songs, only: [:index, :show]
-    resources :playlists, only: [:create, :index, :show, :destroy]
+    resources :playlists, only: [:create, :index, :show, :destroy] do
+      resources :songs, only: [:index]
+    end
     resources :albums, only: [:index, :show]
     resources :artists, only: [:index, :show]
     resources :follows, only: [:create, :destroy]

frontend/actions/playlist_actions.js

@@ -5,6 +5,7 @@ export const DELETE_PLAYLIST = 'DELETE_PLAYLIST';
 export const RECEIVE_ALL_PLAYLISTS = 'RECEIVE_ALL_PLAYLISTS';
 
 const receivePlaylists = (playlists) => {
+
   return {
     type: RECEIVE_ALL_PLAYLISTS,
     playlists
@@ -27,16 +28,17 @@ const removePlaylist = playlistId => {
 };
 
 export const fetchPlaylists = () => dispatch => {
+
   return (
     APIUtil.fetchPlaylists().then(
       res => dispatch(receivePlaylists(res))
     ));
 };
 
 export const fetchPlaylist = (id) => dispatch => {
+
   return (
     APIUtil.fetchPlaylist(id).then(res => {
-
         dispatch(receivePlaylist(res));
       }
     ));

frontend/actions/song_actions.js

@@ -5,19 +5,20 @@ export const REMOVE_CURRENT_SONG = "REMOVE_CURRENT_SONG";
 export const PAUSE_CURRENT_SONG = "PAUSE_CURRENT_SONG";
 export const PUT_SONG_IN_STATE = "PUT_SONG_IN_STATE";
 export const REMOVE_SONG_FROM_STATE = "REMOVE_SONG_FROM_STATE";
-export const RECEIVE_ALL_SONGS = 'RECEIVE_ALL_SONGS';
+export const RECEIVE_SAVED_SONGS = 'RECEIVE_SAVED_SONGS';
 
 
-const receiveSongs = (songs) => {
+const receiveSongs = ({songs, playlist}) => {
   return {
-    type: RECEIVE_ALL_SONGS,
-    songs
+    type: RECEIVE_SAVED_SONGS,
+    songs,
+    playlist
   };
 };
 
-export const fetchSongs = () => dispatch => {
+export const fetchSavedSongs = () => dispatch => {
   return (
-    APIUtil.fetchSongs().then(
+    APIUtil.fetchSavedSongs().then(
       res => dispatch(receiveSongs(res))
     ));
 };

frontend/components/main/header/grid_show.jsx

@@ -18,7 +18,6 @@ class GridShow extends React.Component {
 
   render () {
     const {playlist, logout, songs} = this.props;
-
     let tracks = '';
     if(songs[0]){
        tracks = songs.map( (song) => {
@@ -35,13 +34,14 @@ class GridShow extends React.Component {
     }
 
     if (this.state.loading) {
+      //add gradient to background
       return (
         <div className='loading'>
           <PulseLoader
             sizeUnit={"px"}
             height={40}
             width={40}
-            color={'#1DB954'}
+            color={'#bbffe8'}
             loading={this.state.loading}
           />
         </div>

frontend/components/main/header/playlist_show_container.js

@@ -7,7 +7,9 @@ import { selectPlaylistSongs } from '../../../reducers/selectors';
 
 
 const mapStateToProps = (state, ownProps) => {
+  debugger
   const playlist = state.entities.playlists[ownProps.match.params.playlistId] || { title: "", song_ids: [], photoUrl: "" };
+
   const songs = selectPlaylistSongs(state, playlist);
   return {
     playlist,
@@ -17,6 +19,7 @@ const mapStateToProps = (state, ownProps) => {
 };
 
 const mapDipatchToProps = (dispatch) => {
+
   return {
     fetchPlaylist: (id) => dispatch(fetchPlaylist(id)),
     logout: () => dispatch(logout())

frontend/components/main/header/songs_index.jsx

@@ -1,45 +1,50 @@
 import React from 'react';
-import { fetchSongs } from '../../../actions/song_actions';
+import { fetchSavedSongs } from '../../../actions/song_actions';
+import { fetchPlaylist } from '../../../actions/playlist_actions';
 import { connect } from 'react-redux';
 import { logout, fetchCurrentUser } from '../../../actions/session_actions';
-import { selectAllSavedSongs, selectAllPlaylists } from '../../../reducers/selectors';
+import { selectPlaylistSongs, selectAllSavedSongs, selectAllPlaylists } from '../../../reducers/selectors';
 import SongsIndexItem from './songs_index_item';
 
 const mapStateToProps = (state) => {
-
-  const songs = selectAllSavedSongs(state);
+  const playlist = state.entities.playlists[500];
+  const songs = selectPlaylistSongs(state, playlist);
+  const playlistId = 500;
   return {
-    songs
+    songs,
+    playlist,
+    playlistId
   };
 };
 
 const mapDispatchToProps = (dispatch) => {
+
   return {
+    fetchPlaylist: (id) => dispatch(fetchPlaylist(id)),
     fetchCurrentUser: (user) => dispatch(fetchCurrentUser(user)),
-    fetchSongs: () => dispatch(fetchSongs()),
+    fetchSavedSongs: () => dispatch(fetchSavedSongs()),
     logout: () => dispatch(logout())
   };
 };
 
-
 class SongsIndex extends React.Component {
   constructor(props){
-      super(props);
+    super(props);
   }
 
   componentDidMount() {
-    this.props.fetchCurrentUser(window.currentUser);
-    this.props.fetchSongs();
+    this.props.fetchPlaylist(this.props.playlistId);
+    // this.props.fetchCurrentUser(window.currentUser);
   }
 
   render(){
-    const {songs} = this.props;
-
-    if (!songs){return (<div className="no-results"> Nothing to see here...</div>);}
+    const {songs, playlist } = this.props;
+    if (!playlist){return (<div className="no-results"></div>);}
+    if (!songs[songs.length-1]){return (<div className="no-results"></div>);}
 
     let tracks = songs.map( (song) => {
       return (
-        <SongsIndexItem key={song.id} song={song}/>
+        <SongsIndexItem key={song.id} song={song} playlist={playlist}/>
       );
     });
 

frontend/components/main/header/songs_index_item.jsx

@@ -60,7 +60,7 @@ class SongsIndexItem extends React.Component {
 
   render () {
     const { putSongInState, openModal, song, playlist } = this.props;
-    debugger
+
     let indexButton = this.state.playing ? (
         <div className="index-button-container">
           <p id="index-pause" className="material-icons" onClick={() => {

frontend/components/main/main_content.jsx

@@ -13,25 +13,22 @@ class MainContent extends React.Component {
   constructor(props) {
     super(props);
     this.fetchPlaylists = props.fetchPlaylists.bind(this);
-    this.fetchSongs = props.fetchSongs.bind(this);
     this.logout = props.logout.bind(this);
   }
 
   componentDidMount() {
     this.fetchPlaylists();
-    this.fetchSongs();
   }
 
   render() {
     const {playlists, navpath, show, path} = this.props;
-
     let index = "";
-
+    
     if (!path || path.includes("playlists")) {
       index = (
         <div className="grid">
           <ul>
-            {playlists.map(playlist => <PlaylistIndexItem playlist={playlist} navpath={navpath}/>)}
+            {playlists.map(playlist => <PlaylistIndexItem key={playlist.id} playlist={playlist} navpath={navpath}/>)}
           </ul>
         </div>
       );
@@ -41,7 +38,6 @@ class MainContent extends React.Component {
       );
     }
 
-
     // const index = (
     //   <div className="grid">
     //     <ul>
@@ -62,7 +58,7 @@ class MainContent extends React.Component {
     if (this.props.path === '/browse' || this.props.path === '/browse/'){
       redirect = <Redirect to={`/${navpath}/playlists`} />;
     }
-    // 
+    //
     // <div>
     //   <NavBar className="nav" logout={this.logout}/>
     // </div>

frontend/components/main/navbar/browse_container.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { logout } from '../../../actions/session_actions';
 import { fetchPlaylists } from '../../../actions/playlist_actions';
-import { fetchSongs } from '../../../actions/song_actions';
+// import { fetchSavedSongs } from '../../../actions/song_actions';
 import { selectAllUnauthoredPlaylists, selectRandomAlbums, selectRandomArtists} from '../../../reducers/selectors';
 import MainContent from '../main_content';
 
@@ -18,10 +18,10 @@ const mapStateToProps = (state, ownProps) => {
 };
 
 const mapDispatchToProps = dispatch => {
+  // fetchSavedSongs: () => dispatch(fetchSongs())
   return {
     logout: () => dispatch(logout()),
     fetchPlaylists: () => dispatch(fetchPlaylists()),
-    fetchSongs: () => dispatch(fetchSongs())
   };
 };
 

frontend/components/main/navbar/collection_container.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { logout } from '../../../actions/session_actions';
 import { fetchPlaylists } from '../../../actions/playlist_actions';
-import { fetchSongs } from '../../../actions/song_actions';
+import { fetchSavedSongs } from '../../../actions/song_actions';
 import { selectAllAuthoredPlaylists, selectAllAssociatedAlbums, selectAllAssociatedArtists, selectAllSavedSongs} from '../../../reducers/selectors';
 import MainContent from '../main_content';
 
@@ -20,7 +20,7 @@ const mapDispatchToProps = dispatch => {
   return {
     logout: () => dispatch(logout()),
     fetchPlaylists: () => dispatch(fetchPlaylists()),
-    fetchSongs: () => dispatch(fetchSongs())
+    fetchSavedSongs: () => dispatch(fetchSavedSongs())
   };
 };
 

frontend/components/main/playbar/music_player.jsx

@@ -95,10 +95,6 @@ class MusicPlayer extends React.Component {
     const { songInfo, currentSong, loggedIn, putSongInState, openModal,
       pauseCurrentSong, receiveCurrentSong } = this.props;
 
-    if (!loggedIn) {
-      return null;
-    }
-
     let currentlyPlaying = currentSong.id ? (
       <div className="playbar-container">
         <div className="playing-container">