Add songs to playlists

Gemfile

@@ -38,6 +38,7 @@ gem 'jquery-rails'
 gem 'bcrypt'
 gem "aws-sdk-s3", require: false
 gem 'rspotify'
+gem "font-awesome-rails"
 gem 'ez_download', git: 'https://github.com/OscarAlvarez8830/EZDownload.git'
 group :development, :test do
   # Call 'byebug' anywhere in the code to stop execution and get a  console

Gemfile.lock

@@ -115,6 +115,8 @@ GEM
     faraday (0.15.3)
       multipart-post (>= 1.2, < 3)
     ffi (1.9.25)
+    font-awesome-rails (4.7.0.4)
+      railties (>= 3.2, < 6.0)
     globalid (0.4.1)
       activesupport (>= 4.2.0)
     hashie (3.5.7)
@@ -287,6 +289,7 @@ DEPENDENCIES
   chromedriver-helper
   coffee-rails (~> 4.2)
   ez_download!
+  font-awesome-rails
   jbuilder (~> 2.5)
   jquery-rails
   listen (>= 3.0.5, < 3.2)

app/assets/stylesheets/application.css

@@ -9,7 +9,7 @@
  * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
  * files in this directory. Styles in this file should be added after the last require_* statement.
  * It is generally better to create a new file per style scope.
- *
+ * @import “font-awesome”
  *= require_tree .
  *= require_self
  */

app/assets/stylesheets/components/modal.scss

@@ -14,3 +14,15 @@
   top: 50%;
   transform: translate(0%, -50%);
 }
+
+
+.x-btn {
+  width: 80px;
+  height: 80px;
+  margin: auto;
+  font-size: 80px;
+  font-weight: 100;
+  transition: 0.3s;
+}
+
+//songs index and modal

app/assets/stylesheets/components/show_box_content.scss

@@ -3,6 +3,7 @@
   flex-direction: column;
   padding-left: 50px;
   padding-top: 30px;
+  max-width: 260px;
 }
 
 .playlist-show-item-image {
@@ -35,3 +36,68 @@
  margin: auto;
  margin-top: 160px;
 }
+
+.main-container {
+  flex-direction: row;
+}
+
+.show-body{
+  display: flex;
+  flex-direction: column;
+  width: 1200px;
+  height: 900px;
+}
+
+.body-items {
+  display: flex;
+  flex-direction: row;
+}
+
+.header {
+  max-height: 100px;
+  padding-bottom: 200px;
+}
+
+
+.tracks {
+  margin-top: 50px;
+  margin-left: 100px;
+}
+
+.song-index-item {
+  margin-left: 50px;
+  display: flex;
+  height: 60px;
+  justify-content: space-between;
+  max-width: 400px;
+  color: #f2f2f2;
+  flex: 1;
+  align-items: center;
+}
+
+.song-index-item:hover {
+  background-color: #404040;
+  color: white;
+  opacity: .7;
+  .song-item {
+    opacity: 1;
+  }
+}
+.song-item {
+  margin-left: 20px;
+  margin-right: 200px;
+}
+
+.tripledot {
+  width: 25px;
+  margin-right: 20px;
+  color: white;
+}
+
+.song-index-item .song-btns {
+  opacity: 0;
+}
+
+.song-index-item .song-btns:hover{
+  opacity: 1;
+}

app/controllers/api/playlists_controller.rb

@@ -19,6 +19,12 @@ 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])
+  #   @playlist.songs += [@song]
+  # end
 
   private
 

app/controllers/api/song_playlists_controller.rb

@@ -1,30 +1,14 @@
 class Api::SongPlaylistsController < ApplicationController
   def create
-     @song_playlists = SongPlaylists.new(song_playlist_params)
-     @playlist_song.save
+     @song_playlists = SongPlaylist.new(song_playlist_params)
+     @song_playlists.save
    end
 
    def destroy
    end
 
-   private
    def song_playlist_params
-     params.require(:song_playlist).permit(:song_id, :playlist_id)
+
+     params.require(:song_playlist).permit(:playlist_id, :song_id)
    end
 end
-
-# class Api::PlaylistSongsController < ApplicationController
-#
-#   def create
-#     @playlist_song = PlaylistSong.new(playlist_song_params)
-#     @playlist_song.save
-#   end
-#
-#   def destroy
-#   end
-#
-#   private
-#   def playlist_song_params
-#     params.require(:playlist_song).permit(:song_id, :playlist_id)
-#   end
-# end

app/models/artist.rb

@@ -15,7 +15,7 @@ class Artist < ApplicationRecord
 
   has_many :song_artists,
     foreign_key: :artist_id,
-    class_name: :Song_artist
+    class_name: :SongArtist
 
   has_many :songs,
     through: :song_artists,

app/models/playlist.rb

@@ -18,7 +18,7 @@ class Playlist < ApplicationRecord
 
   has_many :song_playlists,
     foreign_key: :playlist_id,
