Improved AddToPlaylistDropdown

frontend/src/components/AddToPlaylistDropdown.vue

@@ -26,14 +26,15 @@
 				href="#"
 				v-for="(playlist, index) in playlists"
 				:key="index"
-				@click.prevent="toggleSongInPlaylist(index, playlist._id)"
+				@click.prevent="toggleSongInPlaylist(index)"
 				:title="playlist.displayName"
 			>
 				<p class="control is-expanded checkbox-control">
 					<input
 						type="checkbox"
 						:id="index"
-						v-model="playlist.hasSong"
+						:checked="hasSong(playlist)"
+						@click="toggleSongInPlaylist(index)"
 					/>
 					<label :for="index">
 						<span></span>
@@ -73,14 +74,9 @@ export default {
 		this.socket.dispatch("playlists.indexMyPlaylists", false, res => {
 			if (res.status === "success") {
 				this.playlists = res.data;
-				this.checkIfPlaylistsHaveSong();
 			}
 		});
 
-		this.socket.on("event:songs.next", () => {
-			this.checkIfPlaylistsHaveSong();
-		});
-
 		this.socket.on("event:playlist.create", playlist => {
 			this.playlists.push(playlist);
 		});
@@ -102,19 +98,19 @@ export default {
 		});
 	},
 	methods: {
-		toggleSongInPlaylist(index, playlistId) {
-			if (!this.playlists[index].hasSong) {
+		toggleSongInPlaylist(playlistIndex) {
+			const playlist = this.playlists[playlistIndex];
+			if (!this.hasSong(playlist)) {
 				this.socket.dispatch(
 					"playlists.addSongToPlaylist",
 					false,
 					this.song.songId,
-					playlistId,
+					playlist._id,
 					res => {
 						new Toast({ content: res.message, timeout: 4000 });
 
 						if (res.status === "success") {
-							this.playlists[index].songs.push(this.song);
-							this.playlists[index].hasSong = true;
+							this.playlists[playlistIndex].songs.push(this.song);
 						}
 					}
 				);
@@ -122,38 +118,29 @@ export default {
 				this.socket.dispatch(
 					"playlists.removeSongFromPlaylist",
 					this.song.songId,
-					playlistId,
+					playlist._id,
 					res => {
 						new Toast({ content: res.message, timeout: 4000 });
 
 						if (res.status === "success") {
-							this.playlists[index].songs.forEach(
+							this.playlists[playlistIndex].songs.forEach(
 								(song, songIndex) => {
 									if (song.songId === this.song.songId)
-										this.playlists[index].songs.splice(
-											songIndex,
-											1
-										);
+										this.playlists[
+											playlistIndex
+										].songs.splice(songIndex, 1);
 								}
 							);
-
-							this.playlists[index].hasSong = false;
 						}
 					}
 				);
 			}
 		},
-		checkIfPlaylistsHaveSong() {
-			this.playlists.forEach((playlist, index) => {
-				let hasSong = false;
-
-				for (let song = 0; song < playlist.songs.length; song += 1) {
-					if (playlist.songs[song].songId === this.song.songId)
-						hasSong = true;
-				}
-
-				this.$set(this.playlists[index], "hasSong", hasSong);
-			});
+		hasSong(playlist) {
+			return (
+				playlist.songs.map(song => song._id).indexOf(this.song._id) !==
+				-1
+			);
 		}
 	}
 };