feat(SortablePlaylists): removed unnecessary duplicate code

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

backend/logic/actions/playlists.js

@@ -17,9 +17,9 @@ const ActivitiesModule = moduleManager.modules.activities;
 CacheModule.runJob("SUB", {
 	channel: "playlist.create",
 	cb: playlist => {
-		WSModule.runJob("SOCKETS_FROM_USER", { userId: playlist.createdBy }, this).then(sockets => {
-			sockets.forEach(socket => socket.dispatch("event:playlist.create", { data: { playlist } }));
-		});
+		WSModule.runJob("SOCKETS_FROM_USER", { userId: playlist.createdBy }, this).then(sockets =>
+			sockets.forEach(socket => socket.dispatch("event:playlist.create", { data: { playlist } }))
+		);
 
 		if (playlist.privacy === "public")
 			WSModule.runJob("EMIT_TO_ROOM", {

frontend/src/components/modals/ManageStation/Tabs/Playlists.vue

@@ -290,7 +290,6 @@
 import { mapActions, mapState, mapGetters } from "vuex";
 
 import Toast from "toasters";
-import draggable from "vuedraggable";
 import PlaylistItem from "@/components/PlaylistItem.vue";
 import Confirm from "@/components/Confirm.vue";
 
@@ -298,10 +297,8 @@ import SortablePlaylists from "@/mixins/SortablePlaylists.vue";
 
 export default {
 	components: {
-		draggable,
 		PlaylistItem,
 		Confirm
-		// CreatePlaylist: () => import("@/components/modals/CreatePlaylist.vue")
 	},
 	mixins: [SortablePlaylists],
 	data() {
@@ -318,14 +315,6 @@ export default {
 		};
 	},
 	computed: {
-		playlists: {
-			get() {
-				return this.$store.state.user.playlists.playlists;
-			},
-			set(playlists) {
-				this.$store.commit("user/playlists/setPlaylists", playlists);
-			}
-		},
 		currentPlaylists() {
 			if (this.station.type === "community" && this.station.partyMode) {
 				return this.partyPlaylists;
@@ -341,12 +330,10 @@ export default {
 		...mapState({
 			loggedIn: state => state.user.auth.loggedIn,
 			role: state => state.user.auth.role,
-			myUserId: state => state.user.auth.userId,
 			userId: state => state.user.auth.userId,
 			partyPlaylists: state => state.station.partyPlaylists
 		}),
 		...mapState("modals/manageStation", {
-			station: state => state.station,
 			originalStation: state => state.originalStation,
 			includedPlaylists: state => state.includedPlaylists,
 			excludedPlaylists: state => state.excludedPlaylists,
@@ -358,74 +345,10 @@ export default {
 	},
 	mounted() {
 		this.socket.dispatch("playlists.indexMyPlaylists", true, res => {
-			if (res.status === "success") this.playlists = res.data.playlists;
+			if (res.status === "success") this.setPlaylists(res.data.playlists);
 			this.orderOfPlaylists = this.calculatePlaylistOrder(); // order in regards to the database
 		});
 
-		this.socket.on("event:playlist.create", res => {
-			this.playlists.push(res.data.playlist);
-		});
-
-		this.socket.on("event:playlist.delete", res => {
-			this.playlists.forEach((playlist, index) => {
-				if (playlist._id === res.data.playlistId) {
-					this.playlists.splice(index, 1);
-				}
-			});
-		});
-
-		this.socket.on("event:playlist.addSong", res => {
-			this.playlists.forEach((playlist, index) => {
-				if (playlist._id === res.data.playlistId) {
-					this.playlists[index].songs.push(res.data.song);
-				}
-			});
-		});
-
-		this.socket.on("event:playlist.removeSong", res => {
-			this.playlists.forEach((playlist, index) => {
-				if (playlist._id === res.data.playlistId) {
-					this.playlists[index].songs.forEach((song, index2) => {
-						if (song.youtubeId === res.data.youtubeId) {
-							this.playlists[index].songs.splice(index2, 1);
-						}
-					});
-				}
-			});
-		});
-
-		this.socket.on("event:playlist.updateDisplayName", res => {
-			this.playlists.forEach((playlist, index) => {
-				if (playlist._id === res.data.playlistId) {
-					this.playlists[index].displayName = res.data.displayName;
-				}
-			});
-		});
-
-		this.socket.on("event:playlist.updatePrivacy", res => {
-			this.playlists.forEach((playlist, index) => {
-				if (playlist._id === res.data.playlist._id) {
-					this.playlists[index].privacy = res.data.playlist.privacy;
-				}
-			});
-		});
-
-		this.socket.on(
-			"event:user.orderOfPlaylists.changed",
-			orderOfPlaylists => {
-				const sortedPlaylists = [];
-
-				this.playlists.forEach(playlist => {
-					sortedPlaylists[
-						orderOfPlaylists.indexOf(playlist._id)
-					] = playlist;
-				});
-
-				this.playlists = sortedPlaylists;
-				this.orderOfPlaylists = this.calculatePlaylistOrder();
-			}
-		);
-
 		this.socket.dispatch(
 			`stations.getStationIncludedPlaylistsById`,
 			this.station._id,

frontend/src/mixins/SortablePlaylists.vue

@@ -13,8 +13,17 @@ export default {
 	},
 	computed: {
 		...mapState({
-			station: state => state.station.station
+			station: state => state.station.station,
+			myUserId: state => state.user.auth.userId
 		}),
+		playlists: {
+			get() {
+				return this.$store.state.user.playlists.playlists;
+			},
+			set(playlists) {
+				this.$store.commit("user/playlists/setPlaylists", playlists);
+			}
+		},
 		dragOptions() {
 			return {
 				animation: 200,
@@ -24,6 +33,69 @@ export default {
 			};
 		}
 	},
+	mounted() {
+		this.socket.on("event:playlist.create", res => {
+			if (this.playlists.indexOf(res.data.playlist) === -1)
+				this.playlists.push(res.data.playlist);
+		});
+
+		this.socket.on("event:playlist.delete", res => {
+			this.playlists.forEach((playlist, index) => {
+				if (playlist._id === res.data.playlistId) {
+					this.playlists.splice(index, 1);
+				}
+			});
+		});
+
+		this.socket.on("event:playlist.addSong", res => {
+			this.playlists.forEach((playlist, index) => {
+				if (playlist._id === res.data.playlistId) {
+					this.playlists[index].songs.push(res.data.song);
+				}
+			});
+		});
+
+		this.socket.on("event:playlist.removeSong", res => {
+			this.playlists.forEach((playlist, index) => {
+				if (playlist._id === res.data.playlistId) {
+					this.playlists[index].songs.forEach((song, index2) => {
+						if (song.youtubeId === res.data.youtubeId) {
+							this.playlists[index].songs.splice(index2, 1);
+						}
+					});
+				}
+			});
+		});
+
+		this.socket.on("event:playlist.updateDisplayName", res => {
+			this.playlists.forEach((playlist, index) => {
+				if (playlist._id === res.data.playlistId) {
+					this.playlists[index].displayName = res.data.displayName;
+				}
+			});
+		});
+
+		this.socket.on("event:playlist.updatePrivacy", res => {
+			this.playlists.forEach((playlist, index) => {
+				if (playlist._id === res.data.playlist._id) {
+					this.playlists[index].privacy = res.data.playlist.privacy;
+				}
+			});
+		});
+
+		this.socket.on("event:user.orderOfPlaylists.changed", res => {
+			const sortedPlaylists = [];
+
+			this.playlists.forEach(playlist => {
+				sortedPlaylists[
+					res.data.order.indexOf(playlist._id)
+				] = playlist;
+			});
+
+			this.playlists = sortedPlaylists;
+			this.orderOfPlaylists = this.calculatePlaylistOrder();
+		});
+	},
 	methods: {
 		calculatePlaylistOrder() {
 			const calculatedOrder = [];

frontend/src/pages/Profile/tabs/Playlists.vue

@@ -88,7 +88,6 @@
 </template>
 
 <script>
-import draggable from "vuedraggable";
 import { mapActions, mapState, mapGetters } from "vuex";
 
 import PlaylistItem from "@/components/PlaylistItem.vue";
@@ -98,7 +97,6 @@ import ws from "@/ws";
 export default {
 	components: {
 		PlaylistItem,
-		draggable,
 		CreatePlaylist: () => import("@/components/modals/CreatePlaylist.vue")
 	},
 	mixins: [SortablePlaylists],
@@ -116,17 +114,8 @@ export default {
 		...mapState({
 			...mapState("modalVisibility", {
 				modals: state => state.modals
-			}),
-			myUserId: state => state.user.auth.userId
+			})
 		}),
-		playlists: {
-			get() {
-				return this.$store.state.user.playlists.playlists;
-			},
-			set(playlists) {
-				this.$store.commit("user/playlists/setPlaylists", playlists);
-			}
-		},
 		...mapGetters({
 			socket: "websockets/getSocket"
 		})
@@ -152,67 +141,6 @@ export default {
 			if (res.status === "success") this.setPlaylists(res.data.playlists);
 			this.orderOfPlaylists = this.calculatePlaylistOrder(); // order in regards to the database
 		});
-
-		this.socket.on("event:playlist.create", res => {
-			this.playlists.push(res.data.playlist);
-		});
-
-		this.socket.on("event:playlist.delete", res => {
-			this.playlists.forEach((playlist, index) => {
-				if (playlist._id === res.data.playlistId) {
-					this.playlists.splice(index, 1);
-				}
-			});
-		});
-
-		this.socket.on("event:playlist.addSong", res => {
-			this.playlists.forEach((playlist, index) => {
-				if (playlist._id === res.data.playlistId) {
-					this.playlists[index].songs.push(res.data.song);
-				}
-			});
-		});
-
-		this.socket.on("event:playlist.removeSong", res => {
-			this.playlists.forEach((playlist, index) => {
-				if (playlist._id === res.data.playlistId) {
-					this.playlists[index].songs.forEach((song, index2) => {
-						if (song.youtubeId === res.data.youtubeId) {
-							this.playlists[index].songs.splice(index2, 1);
-						}
-					});
-				}
-			});
-		});
-
-		this.socket.on("event:playlist.updateDisplayName", res => {
-			this.playlists.forEach((playlist, index) => {
-				if (playlist._id === res.data.playlistId) {
-					this.playlists[index].displayName = res.data.displayName;
-				}
-			});
-		});
-
-		this.socket.on("event:playlist.updatePrivacy", res => {
-			this.playlists.forEach((playlist, index) => {
-				if (playlist._id === res.data.playlist._id) {
-					this.playlists[index].privacy = res.data.playlist.privacy;
-				}
-			});
-		});
-
-		this.socket.on("event:user.orderOfPlaylists.changed", res => {
-			const sortedPlaylists = [];
-
-			this.playlists.forEach(playlist => {
-				sortedPlaylists[
-					res.data.order.indexOf(playlist._id)
-				] = playlist;
-			});
-
-			this.playlists = sortedPlaylists;
-			this.orderOfPlaylists = this.calculatePlaylistOrder();
-		});
 	},
 	methods: {
 		showPlaylist(playlistId) {

frontend/src/pages/Station/Sidebar/Playlists.vue

@@ -84,19 +84,13 @@
 <script>
 import { mapState, mapActions, mapGetters } from "vuex";
 import Toast from "toasters";
-import draggable from "vuedraggable";
 
 import PlaylistItem from "@/components/PlaylistItem.vue";
 import SortablePlaylists from "@/mixins/SortablePlaylists.vue";
 
 export default {
-	components: { PlaylistItem, draggable },
+	components: { PlaylistItem },
 	mixins: [SortablePlaylists],
-	data() {
-		return {
-			playlists: []
-		};
-	},
 	computed: {
 		currentPlaylists() {
 			if (this.station.type === "community" && this.station.partyMode) {
@@ -109,7 +103,6 @@ export default {
 			userId: state => state.user.auth.userId
 		}),
 		...mapState("station", {
-			station: state => state.station,
 			partyPlaylists: state => state.partyPlaylists,
 			includedPlaylists: state => state.includedPlaylists,
 			excludedPlaylists: state => state.excludedPlaylists,
@@ -122,73 +115,9 @@ export default {
 	mounted() {
 		/** Get playlists for user */
 		this.socket.dispatch("playlists.indexMyPlaylists", true, res => {
-			if (res.status === "success") this.playlists = res.data.playlists;
+			if (res.status === "success") this.setPlaylists(res.data.playlists);
 			this.orderOfPlaylists = this.calculatePlaylistOrder(); // order in regards to the database
 		});
-
-		this.socket.on("event:playlist.create", res => {
-			this.playlists.push(res.data.playlist);
-		});
-
-		this.socket.on("event:playlist.delete", res => {
-			this.playlists.forEach((playlist, index) => {
-				if (playlist._id === res.data.playlistId) {
-					this.playlists.splice(index, 1);
-				}
-			});
-		});
-
-		this.socket.on("event:playlist.addSong", res => {
-			this.playlists.forEach((playlist, index) => {
-				if (playlist._id === res.data.playlistId) {
-					this.playlists[index].songs.push(res.data.song);
-				}
-			});
-		});
-
-		this.socket.on("event:playlist.removeSong", res => {
-			this.playlists.forEach((playlist, index) => {
-				if (playlist._id === res.data.playlistId) {
-					this.playlists[index].songs.forEach((song, index2) => {
-						if (song.youtubeId === res.data.youtubeId) {
-							this.playlists[index].songs.splice(index2, 1);
-						}
-					});
-				}
-			});
-		});
-
-		this.socket.on("event:playlist.updateDisplayName", res => {
-			this.playlists.forEach((playlist, index) => {
-				if (playlist._id === res.data.playlistId) {
-					this.playlists[index].displayName = res.data.displayName;
-				}
-			});
-		});
-
-		this.socket.on("event:playlist.updatePrivacy", res => {
-			this.playlists.forEach((playlist, index) => {
-				if (playlist._id === res.data.playlist._id) {
-					this.playlists[index].privacy = res.data.playlist.privacy;
-				}
-			});
-		});
-
-		this.socket.on(
-			"event:user.orderOfPlaylists.changed",
-			orderOfPlaylists => {
-				const sortedPlaylists = [];
-
-				this.playlists.forEach(playlist => {
-					sortedPlaylists[
-						orderOfPlaylists.indexOf(playlist._id)
-					] = playlist;
-				});
-
-				this.playlists = sortedPlaylists;
-				this.orderOfPlaylists = this.calculatePlaylistOrder();
-			}
-		);
 	},
 	methods: {
 		edit(id) {
@@ -291,7 +220,7 @@ export default {
 		},
 		...mapActions("station", ["updatePartyPlaylists"]),
 		...mapActions("modalVisibility", ["openModal"]),
-		...mapActions("user/playlists", ["editPlaylist"])
+		...mapActions("user/playlists", ["editPlaylist", "setPlaylists"])
 	}
 };
 </script>