-    class_name: :Song_playlist
+    class_name: :SongPlaylist
 
   has_many :songs,
     through: :song_playlists,

app/models/song.rb

@@ -18,11 +18,11 @@ class Song < ApplicationRecord
 
   has_many :song_playlists,
     foreign_key: :song_id,
-    class_name: :Song_playlist
+    class_name: :SongPlaylist
 
   has_many :song_artists,
     foreign_key: :song_id,
-    class_name: :Song_artist
+    class_name: :SongArtist
 
   has_many :arists,
     through: :song_artists,

app/models/song_artist.rb

@@ -9,7 +9,7 @@
 #  updated_at :datetime         not null
 #
 
-class Song_artist < ApplicationRecord
+class SongArtist < ApplicationRecord
   belongs_to :song
   belongs_to :artist
 end

app/models/song_playlist.rb

@@ -9,7 +9,9 @@
 #  updated_at  :datetime         not null
 #
 
-class Song_playlist < ApplicationRecord
+class SongPlaylist < ApplicationRecord
+  validates :playlist_id, :song_id, presence: true
+
   belongs_to :song
   belongs_to :playlist
 end

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

@@ -0,0 +1,4 @@
+json.song do
+  json.extract! song, :id, :title
+  json.trackUrl url_for(song.track)
+end

app/views/layouts/application.html.erb

@@ -15,6 +15,8 @@
       window.homeIconSelected = "<%= image_url('home-icon-selected.png') %>"
       window.libraryIcon = "<%= image_url('library-icon.png') %>"
       window.libraryIconSelected = "<%= image_url('library-icon-selected.png') %>"
+      window.playBtn = "<%= image_url('btn-play_video.png') %>"
+      window.tripledot = "<%= image_url('tripledot.png') %>"
     </script>
   </head>
 

config/routes.rb

@@ -10,5 +10,6 @@
     resources :albums, only: [:index, :show]
     resources :artists, only: [:index, :show]
     resources :follows, only: [:create, :destroy]
+    resources :song_playlists, only: [:create, :destroy]
   end
 end

db/seeds.rb

@@ -11,8 +11,8 @@
 User.destroy_all
 Playlist.destroy_all
 Follow.destroy_all
-Song_playlist.destroy_all
-Song_artist.destroy_all
+SongPlaylist.destroy_all
+SongArtist.destroy_all
 
 # file = EzDownload.open('https://s3.amazonaws.com/spoofify-dev/face.jpg')
 

frontend/actions/modal_actions.js

@@ -1,10 +1,12 @@
 export const OPEN_MODAL = 'OPEN_MODAL';
 export const CLOSE_MODAL = 'CLOSE_MODAL';
 
-export const openModal = (payload) => {
+export const openModal = (modal, songId) => {
+
   return {
     type: OPEN_MODAL,
-    payload
+    modal,
+    songId
   };
 };
 

frontend/actions/playlist_actions.js

@@ -36,7 +36,7 @@ export const fetchPlaylists = () => dispatch => {
 export const fetchPlaylist = (id) => dispatch => {
   return (
     APIUtil.fetchPlaylist(id).then(res => {
-      
+
         dispatch(receivePlaylist(res));
       }
     ));
@@ -62,3 +62,7 @@ export const deletePlaylist = (id) => dispatch => {
       () => dispatch(removePlaylist(id))
     ));
 };
+
+export const createSongOnPlaylist = songOnPlaylist => dispatch => {
+  return APIUtil.createSongOnPlaylist(songOnPlaylist).then(null, err => console.log(err));
+}

frontend/components/main/main_content.jsx

@@ -23,7 +23,7 @@ class MainContent extends React.Component {
 
   render() {
     const {playlists, navpath, show} = this.props;
-    
+
     const index = (
       <div className="grid">
         <ul>

frontend/components/main/modal.jsx

@@ -5,17 +5,21 @@ import PlaylistForm from './playlists/playlist_form';
 import PlaylistSongForm from './playlists/playlist_song_form';
 
 function Modal({ modal, closeModal} ) {
+
   if (!modal) {
     return null;
   }
   let component;
-  if (modal === 'newPlaylist'){
-    component = (<PlaylistForm />);
-  } else if (modal === 'newPlaylistSong') {
-    component = (<PlaylistSongForm />);
-  } else {
-    component = "";
-  }
+  switch(modal.type) {
+      case 'newPlaylist':
+        component = <PlaylistForm />;
+        break;
+      case 'newPlaylistSong':
+        component = <PlaylistSongForm />
+        break;
+      default:
+        return null;
+    }
 
   return (
     <div className="modal-background" onClick={closeModal}>
@@ -26,9 +30,12 @@ function Modal({ modal, closeModal} ) {
   );
 }
 
-const mapStateToProps = state => ({
-  modal: state.ui.modal
-});
+const mapStateToProps = state => {
+
+  return {
+    modal: state.ui.modal
+  };
+};
 
 const mapDispatchToProps = dispatch => ({
   closeModal: () => dispatch(closeModal())