fix(AddToPlaylistDropdown): 'PLAYLIST_INDEX_FOR_ME' job was called way too many times

Signed-off-by: Jonathan <theflametrooper@gmail.com>

backend/logic/actions/playlists.js

@@ -18,7 +18,7 @@ CacheModule.runJob("SUB", {
 	channel: "playlist.create",
 	cb: playlist => {
 		WSModule.runJob("SOCKETS_FROM_USER", { userId: playlist.createdBy }, this).then(sockets =>
-			sockets.forEach(socket => socket.dispatch("d", { data: { playlist } }))
+			sockets.forEach(socket => socket.dispatch("event:playlist.created", { data: { playlist } }))
 		);
 
 		if (playlist.privacy === "public")

frontend/src/App.vue

@@ -498,7 +498,7 @@ a {
 			filter: brightness(90%);
 		}
 
-		&:not(:first-of-type) {
+		&:not(:first) {
 			margin-left: 5px;
 		}
 	}

frontend/src/components/AddToPlaylistDropdown.vue

@@ -48,7 +48,7 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
+import { mapGetters, mapState, mapActions } from "vuex";
 import Toast from "toasters";
 
 export default {
@@ -62,40 +62,59 @@ export default {
 			default: "left"
 		}
 	},
-	data() {
-		return {
-			playlists: []
-		};
+	computed: {
+		...mapGetters({
+			socket: "websockets/getSocket"
+		}),
+		...mapState({
+			fetchedPlaylists: state => state.user.playlists.fetchedPlaylists
+		}),
+		playlists: {
+			get() {
+				return this.$store.state.user.playlists.playlists;
+			},
+			set(playlists) {
+				this.$store.commit("user/playlists/setPlaylists", playlists);
+			}
+		}
 	},
-	computed: mapGetters({
-		socket: "websockets/getSocket"
-	}),
 	mounted() {
-		this.socket.dispatch("playlists.indexMyPlaylists", false, res => {
-			if (res.status === "success") {
-				this.playlists = res.data.playlists;
-			}
-		});
+		if (!this.fetchedPlaylists)
+			this.socket.dispatch("playlists.indexMyPlaylists", false, res => {
+				if (res.status === "success")
+					this.setPlaylists(res.data.playlists);
+			});
 
-		this.socket.on("event:playlist.created", res => {
-			this.playlists.push(res.data.playlist);
-		});
+		this.socket.on(
+			"event:playlist.created",
+			res => this.playlists.push(res.data.playlist),
+			{ replaceable: true }
+		);
 
-		this.socket.on("event:playlist.deleted", res => {
-			this.playlists.forEach((playlist, index) => {
-				if (playlist._id === res.data.playlistId) {
-					this.playlists.splice(index, 1);
-				}
-			});
-		});
+		this.socket.on(
+			"event:playlist.deleted",
+			res => {
+				this.playlists.forEach((playlist, index) => {
+					if (playlist._id === res.data.playlistId) {
+						this.playlists.splice(index, 1);
+					}
+				});
+			},
+			{ replaceable: true }
+		);
 
-		this.socket.on("event:playlist.displayName.updated", res => {
-			this.playlists.forEach((playlist, index) => {
-				if (playlist._id === res.data.playlistId) {
-					this.playlists[index].displayName = res.data.displayName;
-				}
-			});
-		});
+		this.socket.on(
+			"event:playlist.displayName.updated",
+			res => {
+				this.playlists.forEach((playlist, index) => {
+					if (playlist._id === res.data.playlistId) {
+						this.playlists[index].displayName =
+							res.data.displayName;
+					}
+				});
+			},
+			{ replaceable: true }
+		);
 	},
 	methods: {
 		toggleSongInPlaylist(playlistIndex) {
@@ -141,7 +160,8 @@ export default {
 				playlist.songs.map(song => song._id).indexOf(this.song._id) !==
 				-1
 			);
-		}
+		},
+		...mapActions("user/playlists", ["setPlaylists"])
 	}
 };
 </script>

frontend/src/components/Queue.vue

@@ -27,6 +27,7 @@
 					:class="{
 						'item-draggable': isAdminOnly() || isOwnerOnly()
 					}"
+					:disabled-actions="[]"
 				>
 					<div
 						v-if="isAdminOnly() || isOwnerOnly()"

frontend/src/store/modules/user.js

@@ -203,7 +203,8 @@ const modules = {
 		namespaced: true,
 		state: {
 			editing: "",
-			playlists: []
+			playlists: [],
+			fetchedPlaylists: false
 		},
 		actions: {
 			editPlaylist: ({ commit }, id) => commit("editPlaylist", id),
@@ -215,6 +216,7 @@ const modules = {
 				state.editing = id;
 			},
 			setPlaylists(state, playlists) {
+				state.fetchedPlaylists = true;
 				state.playlists = playlists;
 			}
 		}