Fixed issues with adding/removing currentsong to playlists.

frontend/components/Modals/AddSongToPlaylist.vue

@@ -6,9 +6,9 @@
 					Playlists
 				</p>
 				<ul class="menu-list">
-					<li v-for='playlist in playlists'>
+					<li v-for='playlist in playlistsArr'>
 						<div class='playlist'>
-							<span class='icon is-small' @click='removeSongFromPlaylist(playlist._id)' v-if='playlistContains(playlist._id)'>
+							<span class='icon is-small' @click='removeSongFromPlaylist(playlist._id)' v-if='playlists[playlist._id].hasSong'>
 								<i class="material-icons">playlist_add_check</i>
 							</span>
 							<span class='icon is-small' @click='addSongToPlaylist(playlist._id)' v-else>
@@ -32,47 +32,65 @@
 	export default {
 		data() {
 			return {
-				playlists: {}
+				playlists: {},
+				playlistsArr: [],
+				songId: null,
+				song: null
 			}
 		},
 		methods: {
-			playlistContains: function (playlistId) {
-				let _this = this;
-				let toReturn = false;
-
-				let playlist = this.playlists.filter(playlist => {
-				    return playlist._id === playlistId;
-				})[0];
-
-				for (let i = 0; i < playlist.songs.length; i++) {
-					if (playlist.songs[i].songId === _this.$parent.currentSong.songId) {
-						toReturn = true;
-					}
-				}
-
-				return toReturn;
-			},
 			addSongToPlaylist: function (playlistId) {
 				let _this = this;
 				this.socket.emit('playlists.addSongToPlaylist', this.$parent.currentSong.songId, playlistId, res => {
 					Toast.methods.addToast(res.message, 4000);
-					this.$parent.modals.addSongToPlaylist = false;
+					if (res.status === 'success') {
+						_this.playlists[playlistId].songs.push(_this.song);
+					}
+					_this.recalculatePlaylists();
+					//this.$parent.modals.addSongToPlaylist = false;
 				});
 			},
 			removeSongFromPlaylist: function (playlistId) {
 				let _this = this;
-				this.socket.emit('playlists.removeSongFromPlaylist', this.$parent.currentSong.songId, playlistId, res => {
+				this.socket.emit('playlists.removeSongFromPlaylist', _this.songId, playlistId, res => {
 					Toast.methods.addToast(res.message, 4000);
-					this.$parent.modals.addSongToPlaylist = false;
+					if (res.status === 'success') {
+						_this.playlists[playlistId].songs.forEach((song, index) => {
+							if (song.songId === _this.songId) _this.playlists[playlistId].songs.splice(index, 1);
+						});
+					}
+					_this.recalculatePlaylists();
+					//this.$parent.modals.addSongToPlaylist = false;
+				});
+			},
+			recalculatePlaylists: function() {
+				let _this = this;
+				_this.playlistsArr = Object.values(_this.playlists).map((playlist) => {
+					let hasSong = false;
+					for (let i = 0; i < playlist.songs.length; i++) {
+						if (playlist.songs[i].songId === _this.songId) {
+							hasSong = true;
+						}
+					}
+					playlist.hasSong = hasSong;
+					_this.playlists[playlist._id] = playlist;
+					return playlist;
 				});
 			}
 		},
 		ready: function () {
 			let _this = this;
+			this.songId = this.$parent.currentSong.songId;
+			this.song = this.$parent.currentSong;
 			io.getSocket((socket) => {
 				_this.socket = socket;
 				_this.socket.emit('playlists.indexForUser', res => {
-					if (res.status === 'success') _this.playlists = res.data;
+					if (res.status === 'success') {
+						res.data.forEach((playlist) => {
+							_this.playlists[playlist._id] = playlist;
+						});
+						_this.recalculatePlaylists();
+					}
 				});
 			});
 		},