refactor(socket.io -> WS): removed io.getSocket from anywhere it was used

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

frontend/src/App.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import { mapState, mapActions } from "vuex";
+import { mapState, mapActions, mapGetters } from "vuex";
 import Toast from "toasters";
 
 import Banned from "./pages/Banned.vue";
@@ -36,16 +36,21 @@ export default {
 			keyIsDown: false
 		};
 	},
-	computed: mapState({
-		loggedIn: state => state.user.auth.loggedIn,
-		role: state => state.user.auth.role,
-		username: state => state.user.auth.username,
-		userId: state => state.user.auth.userId,
-		banned: state => state.user.auth.banned,
-		modals: state => state.modalVisibility.modals,
-		currentlyActive: state => state.modalVisibility.currentlyActive,
-		nightmode: state => state.user.preferences.nightmode
-	}),
+	computed: {
+		...mapState({
+			loggedIn: state => state.user.auth.loggedIn,
+			role: state => state.user.auth.role,
+			username: state => state.user.auth.username,
+			userId: state => state.user.auth.userId,
+			banned: state => state.user.auth.banned,
+			modals: state => state.modalVisibility.modals,
+			currentlyActive: state => state.modalVisibility.currentlyActive,
+			nightmode: state => state.user.preferences.nightmode
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
+		})
+	},
 	watch: {
 		socketConnected(connected) {
 			if (!connected)
@@ -136,24 +141,20 @@ export default {
 			}
 		});
 
-		io.getSocket(true, socket => {
-			this.socket = socket;
-
-			this.socket.dispatch("users.getPreferences", res => {
-				if (res.status === "success") {
-					this.changeAutoSkipDisliked(res.data.autoSkipDisliked);
-					this.changeNightmode(res.data.nightmode);
-					this.changeActivityLogPublic(res.data.activityLogPublic);
-
-					if (this.nightmode) this.enableNightMode();
-					else this.disableNightMode();
-				}
-			});
+		this.socket.dispatch("users.getPreferences", res => {
+			if (res.status === "success") {
+				this.changeAutoSkipDisliked(res.data.autoSkipDisliked);
+				this.changeNightmode(res.data.nightmode);
+				this.changeActivityLogPublic(res.data.activityLogPublic);
 
-			this.socket.on("keep.event:user.session.removed", () =>
-				window.location.reload()
-			);
+				if (this.nightmode) this.enableNightMode();
+				else this.disableNightMode();
+			}
 		});
+
+		this.socket.on("keep.event:user.session.removed", () =>
+			window.location.reload()
+		);
 	},
 	methods: {
 		submitOnEnter: (cb, event) => {

frontend/src/api/admin/index.js

@@ -1,3 +1,5 @@
+/* eslint-disable import/no-cycle */
+
 import reports from "./reports";
 
 // when Vuex needs to interact with socket.io

frontend/src/api/admin/reports.js

@@ -1,16 +1,16 @@
+/* eslint-disable import/no-cycle */
+
 import Toast from "toasters";
 import io from "../../io";
 
 export default {
 	resolve(reportId) {
 		return new Promise((resolve, reject) => {
-			io.getSocket(socket => {
-				socket.dispatch("reports.resolve", reportId, res => {
-					new Toast({ content: res.message, timeout: 3000 });
-					if (res.status === "success")
-						return resolve({ status: "success" });
-					return reject(new Error(res.message));
-				});
+			io.socket.dispatch("reports.resolve", reportId, res => {
+				new Toast({ content: res.message, timeout: 3000 });
+				if (res.status === "success")
+					return resolve({ status: "success" });
+				return reject(new Error(res.message));
 			});
 		});
 	}

frontend/src/api/auth.js

@@ -1,3 +1,5 @@
+/* eslint-disable import/no-cycle */
+
 import Toast from "toasters";
 import io from "../io";
 
@@ -8,89 +10,82 @@ export default {
 		return new Promise((resolve, reject) => {
 			const { username, email, password, recaptchaToken } = user;
 
-			io.getSocket(socket => {
-				socket.dispatch(
-					"users.register",
-					username,
-					email,
-					password,
-					recaptchaToken,
-					res => {
-						if (res.status === "success") {
-							if (res.SID) {
-								return lofig.get("cookie").then(cookie => {
-									const date = new Date();
-									date.setTime(
-										new Date().getTime() +
-											2 * 365 * 24 * 60 * 60 * 1000
-									);
-									const secure = cookie.secure
-										? "secure=true; "
-										: "";
-									document.cookie = `SID=${
-										res.SID
-									}; expires=${date.toGMTString()}; domain=${
-										cookie.domain
-									}; ${secure}path=/`;
+			io.socket.dispatch(
+				"users.register",
+				username,
+				email,
+				password,
+				recaptchaToken,
+				res => {
+					if (res.status === "success") {
+						if (res.SID) {
+							return lofig.get("cookie").then(cookie => {
+								const date = new Date();
+								date.setTime(
+									new Date().getTime() +
+										2 * 365 * 24 * 60 * 60 * 1000
+								);
+								const secure = cookie.secure
+									? "secure=true; "
+									: "";
+								document.cookie = `SID=${
+									res.SID
+								}; expires=${date.toGMTString()}; domain=${
+									cookie.domain
+								}; ${secure}path=/`;
 
-									return resolve({
-										status: "success",
-										message: "Account registered!"
-									});
+								return resolve({
+									status: "success",
+									message: "Account registered!"
 								});
-							}
-							return reject(new Error("You must login"));
+							});
 						}
-
-						return reject(new Error(res.message));
+						return reject(new Error("You must login"));
 					}
-				);
-			});
+
+					return reject(new Error(res.message));
+				}
+			);
 		});
 	},
 	login(user) {
 		return new Promise((resolve, reject) => {
 			const { email, password } = user;
 
-			io.getSocket(socket => {
-				socket.dispatch("users.login", email, password, res => {
-					console.log(123, res);
-					if (res.status === "success") {
-						return lofig.get("cookie").then(cookie => {
-							const date = new Date();
-							date.setTime(
-								new Date().getTime() +
-									2 * 365 * 24 * 60 * 60 * 1000
-							);
-							const secure = cookie.secure ? "secure=true; " : "";
-							let domain = "";
-							if (cookie.domain !== "localhost")
-								domain = ` domain=${cookie.domain};`;
-							document.cookie = `${cookie.SIDname}=${
-								res.SID
-							}; expires=${date.toGMTString()}; ${domain}${secure}path=/`;
-							return resolve({ status: "success" });
-						});
-					}
+			io.socket.dispatch("users.login", email, password, res => {
+				console.log(123, res);
+				if (res.status === "success") {
+					return lofig.get("cookie").then(cookie => {
+						const date = new Date();
+						date.setTime(
+							new Date().getTime() + 2 * 365 * 24 * 60 * 60 * 1000
+						);
+						const secure = cookie.secure ? "secure=true; " : "";
+						let domain = "";
+						if (cookie.domain !== "localhost")
+							domain = ` domain=${cookie.domain};`;
+						document.cookie = `${cookie.SIDname}=${
+							res.SID
+						}; expires=${date.toGMTString()}; ${domain}${secure}path=/`;
+						return resolve({ status: "success" });
+					});
+				}
 
-					return reject(new Error(res.message));
-				});
+				return reject(new Error(res.message));
 			});
 		});
 	},
 	logout() {
 		return new Promise((resolve, reject) => {
-			io.getSocket(socket => {
-				socket.dispatch("users.logout", res => {
-					if (res.status === "success") {
-						return lofig.get("cookie").then(cookie => {
-							document.cookie = `${cookie.SIDname}=;expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
-							return window.location.reload();
-						});
-					}
-					new Toast({ content: res.message, timeout: 4000 });
-					return reject(new Error(res.message));
-				});
+			io.socket.dispatch("users.logout", res => {
+				if (res.status === "success") {
+					return lofig.get("cookie").then(cookie => {
+						document.cookie = `${cookie.SIDname}=;expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
+						return window.location.reload();
+					});
+				}
+				new Toast({ content: res.message, timeout: 4000 });
+				return reject(new Error(res.message));
 			});
 		});
 	}

frontend/src/components/modals/AddSongToQueue.vue

@@ -206,7 +206,7 @@
 </template>
 
 <script>
-import { mapState, mapActions } from "vuex";
+import { mapState, mapGetters, mapActions } from "vuex";
 
 import Toast from "toasters";
 
@@ -216,8 +216,6 @@ import PlaylistItem from "../ui/PlaylistItem.vue";
 import SearchQueryItem from "../ui/SearchQueryItem.vue";
 import Modal from "../Modal.vue";
 
-import io from "../../io";
-
 export default {
 	components: { Modal, PlaylistItem, SearchQueryItem },
 	mixins: [SearchYoutube],
@@ -226,18 +224,20 @@ export default {
 			playlists: []
 		};
 	},
-	computed: mapState({
-		loggedIn: state => state.user.auth.loggedIn,
-		station: state => state.station.station,
-		privatePlaylistQueueSelected: state =>
-			state.station.privatePlaylistQueueSelected
-	}),
+	computed: {
+		...mapState({
+			loggedIn: state => state.user.auth.loggedIn,
+			station: state => state.station.station,
+			privatePlaylistQueueSelected: state =>
+				state.station.privatePlaylistQueueSelected
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
+		})
+	},
 	mounted() {
-		io.getSocket(socket => {
-			this.socket = socket;
-			this.socket.dispatch("playlists.indexMyPlaylists", true, res => {
-				if (res.status === "success") this.playlists = res.data;
-			});
+		this.socket.dispatch("playlists.indexMyPlaylists", true, res => {
+			if (res.status === "success") this.playlists = res.data;
 		});
 	},
 	methods: {

frontend/src/components/modals/CreateCommunityStation.vue

@@ -39,11 +39,10 @@
 </template>
 
 <script>
-import { mapActions } from "vuex";
+import { mapGetters, mapActions } from "vuex";
 
 import Toast from "toasters";
 import Modal from "../Modal.vue";
-import io from "../../io";
 import validation from "../../validation";
 
 export default {
@@ -57,11 +56,9 @@ export default {
 			}
 		};
 	},
-	mounted() {
-		io.getSocket(socket => {
-			this.socket = socket;
-		});
-	},
+	computed: mapGetters({
+		socket: "websockets/getSocket"
+	}),
 	methods: {
 		submitModal() {
 			this.newCommunity.name = this.newCommunity.name.toLowerCase();

frontend/src/components/modals/CreatePlaylist.vue

@@ -33,11 +33,10 @@
 </template>
 
 <script>
-import { mapActions } from "vuex";
+import { mapActions, mapGetters } from "vuex";
 
 import Toast from "toasters";
 import Modal from "../Modal.vue";
-import io from "../../io";
 import validation from "../../validation";
 
 export default {
@@ -51,11 +50,9 @@ export default {
 			}
 		};
 	},
-	mounted() {
-		io.getSocket(socket => {
-			this.socket = socket;
-		});
-	},
+	computed: mapGetters({
+		socket: "websockets/getSocket"
+	}),
 	methods: {
 		createPlaylist() {
 			const { displayName } = this.playlist;

frontend/src/components/modals/EditNews.vue

@@ -164,10 +164,9 @@
 </template>
 
 <script>
-import { mapActions, mapState } from "vuex";
+import { mapActions, mapGetters, mapState } from "vuex";
 
 import Toast from "toasters";
-import io from "../../io";
 
 import Modal from "../Modal.vue";
 
@@ -180,27 +179,26 @@ export default {
 	computed: {
 		...mapState("modals/editNews", {
 			news: state => state.news
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
 		})
 	},
 	mounted() {
-		io.getSocket(socket => {
-			this.socket = socket;
-
-			this.socket.dispatch(`news.getNewsFromId`, this.newsId, res => {
-				if (res.status === "success") {
-					const news = res.data;
-					this.editNews(news);
-				} else {
-					new Toast({
-						content: "News with that ID not found",
-						timeout: 3000
-					});
-					this.closeModal({
-						sector: this.sector,
-						modal: "editNews"
-					});
-				}
-			});
+		this.socket.dispatch(`news.getNewsFromId`, this.newsId, res => {
+			if (res.status === "success") {
+				const news = res.data;
+				this.editNews(news);
+			} else {
+				new Toast({
+					content: "News with that ID not found",
+					timeout: 3000
+				});
+				this.closeModal({
+					sector: this.sector,
+					modal: "editNews"
+				});
+			}
 		});
 	},
 	methods: {

frontend/src/components/modals/EditPlaylist/index.vue

@@ -358,7 +358,7 @@
 </template>
 
 <script>
-import { mapState, mapActions } from "vuex";
+import { mapState, mapGetters, mapActions } from "vuex";
 import draggable from "vuedraggable";
 import Toast from "toasters";
 
@@ -368,7 +368,6 @@ import Modal from "../../Modal.vue";
 import SearchQueryItem from "../../ui/SearchQueryItem.vue";
 import PlaylistSongItem from "./components/PlaylistSongItem.vue";
 
-import io from "../../../io";
 import validation from "../../../validation";
 import utils from "../../../../js/utils";
 
@@ -396,7 +395,10 @@ export default {
 				disabled: !this.isEditable(),
 				ghostClass: "draggable-list-ghost"
 			};
-		}
+		},
+		...mapGetters({
+			socket: "websockets/getSocket"
+		})
 	},
 	watch: {
 		"search.songs.results": function checkIfSongInPlaylist(songs) {
@@ -411,70 +413,64 @@ export default {
 		}
 	},
 	mounted() {
-		io.getSocket(socket => {
-			this.socket = socket;
-
-			this.socket.dispatch("playlists.getPlaylist", this.editing, res => {
-				if (res.status === "success") {
-					this.playlist = res.data;
-					this.playlist.songs.sort((a, b) => a.position - b.position);
-				}
+		this.socket.dispatch("playlists.getPlaylist", this.editing, res => {
+			if (res.status === "success") {
+				this.playlist = res.data;
+				this.playlist.songs.sort((a, b) => a.position - b.position);
+			}
 
-				this.playlist.oldId = res.data._id;
-			});
+			this.playlist.oldId = res.data._id;
+		});
 
-			this.socket.on("event:playlist.addSong", data => {
-				if (this.playlist._id === data.playlistId)
-					this.playlist.songs.push(data.song);
-			});
+		this.socket.on("event:playlist.addSong", data => {
+			if (this.playlist._id === data.playlistId)
+				this.playlist.songs.push(data.song);
+		});
 
-			this.socket.on("event:playlist.removeSong", data => {
-				if (this.playlist._id === data.playlistId) {
-					// remove song from array of playlists
-					this.playlist.songs.forEach((song, index) => {
-						if (song.songId === data.songId)
-							this.playlist.songs.splice(index, 1);
-					});
+		this.socket.on("event:playlist.removeSong", data => {
+			if (this.playlist._id === data.playlistId) {
+				// remove song from array of playlists
+				this.playlist.songs.forEach((song, index) => {
+					if (song.songId === data.songId)
+						this.playlist.songs.splice(index, 1);
+				});
 
-					// if this song is in search results, mark it available to add to the playlist again
-					this.search.songs.results.forEach((searchItem, index) => {
-						if (data.songId === searchItem.id) {
-							this.search.songs.results[
-								index
-							].isAddedToQueue = false;
-						}
-					});
-				}
-			});
+				// if this song is in search results, mark it available to add to the playlist again
+				this.search.songs.results.forEach((searchItem, index) => {
+					if (data.songId === searchItem.id) {
+						this.search.songs.results[index].isAddedToQueue = false;
+					}
+				});
+			}
+		});
 
-			this.socket.on("event:playlist.updateDisplayName", data => {
-				if (this.playlist._id === data.playlistId)
-					this.playlist.displayName = data.displayName;
-			});
+		this.socket.on("event:playlist.updateDisplayName", data => {
+			if (this.playlist._id === data.playlistId)
+				this.playlist.displayName = data.displayName;
+		});
 
-			this.socket.on("event:playlist.repositionSongs", data => {
-				if (this.playlist._id === data.playlistId) {
-					// for each song that has a new position
-					data.songsBeingChanged.forEach(changedSong => {
-						this.playlist.songs.forEach((song, index) => {
-							// find song locally
-							if (song.songId === changedSong.songId) {
-								// change song position attribute
-								this.playlist.songs[index].position =
-									changedSong.position;
-
-								// reposition in array if needed
-								if (index !== changedSong.position - 1)
-									this.playlist.songs.splice(
-										changedSong.position - 1,
-										0,
-										this.playlist.songs.splice(index, 1)[0]
-									);
-							}
-						});
+		this.socket.on("event:playlist.repositionSongs", data => {
+			if (this.playlist._id === data.playlistId) {
+				// for each song that has a new position
+				data.songsBeingChanged.forEach(changedSong => {
+					this.playlist.songs.forEach((song, index) => {
+						// find song locally
+						if (song.songId === changedSong.songId) {
+							// change song position attribute
+							this.playlist.songs[index].position =
+								changedSong.position;
+
+							// reposition in array if needed
+							if (index !== changedSong.position - 1)
+								this.playlist.songs.splice(
+									changedSong.position - 1,
+									0,
+									this.playlist.songs.splice(index, 1)[0]
+								);
+						}
 					});
-				}
-			});
+				});
+			}
 		});
 	},
 	methods: {

frontend/src/components/modals/EditSong.vue

@@ -506,10 +506,9 @@
 </template>
 
 <script>
-import { mapState, mapActions } from "vuex";
+import { mapState, mapGetters, mapActions } from "vuex";
 import Toast from "toasters";
 
-import io from "../../io";
 import keyboardShortcuts from "../../keyboardShortcuts";
 import validation from "../../validation";
 import Modal from "../Modal.vue";
@@ -590,6 +589,9 @@ export default {
 		}),
 		...mapState("modalVisibility", {
 			modals: state => state.modals.admin
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
 		})
 	},
 	watch: {
@@ -612,162 +614,151 @@ export default {
 
 		this.useHTTPS = await lofig.get("cookie.secure");
 
-		io.getSocket(socket => {
-			this.socket = socket;
+		this.socket.dispatch(
+			`${this.songType}.getSongFromMusareId`,
+			this.songId,
+			res => {
+				if (res.status === "success") {
+					const { song } = res.data;
+					// this.song = { ...song };
+					// if (this.song.discogs === undefined)
+					// 	this.song.discogs = null;
+					this.editSong(song);
+
+					this.songDataLoaded = true;
+
+					// this.edit(res.data.song);
+
+					this.discogsQuery = this.song.title;
+
+					this.interval = setInterval(() => {
+						if (
+							this.song.duration !== -1 &&
+							this.video.paused === false &&
+							this.playerReady &&
+							this.video.player.getCurrentTime() -
+								this.song.skipDuration >
+								this.song.duration
+						) {
+							this.video.paused = false;
+							this.video.player.stopVideo();
+							this.drawCanvas();
+						}
+						if (this.playerReady) {
+							this.youtubeVideoCurrentTime = this.video.player
+								.getCurrentTime()
+								.toFixed(3);
+						}
+
+						if (this.video.paused === false) this.drawCanvas();
+					}, 200);
+
+					this.video.player = new window.YT.Player("editSongPlayer", {
+						height: 298,
+						width: 530,
+						videoId: this.song.songId,
+						host: "https://www.youtube-nocookie.com",
+						playerVars: {
+							controls: 0,
+							iv_load_policy: 3,
+							rel: 0,
+							showinfo: 0,
+							autoplay: 1
+						},
+						startSeconds: this.song.skipDuration,
+						events: {
+							onReady: () => {
+								let volume = parseInt(
+									localStorage.getItem("volume")
+								);
+								volume =
+									typeof volume === "number" ? volume : 20;
+								console.log(
+									`Seekto: ${this.song.skipDuration}`
+								);
+								this.video.player.seekTo(
+									this.song.skipDuration
+								);
+								this.video.player.setVolume(volume);
+								if (volume > 0) this.video.player.unMute();
+								this.youtubeVideoDuration = this.video.player
+									.getDuration()
+									.toFixed(3);
+								this.youtubeVideoNote = "(~)";
+								this.playerReady = true;
 
-			this.socket.dispatch(
-				`${this.songType}.getSongFromMusareId`,
-				this.songId,
-				res => {
-					if (res.status === "success") {
-						const { song } = res.data;
-						// this.song = { ...song };
-						// if (this.song.discogs === undefined)
-						// 	this.song.discogs = null;
-						this.editSong(song);
-
-						this.songDataLoaded = true;
-
-						// this.edit(res.data.song);
-
-						this.discogsQuery = this.song.title;
-
-						this.interval = setInterval(() => {
-							if (
-								this.song.duration !== -1 &&
-								this.video.paused === false &&
-								this.playerReady &&
-								this.video.player.getCurrentTime() -
-									this.song.skipDuration >
-									this.song.duration
-							) {
-								this.video.paused = false;
-								this.video.player.stopVideo();
 								this.drawCanvas();
-							}
-							if (this.playerReady) {
-								this.youtubeVideoCurrentTime = this.video.player
-									.getCurrentTime()
-									.toFixed(3);
-							}
+							},
+							onStateChange: event => {
+								this.drawCanvas();
 
-							if (this.video.paused === false) this.drawCanvas();
-						}, 200);
-
-						this.video.player = new window.YT.Player(
-							"editSongPlayer",
-							{
-								height: 298,
-								width: 530,
-								videoId: this.song.songId,
-								host: "https://www.youtube-nocookie.com",
-								playerVars: {
-									controls: 0,
-									iv_load_policy: 3,
-									rel: 0,
-									showinfo: 0,
-									autoplay: 1
-								},
-								startSeconds: this.song.skipDuration,
-								events: {
-									onReady: () => {
-										let volume = parseInt(
-											localStorage.getItem("volume")
-										);
-										volume =
-											typeof volume === "number"
-												? volume
-												: 20;
-										console.log(
-											`Seekto: ${this.song.skipDuration}`
-										);
-										this.video.player.seekTo(
+								if (event.data === 1) {
+									if (!this.video.autoPlayed) {
+										this.video.autoPlayed = true;
+										return this.video.player.stopVideo();
+									}
+
+									this.video.paused = false;
+									let youtubeDuration = this.video.player.getDuration();
+									this.youtubeVideoDuration = youtubeDuration.toFixed(
+										3
+									);
+									this.youtubeVideoNote = "";
+
+									if (this.song.duration === -1)
+										this.song.duration = youtubeDuration;
+
+									youtubeDuration -= this.song.skipDuration;
+									if (
+										this.song.duration >
+										youtubeDuration + 1
+									) {
+										this.video.player.stopVideo();
+										this.video.paused = true;
+										return new Toast({
+											content:
+												"Video can't play. Specified duration is bigger than the YouTube song duration.",
+											timeout: 4000
+										});
+									}
+									if (this.song.duration <= 0) {
+										this.video.player.stopVideo();
+										this.video.paused = true;
+										return new Toast({
+											content:
+												"Video can't play. Specified duration has to be more than 0 seconds.",
+											timeout: 4000
+										});
+									}
+
+									if (
+										this.video.player.getCurrentTime() <
+										this.song.skipDuration
+									) {
+										return this.video.player.seekTo(
 											this.song.skipDuration
 										);
-										this.video.player.setVolume(volume);
-										if (volume > 0)
-											this.video.player.unMute();
-										this.youtubeVideoDuration = this.video.player
-											.getDuration()
-											.toFixed(3);
-										this.youtubeVideoNote = "(~)";
-										this.playerReady = true;
-
-										this.drawCanvas();
-									},
-									onStateChange: event => {
-										this.drawCanvas();
-
-										if (event.data === 1) {
-											if (!this.video.autoPlayed) {
-												this.video.autoPlayed = true;
-												return this.video.player.stopVideo();
-											}
-
-											this.video.paused = false;
-											let youtubeDuration = this.video.player.getDuration();
-											this.youtubeVideoDuration = youtubeDuration.toFixed(
-												3
-											);
-											this.youtubeVideoNote = "";
-
-											if (this.song.duration === -1)
-												this.song.duration = youtubeDuration;
-
-											youtubeDuration -= this.song
-												.skipDuration;
-											if (
-												this.song.duration >
-												youtubeDuration + 1
-											) {
-												this.video.player.stopVideo();
-												this.video.paused = true;
-												return new Toast({
-													content:
-														"Video can't play. Specified duration is bigger than the YouTube song duration.",
-													timeout: 4000
-												});
-											}
-											if (this.song.duration <= 0) {
-												this.video.player.stopVideo();
-												this.video.paused = true;
-												return new Toast({
-													content:
-														"Video can't play. Specified duration has to be more than 0 seconds.",
-													timeout: 4000
-												});
-											}
-
-											if (
-												this.video.player.getCurrentTime() <
-												this.song.skipDuration
-											) {
-												return this.video.player.seekTo(
-													this.song.skipDuration
-												);
-											}
-										} else if (event.data === 2) {
-											this.video.paused = true;
-										}
-
-										return false;
 									}
+								} else if (event.data === 2) {
+									this.video.paused = true;
 								}
+
+								return false;
 							}
-						);
-					} else {
-						new Toast({
-							content: "Song with that ID not found",
-							timeout: 3000
-						});
-						this.closeModal({
-							sector: this.sector,
-							modal: "editSong"
-						});
-					}
+						}
+					});
+				} else {
+					new Toast({
+						content: "Song with that ID not found",
+						timeout: 3000
+					});
+					this.closeModal({
+						sector: this.sector,
+						modal: "editSong"
+					});
 				}
-			);
-		});
+			}
+		);
 
 		let volume = parseFloat(localStorage.getItem("volume"));
 		volume =

frontend/src/components/modals/EditStation.vue

@@ -421,12 +421,11 @@
 </template>
 
 <script>
-import { mapState, mapActions } from "vuex";
+import { mapState, mapGetters, mapActions } from "vuex";
 
 import Toast from "toasters";
 
 import Modal from "../Modal.vue";
-import io from "../../io";
 import validation from "../../validation";
 import SaveButton from "../ui/SaveButton.vue";
 
@@ -507,45 +506,38 @@ export default {
 		...mapState("modals/editStation", {
 			station: state => state.station,
 			originalStation: state => state.originalStation
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
 		})
 	},
 	mounted() {
-		io.getSocket(socket => {
-			this.socket = socket;
-
-			this.socket.dispatch(
-				`stations.getStationById`,
-				this.stationId,
-				res => {
-					if (res.status === "success") {
-						const { station } = res;
-						// this.song = { ...song };
-						// if (this.song.discogs === undefined)
-						// 	this.song.discogs = null;
-						this.editStation(station);
-
-						// this.songDataLoaded = true;
-
-						this.station.genres = JSON.parse(
-							JSON.stringify(this.station.genres)
-						);
-						this.station.blacklistedGenres = JSON.parse(
-							JSON.stringify(this.station.blacklistedGenres)
-						);
-					} else {
-						new Toast({
-							content: "Station with that ID not found",
-							timeout: 3000
-						});
-						this.closeModal({
-							sector: this.sector,
-							modal: "editStation"
-						});
-					}
-				}
-			);
-
-			return socket;
+		this.socket.dispatch(`stations.getStationById`, this.stationId, res => {
+			if (res.status === "success") {
+				const { station } = res;
+				// this.song = { ...song };
+				// if (this.song.discogs === undefined)
+				// 	this.song.discogs = null;
+				this.editStation(station);
+
+				// this.songDataLoaded = true;
+
+				this.station.genres = JSON.parse(
+					JSON.stringify(this.station.genres)
+				);
+				this.station.blacklistedGenres = JSON.parse(
+					JSON.stringify(this.station.blacklistedGenres)
+				);
+			} else {
+				new Toast({
+					content: "Station with that ID not found",
+					timeout: 3000
+				});
+				this.closeModal({
+					sector: this.sector,
+					modal: "editStation"
+				});
+			}
 		});
 	},
 	methods: {

frontend/src/components/modals/EditUser.vue

@@ -88,10 +88,9 @@
 </template>
 
 <script>
-import { mapState, mapActions } from "vuex";
+import { mapState, mapGetters, mapActions } from "vuex";
 
 import Toast from "toasters";
-import io from "../../io";
 import Modal from "../Modal.vue";
 import validation from "../../validation";
 
@@ -111,29 +110,26 @@ export default {
 	computed: {
 		...mapState("modals/editUser", {
 			user: state => state.user
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
 		})
 	},
 	mounted() {
-		io.getSocket(socket => {
-			this.socket = socket;
-
-			this.socket.dispatch(`users.getUserFromId`, this.userId, res => {
-				if (res.status === "success") {
-					const user = res.data;
-					this.editUser(user);
-				} else {
-					new Toast({
-						content: "User with that ID not found",
-						timeout: 3000
-					});
-					this.closeModal({
-						sector: this.sector,
-						modal: "editUser"
-					});
-				}
-			});
-
-			return socket;
+		this.socket.dispatch(`users.getUserFromId`, this.userId, res => {
+			if (res.status === "success") {
+				const user = res.data;
+				this.editUser(user);
+			} else {
+				new Toast({
+					content: "User with that ID not found",
+					timeout: 3000
+				});
+				this.closeModal({
+					sector: this.sector,
+					modal: "editUser"
+				});
+			}
 		});
 	},
 	methods: {

frontend/src/components/modals/Report.vue

@@ -182,11 +182,10 @@
 </template>
 
 <script>
-import { mapState, mapActions } from "vuex";
+import { mapState, mapGetters, mapActions } from "vuex";
 
 import Toast from "toasters";
 import Modal from "../Modal.vue";
-import io from "../../io";
 
 export default {
 	components: { Modal },
@@ -249,13 +248,12 @@ export default {
 			currentSong: state => state.station.currentSong,
 			previousSong: state => state.station.previousSong,
 			song: state => state.modals.report.song
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
 		})
 	},
 	mounted() {
-		io.getSocket(socket => {
-			this.socket = socket;
-		});
-
 		this.report.songId = this.currentSong.songId;
 
 		if (this.song !== null) {

frontend/src/components/modals/ViewPunishment.vue

@@ -73,11 +73,10 @@
 </template>
 
 <script>
-import { mapState, mapActions } from "vuex";
+import { mapState, mapGetters, mapActions } from "vuex";
 import { format, formatDistance, parseISO } from "date-fns"; // eslint-disable-line no-unused-vars
 
 import Toast from "toasters";
-import io from "../../io";
 import Modal from "../Modal.vue";
 import UserIdToUsername from "../common/UserIdToUsername.vue";
 
@@ -95,34 +94,31 @@ export default {
 	computed: {
 		...mapState("modals/viewPunishment", {
 			punishment: state => state.punishment
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
 		})
 	},
 	mounted() {
-		io.getSocket(socket => {
-			this.socket = socket;
-
-			this.socket.dispatch(
-				`punishments.getPunishmentById`,
-				this.punishmentId,
-				res => {
-					if (res.status === "success") {
-						const punishment = res.data;
-						this.viewPunishment(punishment);
-					} else {
-						new Toast({
-							content: "Punishment with that ID not found",
-							timeout: 3000
-						});
-						this.closeModal({
-							sector: this.sector,
-							modal: "viewPunishment"
-						});
-					}
+		this.socket.dispatch(
+			`punishments.getPunishmentById`,
+			this.punishmentId,
+			res => {
+				if (res.status === "success") {
+					const punishment = res.data;
+					this.viewPunishment(punishment);
+				} else {
+					new Toast({
+						content: "Punishment with that ID not found",
+						timeout: 3000
+					});
+					this.closeModal({
+						sector: this.sector,
+						modal: "viewPunishment"
+					});
 				}
-			);
-
-			return socket;
-		});
+			}
+		);
 	},
 	methods: {
 		...mapActions("modalVisibility", ["closeModal"]),

frontend/src/components/modals/ViewReport.vue

@@ -89,12 +89,10 @@
 </template>
 
 <script>
-import { mapActions, mapState } from "vuex";
+import { mapActions, mapGetters, mapState } from "vuex";
 import { formatDistance } from "date-fns";
 import Toast from "toasters";
 
-import io from "../../io";
-
 import UserIdToUsername from "../common/UserIdToUsername.vue";
 import Modal from "../Modal.vue";
 
@@ -107,6 +105,9 @@ export default {
 	computed: {
 		...mapState("modals/viewReport", {
 			report: state => state.report
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
 		})
 	},
 	mounted() {
@@ -114,26 +115,20 @@ export default {
 			this.closeModal({ sector: this.sector, modal: "editSong" });
 		}
 
-		io.getSocket(socket => {
-			this.socket = socket;
-
-			this.socket.dispatch(`reports.findOne`, this.reportId, res => {
-				if (res.status === "success") {
-					const report = res.data;
-					this.viewReport(report);
-				} else {
-					new Toast({
-						content: "Report with that ID not found",
-						timeout: 3000
-					});
-					this.closeModal({
-						sector: this.sector,
-						modal: "viewReport"
-					});
-				}
-			});
-
-			return socket;
+		this.socket.dispatch(`reports.findOne`, this.reportId, res => {
+			if (res.status === "success") {
+				const report = res.data;
+				this.viewReport(report);
+			} else {
+				new Toast({
+					content: "Report with that ID not found",
+					timeout: 3000
+				});
+				this.closeModal({
+					sector: this.sector,
+					modal: "viewReport"
+				});
+			}
 		});
 	},
 	methods: {

frontend/src/components/modals/WhatIsNew.vue

@@ -69,8 +69,7 @@
 
 <script>
 import { format } from "date-fns";
-
-import io from "../../io";
+import { mapGetters } from "vuex";
 
 export default {
 	data() {
@@ -79,35 +78,32 @@ export default {
 			news: null
 		};
 	},
+	computed: mapGetters({
+		socket: "websockets/getSocket"
+	}),
 	mounted() {
-		io.getSocket(true, socket => {
-			this.socket = socket;
-			this.socket.dispatch("news.newest", res => {
-				this.news = res.data;
-				if (this.news && localStorage.getItem("firstVisited")) {
-					if (localStorage.getItem("whatIsNew")) {
-						if (
-							parseInt(localStorage.getItem("whatIsNew")) <
-							res.data.createdAt
-						) {
-							this.toggleModal();
-							localStorage.setItem(
-								"whatIsNew",
-								res.data.createdAt
-							);
-						}
-					} else {
-						if (
-							parseInt(localStorage.getItem("firstVisited")) <
-							res.data.createdAt
-						) {
-							this.toggleModal();
-						}
+		this.socket.dispatch("news.newest", res => {
+			this.news = res.data;
+			if (this.news && localStorage.getItem("firstVisited")) {
+				if (localStorage.getItem("whatIsNew")) {
+					if (
+						parseInt(localStorage.getItem("whatIsNew")) <
+						res.data.createdAt
+					) {
+						this.toggleModal();
 						localStorage.setItem("whatIsNew", res.data.createdAt);
 					}
-				} else if (!localStorage.getItem("firstVisited"))
-					localStorage.setItem("firstVisited", Date.now());
-			});
+				} else {
+					if (
+						parseInt(localStorage.getItem("firstVisited")) <
+						res.data.createdAt
+					) {
+						this.toggleModal();
+					}
+					localStorage.setItem("whatIsNew", res.data.createdAt);
+				}
+			} else if (!localStorage.getItem("firstVisited"))
+				localStorage.setItem("firstVisited", Date.now());
 		});
 	},
 	methods: {

frontend/src/components/ui/AddToPlaylistDropdown.vue

@@ -41,8 +41,8 @@
 </template>
 
 <script>
+import { mapGetters } from "vuex";
 import Toast from "toasters";
-import io from "../../io";
 
 export default {
 	props: {
@@ -56,39 +56,38 @@ export default {
 			playlists: []
 		};
 	},
+	computed: mapGetters({
+		socket: "websockets/getSocket"
+	}),
 	mounted() {
-		io.getSocket(socket => {
-			this.socket = socket;
-
-			this.socket.dispatch("playlists.indexMyPlaylists", false, res => {
-				if (res.status === "success") {
-					this.playlists = res.data;
-					this.checkIfPlaylistsHaveSong();
-				}
-			});
-
-			this.socket.on("event:songs.next", () => {
+		this.socket.dispatch("playlists.indexMyPlaylists", false, res => {
+			if (res.status === "success") {
+				this.playlists = res.data;
 				this.checkIfPlaylistsHaveSong();
-			});
+			}
+		});
 
-			this.socket.on("event:playlist.create", playlist => {
-				this.playlists.push(playlist);
-			});
+		this.socket.on("event:songs.next", () => {
+			this.checkIfPlaylistsHaveSong();
+		});
 
-			this.socket.on("event:playlist.delete", playlistId => {
-				this.playlists.forEach((playlist, index) => {
-					if (playlist._id === playlistId) {
-						this.playlists.splice(index, 1);
-					}
-				});
+		this.socket.on("event:playlist.create", playlist => {
+			this.playlists.push(playlist);
+		});
+
+		this.socket.on("event:playlist.delete", playlistId => {
+			this.playlists.forEach((playlist, index) => {
+				if (playlist._id === playlistId) {
+					this.playlists.splice(index, 1);
+				}
 			});
+		});
 
-			this.socket.on("event:playlist.updateDisplayName", data => {
-				this.playlists.forEach((playlist, index) => {
-					if (playlist._id === data.playlistId) {
-						this.playlists[index].displayName = data.displayName;
-					}
-				});
+		this.socket.on("event:playlist.updateDisplayName", data => {
+			this.playlists.forEach((playlist, index) => {
+				if (playlist._id === data.playlistId) {
+					this.playlists[index].displayName = data.displayName;
+				}
 			});
 		});
 	},

frontend/src/io.js

@@ -18,6 +18,8 @@ const callbacks = {
 	}
 };
 
+const whenConnected = [];
+
 const callbackss = {};
 let callbackRef = 0;
 
@@ -25,16 +27,6 @@ export default {
 	socket: null,
 	dispatcher: null,
 
-	getSocket(...args) {
-		if (args[0] === true) {
-			if (this.socket && this.socket.readyState === 1) {
-				args[1](this.socket);
-			} else callbacks.general.persist.push(args[1]);
-		} else if (this.socket && this.socket.readyState === 1) {
-			args[0](this.socket);
-		} else callbacks.general.temp.push(args[0]);
-	},
-
 	onConnect(...args) {
 		if (args[0] === true) callbacks.onConnect.persist.push(args[1]);
 		else callbacks.onConnect.temp.push(args[0]);
@@ -111,10 +103,9 @@ export default {
 				callbackRef += 1;
 
 				if (this.readyState !== 1)
-					return new Toast({
-						content: "Cannot perform this action at this time.",
-						timeout: 8000
-					});
+					return callbacks.onConnect.temp.push(() =>
+						this.dispatch(...args)
+					);
 
 				const cb = args[args.length - 1];
 				if (typeof cb === "function") callbackss[callbackRef] = cb;
@@ -134,6 +125,8 @@ export default {
 
 			console.log("IO: SOCKET CONNECTED");
 
+			whenConnected.forEach(func => func());
+
 			callbacks.general.temp.forEach(cb => cb(this.socket));
 			callbacks.general.persist.forEach(cb => cb(this.socket));
 

frontend/src/main.js

@@ -137,6 +137,40 @@ const router = new VueRouter({
 	]
 });
 
+// const { serverDomain } = config;
+io.init({ url: "ws://localhost:8080/ws" });
+
+io.socket.on("ready", (loggedIn, role, username, userId) =>
+	store.dispatch("user/auth/authData", {
+		loggedIn,
+		role,
+		username,
+		userId
+	})
+);
+
+io.socket.on("keep.event:banned", ban =>
+	store.dispatch("user/auth/banUser", ban)
+);
+
+io.socket.on("event:user.username.changed", username =>
+	store.dispatch("user/auth/updateUsername", username)
+);
+
+io.socket.on("keep.event:user.preferences.changed", preferences => {
+	store.dispatch(
+		"user/preferences/changeAutoSkipDisliked",
+		preferences.autoSkipDisliked
+	);
+
+	store.dispatch("user/preferences/changeNightmode", preferences.nightmode);
+
+	store.dispatch(
+		"user/preferences/changeActivityLogPublic",
+		preferences.activityLogPublic
+	);
+});
+
 lofig.folder = "../config/default.json";
 lofig.fetchConfig().then(config => {
 	const { configVersion, skipConfigVersionCheck } = config;
@@ -147,45 +181,6 @@ lofig.fetchConfig().then(config => {
 		);
 		window.stop();
 	}
-
-	// const { serverDomain } = config;
-	io.init({ url: "ws://localhost:8080/ws" });
-
-	io.getSocket(socket => {
-		socket.on("ready", (loggedIn, role, username, userId) => {
-			store.dispatch("user/auth/authData", {
-				loggedIn,
-				role,
-				username,
-				userId
-			});
-		});
-
-		socket.on("keep.event:banned", ban =>
-			store.dispatch("user/auth/banUser", ban)
-		);
-
-		socket.on("event:user.username.changed", username =>
-			store.dispatch("user/auth/updateUsername", username)
-		);
-
-		socket.on("keep.event:user.preferences.changed", preferences => {
-			store.dispatch(
-				"user/preferences/changeAutoSkipDisliked",
-				preferences.autoSkipDisliked
-			);
-
-			store.dispatch(
-				"user/preferences/changeNightmode",
-				preferences.nightmode
-			);
-
-			store.dispatch(
-				"user/preferences/changeActivityLogPublic",
-				preferences.activityLogPublic
-			);
-		});
-	});
 });
 
 router.beforeEach((to, from, next) => {

frontend/src/pages/Admin/tabs/NewStatistics.vue

@@ -191,6 +191,8 @@
 </template>
 
 <script>
+import { mapGetters } from "vuex";
+
 import io from "../../../io";
 
 export default {
@@ -201,12 +203,12 @@ export default {
 			module: null
 		};
 	},
+	computed: mapGetters({
+		socket: "websockets/getSocket"
+	}),
 	mounted() {
-		io.getSocket(socket => {
-			this.socket = socket;
-			if (this.socket.readyState === 1) this.init();
-			io.onConnect(() => this.init());
-		});
+		if (this.socket.readyState === 1) this.init();
+		io.onConnect(() => this.init());
 	},
 	methods: {
 		init() {

frontend/src/pages/Admin/tabs/News.vue

@@ -215,7 +215,7 @@
 </template>
 
 <script>
-import { mapActions, mapState } from "vuex";
+import { mapActions, mapState, mapGetters } from "vuex";
 
 import Toast from "toasters";
 import io from "../../../io";
@@ -243,31 +243,28 @@ export default {
 		}),
 		...mapState("admin/news", {
 			news: state => state.news
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
 		})
 	},
 	mounted() {
-		io.getSocket(socket => {
-			this.socket = socket;
-
-			this.socket.dispatch("news.index", res =>
-				res.data.forEach(news => this.addNews(news))
-			);
+		this.socket.dispatch("news.index", res =>
+			res.data.forEach(news => this.addNews(news))
+		);
 
-			this.socket.on("event:admin.news.created", news =>
-				this.addNews(news)
-			);
+		this.socket.on("event:admin.news.created", news => this.addNews(news));
 
-			this.socket.on("event:admin.news.updated", updatedNews =>
-				this.updateNews(updatedNews)
-			);
+		this.socket.on("event:admin.news.updated", updatedNews =>
+			this.updateNews(updatedNews)
+		);
 
-			this.socket.on("event:admin.news.removed", news =>
-				this.removeNews(news._id)
-			);
+		this.socket.on("event:admin.news.removed", news =>
+			this.removeNews(news._id)
+		);
 
-			if (this.socket.readyState === 1) this.init();
-			io.onConnect(() => this.init());
-		});
+		if (this.socket.readyState === 1) this.init();
+		io.onConnect(() => this.init());
 	},
 	methods: {
 		createNews() {

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

@@ -57,7 +57,7 @@
 </template>
 
 <script>
-import { mapState, mapActions } from "vuex";
+import { mapState, mapActions, mapGetters } from "vuex";
 
 // import EditPlaylist from "../../../components/modals/EditPlaylist/index.vue";
 import UserIdToUsername from "../../../components/common/UserIdToUsername.vue";
@@ -77,14 +77,14 @@ export default {
 	computed: {
 		...mapState("modalVisibility", {
 			modals: state => state.modals.admin
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
 		})
 	},
 	mounted() {
-		io.getSocket(socket => {
-			this.socket = socket;
-			if (this.socket.readyState === 1) this.init();
-			io.onConnect(() => this.init());
-		});
+		if (this.socket.readyState === 1) this.init();
+		io.onConnect(() => this.init());
 	},
 	methods: {
 		// edit(playlist) {

frontend/src/pages/Admin/tabs/Punishments.vue

@@ -94,7 +94,7 @@
 </template>
 
 <script>
-import { mapState, mapActions } from "vuex";
+import { mapState, mapGetters, mapActions } from "vuex";
 import Toast from "toasters";
 
 import ViewPunishment from "../../../components/modals/ViewPunishment.vue";
@@ -118,19 +118,18 @@ export default {
 		},
 		...mapState("modalVisibility", {
 			modals: state => state.modals.admin
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
 		})
 	},
 	mounted() {
-		io.getSocket(socket => {
-			this.socket = socket;
+		if (this.socket.readyState === 1) this.init();
+		io.onConnect(() => this.init());
 
-			if (this.socket.readyState === 1) this.init();
-			io.onConnect(() => this.init());
-
-			socket.on("event:admin.punishment.added", punishment =>
-				this.punishments.push(punishment)
-			);
-		});
+		this.socket.on("event:admin.punishment.added", punishment =>
+			this.punishments.push(punishment)
+		);
 	},
 	methods: {
 		view(punishment) {

frontend/src/pages/Admin/tabs/QueueSongs.vue

@@ -177,8 +177,7 @@
 </template>
 
 <script>
-import { mapState, mapActions } from "vuex";
-import Vue from "vue";
+import { mapState, mapActions, mapGetters } from "vuex";
 
 import Toast from "toasters";
 
@@ -212,6 +211,9 @@ export default {
 		},
 		...mapState("modalVisibility", {
 			modals: state => state.modals.admin
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
 		})
 	},
 	watch: {
@@ -221,31 +223,27 @@ export default {
 		}
 	},
 	mounted() {
-		io.getSocket(socket => {
-			this.socket = socket;
-
-			this.socket.on("event:admin.queueSong.added", queueSong => {
-				this.songs.push(queueSong);
-			});
+		this.socket.on("event:admin.queueSong.added", queueSong => {
+			this.songs.push(queueSong);
+		});
 
-			this.socket.on("event:admin.queueSong.removed", songId => {
-				this.songs = this.songs.filter(song => {
-					return song._id !== songId;
-				});
+		this.socket.on("event:admin.queueSong.removed", songId => {
+			this.songs = this.songs.filter(song => {
+				return song._id !== songId;
 			});
+		});
 
-			this.socket.on("event:admin.queueSong.updated", updatedSong => {
-				for (let i = 0; i < this.songs.length; i += 1) {
-					const song = this.songs[i];
-					if (song._id === updatedSong._id) {
-						Vue.set(this.songs, i, updatedSong);
-					}
+		this.socket.on("event:admin.queueSong.updated", updatedSong => {
+			for (let i = 0; i < this.songs.length; i += 1) {
+				const song = this.songs[i];
+				if (song._id === updatedSong._id) {
+					this.$set(this.songs, i, updatedSong);
 				}
-			});
-
-			if (this.socket.readyState === 1) this.init();
-			io.onConnect(() => this.init());
+			}
 		});
+
+		if (this.socket.readyState === 1) this.init();
+		io.onConnect(() => this.init());
 	},
 	methods: {
 		edit(song) {

frontend/src/pages/Admin/tabs/Reports.vue

@@ -67,7 +67,7 @@
 </template>
 
 <script>
-import { mapState, mapActions } from "vuex";
+import { mapState, mapActions, mapGetters } from "vuex";
 import { formatDistance } from "date-fns";
 
 import Toast from "toasters";
@@ -87,30 +87,29 @@ export default {
 	computed: {
 		...mapState("modalVisibility", {
 			modals: state => state.modals.admin
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
 		})
 	},
 	mounted() {
-		io.getSocket(socket => {
-			this.socket = socket;
+		if (this.socket.readyState === 1) this.init();
+		io.onConnect(() => this.init());
 
-			if (this.socket.readyState === 1) this.init();
-			io.onConnect(() => this.init());
-
-			this.socket.dispatch("reports.index", res => {
-				this.reports = res.data;
-			});
+		this.socket.dispatch("reports.index", res => {
+			this.reports = res.data;
+		});
 
-			this.socket.on("event:admin.report.resolved", reportId => {
-				this.reports = this.reports.filter(report => {
-					return report._id !== reportId;
-				});
+		this.socket.on("event:admin.report.resolved", reportId => {
+			this.reports = this.reports.filter(report => {
+				return report._id !== reportId;
 			});
-
-			this.socket.on("event:admin.report.created", report =>
-				this.reports.push(report)
-			);
 		});
 
+		this.socket.on("event:admin.report.created", report =>
+			this.reports.push(report)
+		);
+
 		if (this.$route.query.id) {
 			this.socket.dispatch(
 				"reports.findOne",

frontend/src/pages/Admin/tabs/Songs.vue

@@ -200,7 +200,7 @@
 </template>
 
 <script>
-import { mapState, mapActions } from "vuex";
+import { mapState, mapActions, mapGetters } from "vuex";
 
 import Toast from "toasters";
 
@@ -298,6 +298,9 @@ export default {
 		}),
 		...mapState("admin/songs", {
 			songs: state => state.songs
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
 		})
 	},
 	watch: {
@@ -307,24 +310,18 @@ export default {
 		}
 	},
 	mounted() {
-		io.getSocket(socket => {
-			this.socket = socket;
+		this.socket.on("event:admin.song.added", song => this.addSong(song));
 
-			this.socket.on("event:admin.song.added", song =>
-				this.addSong(song)
-			);
+		this.socket.on("event:admin.song.removed", songId =>
+			this.removeSong(songId)
+		);
 
-			this.socket.on("event:admin.song.removed", songId =>
-				this.removeSong(songId)
-			);
-
-			this.socket.on("event:admin.song.updated", updatedSong =>
-				this.updateSong(updatedSong)
-			);
+		this.socket.on("event:admin.song.updated", updatedSong =>
+			this.updateSong(updatedSong)
+		);
 
-			if (this.socket.readyState === 1) this.init();
-			io.onConnect(() => this.init());
-		});
+		if (this.socket.readyState === 1) this.init();
+		io.onConnect(() => this.init());
 
 		if (this.$route.query.songId) {
 			this.socket.dispatch(

frontend/src/pages/Admin/tabs/Stations.vue

@@ -184,7 +184,7 @@
 </template>
 
 <script>
-import { mapState, mapActions } from "vuex";
+import { mapState, mapActions, mapGetters } from "vuex";
 
 import Toast from "toasters";
 import io from "../../../io";
@@ -209,23 +209,22 @@ export default {
 		}),
 		...mapState("modalVisibility", {
 			modals: state => state.modals.admin
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
 		})
 	},
 	mounted() {
-		io.getSocket(socket => {
-			this.socket = socket;
-
-			if (this.socket.readyState === 1) this.init();
-			io.onConnect(() => this.init());
+		if (this.socket.readyState === 1) this.init();
+		io.onConnect(() => this.init());
 
-			this.socket.on("event:admin.station.added", station =>
-				this.stationAdded(station)
-			);
+		this.socket.on("event:admin.station.added", station =>
+			this.stationAdded(station)
+		);
 
-			this.socket.on("event:admin.station.removed", stationId =>
-				this.stationRemoved(stationId)
-			);
-		});
+		this.socket.on("event:admin.station.removed", stationId =>
+			this.stationRemoved(stationId)
+		);
 	},
 	methods: {
 		createStation() {

frontend/src/pages/Admin/tabs/Statistics.vue

@@ -102,6 +102,7 @@
 </template>
 
 <script>
+import { mapGetters } from "vuex";
 import { Line } from "chart.js";
 import "chartjs-adapter-date-fns";
 
@@ -143,6 +144,9 @@ export default {
 			}
 		};
 	},
+	computed: mapGetters({
+		socket: "websockets/getSocket"
+	}),
 	mounted() {
 		const minuteCtx = document.getElementById("minuteChart");
 		const hourCtx = document.getElementById("hourChart");
@@ -263,12 +267,8 @@ export default {
 			}
 		});
 
-		io.getSocket(socket => {
-			this.socket = socket;
-			if (this.socket.readyState === 1) this.init();
-
-			io.onConnect(() => this.init());
-		});
+		if (this.socket.readyState === 1) this.init();
+		io.onConnect(() => this.init());
 	},
 	methods: {
 		init() {

frontend/src/pages/Admin/tabs/Users.vue

@@ -66,7 +66,7 @@
 </template>
 
 <script>
-import { mapState, mapActions } from "vuex";
+import { mapState, mapActions, mapGetters } from "vuex";
 
 import EditUser from "../../../components/modals/EditUser.vue";
 import ProfilePicture from "../../../components/ui/ProfilePicture.vue";
@@ -83,15 +83,14 @@ export default {
 	computed: {
 		...mapState("modalVisibility", {
 			modals: state => state.modals.admin
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
 		})
 	},
 	mounted() {
-		io.getSocket(socket => {
-			this.socket = socket;
-
-			if (this.socket.readyState === 1) this.init();
-			io.onConnect(() => this.init());
-		});
+		if (this.socket.readyState === 1) this.init();
+		io.onConnect(() => this.init());
 	},
 	methods: {
 		edit(user) {

frontend/src/pages/Home.vue

@@ -456,9 +456,7 @@ export default {
 	},
 	data() {
 		return {
-			recaptcha: {
-				key: ""
-			},
+			recaptcha: { key: "" },
 			stations: [],
 			searchQuery: "",
 			siteName: "Musare"
@@ -501,9 +499,6 @@ export default {
 	async mounted() {
 		this.siteName = await lofig.get("siteSettings.siteName");
 
-		// io.getSocket(socket => {
-		// 	this.socket = socket;
-
 		if (this.socket.readyState === 1) this.init();
 		io.onConnect(() => this.init());
 
@@ -650,7 +645,6 @@ export default {
 				}
 			});
 		});
-		// });
 	},
 	methods: {
 		init() {

frontend/src/pages/News.vue

@@ -84,11 +84,10 @@
 
 <script>
 import { format } from "date-fns";
-import Vue from "vue";
+import { mapGetters } from "vuex";
 
 import MainHeader from "../components/layout/MainHeader.vue";
 import MainFooter from "../components/layout/MainFooter.vue";
-import io from "../io";
 
 export default {
 	components: { MainHeader, MainFooter },
@@ -98,28 +97,28 @@ export default {
 			noFound: false
 		};
 	},
+	computed: mapGetters({
+		socket: "websockets/getSocket"
+	}),
 	mounted() {
-		io.getSocket(socket => {
-			this.socket = socket;
-			this.socket.dispatch("news.index", res => {
-				this.news = res.data;
-				if (this.news.length === 0) this.noFound = true;
-			});
-			this.socket.on("event:admin.news.created", news => {
-				this.news.unshift(news);
-				this.noFound = false;
-			});
-			this.socket.on("event:admin.news.updated", news => {
-				for (let n = 0; n < this.news.length; n += 1) {
-					if (this.news[n]._id === news._id) {
-						Vue.set(this.news, n, news);
-					}
+		this.socket.dispatch("news.index", res => {
+			this.news = res.data;
+			if (this.news.length === 0) this.noFound = true;
+		});
+		this.socket.on("event:admin.news.created", news => {
+			this.news.unshift(news);
+			this.noFound = false;
+		});
+		this.socket.on("event:admin.news.updated", news => {
+			for (let n = 0; n < this.news.length; n += 1) {
+				if (this.news[n]._id === news._id) {
+					this.$set(this.news, n, news);
 				}
-			});
-			this.socket.on("event:admin.news.removed", news => {
-				this.news = this.news.filter(item => item._id !== news._id);
-				if (this.news.length === 0) this.noFound = true;
-			});
+			}
+		});
+		this.socket.on("event:admin.news.removed", news => {
+			this.news = this.news.filter(item => item._id !== news._id);
+			if (this.news.length === 0) this.noFound = true;
 		});
 	},
 	methods: {

frontend/src/pages/Profile/index.vue

@@ -84,7 +84,7 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapState, mapGetters } from "vuex";
 import { format, parseISO } from "date-fns";
 
 import TabQueryHandler from "../../mixins/TabQueryHandler.vue";
@@ -96,8 +96,6 @@ import ProfilePicture from "../../components/ui/ProfilePicture.vue";
 import MainHeader from "../../components/layout/MainHeader.vue";
 import MainFooter from "../../components/layout/MainFooter.vue";
 
-import io from "../../io";
-
 export default {
 	components: {
 		MainHeader,
@@ -124,6 +122,9 @@ export default {
 			...mapState("modalVisibility", {
 				modals: state => state.modals.station
 			})
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
 		})
 	},
 	mounted() {
@@ -133,29 +134,25 @@ export default {
 		)
 			this.tab = this.$route.query.tab;
 
-		io.getSocket(socket => {
-			this.socket = socket;
-
-			this.socket.dispatch(
-				"users.findByUsername",
-				this.$route.params.username,
-				res => {
-					if (res.status === "error" || res.status === "failure")
-						this.$router.push("/404");
-					else {
-						this.user = res.data;
-
-						this.user.createdAt = format(
-							parseISO(this.user.createdAt),
-							"MMMM do yyyy"
-						);
-
-						this.isUser = true;
-						this.userId = this.user._id;
-					}
+		this.socket.dispatch(
+			"users.findByUsername",
+			this.$route.params.username,
+			res => {
+				if (res.status === "error" || res.status === "failure")
+					this.$router.push("/404");
+				else {
+					this.user = res.data;
+
+					this.user.createdAt = format(
+						parseISO(this.user.createdAt),
+						"MMMM do yyyy"
+					);
+
+					this.isUser = true;
+					this.userId = this.user._id;
 				}
-			);
-		});
+			}
+		);
 	}
 };
 </script>

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

@@ -90,9 +90,7 @@
 
 <script>
 import draggable from "vuedraggable";
-import { mapActions, mapState } from "vuex";
-
-import io from "../../../io";
+import { mapActions, mapState, mapGetters } from "vuex";
 
 import SortablePlaylists from "../../../mixins/SortablePlaylists.vue";
 import PlaylistItem from "../../../components/ui/PlaylistItem.vue";
@@ -126,7 +124,10 @@ export default {
 			set(playlists) {
 				this.$store.commit("user/playlists/setPlaylists", playlists);
 			}
-		}
+		},
+		...mapGetters({
+			socket: "websockets/getSocket"
+		})
 	},
 	mounted() {
 		if (
@@ -135,86 +136,82 @@ export default {
 		)
 			this.tab = this.$route.query.tab;
 
-		io.getSocket(socket => {
-			this.socket = socket;
-
-			if (this.myUserId !== this.userId) {
-				this.socket.dispatch(
-					"apis.joinRoom",
-					`profile-${this.userId}-playlists`,
-					() => {}
-				);
-			}
+		if (this.myUserId !== this.userId) {
+			this.socket.dispatch(
+				"apis.joinRoom",
+				`profile-${this.userId}-playlists`,
+				() => {}
+			);
+		}
 
-			this.socket.dispatch("playlists.indexForUser", this.userId, res => {
-				if (res.status === "success") this.setPlaylists(res.data);
-				this.orderOfPlaylists = this.calculatePlaylistOrder(); // order in regards to the database
-			});
+		this.socket.dispatch("playlists.indexForUser", this.userId, res => {
+			if (res.status === "success") this.setPlaylists(res.data);
+			this.orderOfPlaylists = this.calculatePlaylistOrder(); // order in regards to the database
+		});
 
-			this.socket.on("event:playlist.create", playlist => {
-				this.playlists.push(playlist);
-			});
+		this.socket.on("event:playlist.create", playlist => {
+			this.playlists.push(playlist);
+		});
 
-			this.socket.on("event:playlist.delete", playlistId => {
-				this.playlists.forEach((playlist, index) => {
-					if (playlist._id === playlistId) {
-						this.playlists.splice(index, 1);
-					}
-				});
+		this.socket.on("event:playlist.delete", playlistId => {
+			this.playlists.forEach((playlist, index) => {
+				if (playlist._id === playlistId) {
+					this.playlists.splice(index, 1);
+				}
 			});
+		});
 
-			this.socket.on("event:playlist.addSong", data => {
-				this.playlists.forEach((playlist, index) => {
-					if (playlist._id === data.playlistId) {
-						this.playlists[index].songs.push(data.song);
-					}
-				});
+		this.socket.on("event:playlist.addSong", data => {
+			this.playlists.forEach((playlist, index) => {
+				if (playlist._id === data.playlistId) {
+					this.playlists[index].songs.push(data.song);
+				}
 			});
+		});
 
-			this.socket.on("event:playlist.removeSong", data => {
-				this.playlists.forEach((playlist, index) => {
-					if (playlist._id === data.playlistId) {
-						this.playlists[index].songs.forEach((song, index2) => {
-							if (song.songId === data.songId) {
-								this.playlists[index].songs.splice(index2, 1);
-							}
-						});
-					}
-				});
+		this.socket.on("event:playlist.removeSong", data => {
+			this.playlists.forEach((playlist, index) => {
+				if (playlist._id === data.playlistId) {
+					this.playlists[index].songs.forEach((song, index2) => {
+						if (song.songId === data.songId) {
+							this.playlists[index].songs.splice(index2, 1);
+						}
+					});
+				}
 			});
+		});
 
-			this.socket.on("event:playlist.updateDisplayName", data => {
-				this.playlists.forEach((playlist, index) => {
-					if (playlist._id === data.playlistId) {
-						this.playlists[index].displayName = data.displayName;
-					}
-				});
+		this.socket.on("event:playlist.updateDisplayName", data => {
+			this.playlists.forEach((playlist, index) => {
+				if (playlist._id === data.playlistId) {
+					this.playlists[index].displayName = data.displayName;
+				}
 			});
+		});
 
-			this.socket.on("event:playlist.updatePrivacy", data => {
-				this.playlists.forEach((playlist, index) => {
-					if (playlist._id === data.playlist._id) {
-						this.playlists[index].privacy = data.playlist.privacy;
-					}
-				});
+		this.socket.on("event:playlist.updatePrivacy", data => {
+			this.playlists.forEach((playlist, index) => {
+				if (playlist._id === data.playlist._id) {
+					this.playlists[index].privacy = data.playlist.privacy;
+				}
 			});
+		});
 
-			this.socket.on(
-				"event:user.orderOfPlaylists.changed",
-				orderOfPlaylists => {
-					const sortedPlaylists = [];
+		this.socket.on(
+			"event:user.orderOfPlaylists.changed",
+			orderOfPlaylists => {
+				const sortedPlaylists = [];
 
-					this.playlists.forEach(playlist => {
-						sortedPlaylists[
-							orderOfPlaylists.indexOf(playlist._id)
-						] = playlist;
-					});
+				this.playlists.forEach(playlist => {
+					sortedPlaylists[
+						orderOfPlaylists.indexOf(playlist._id)
+					] = playlist;
+				});
 
-					this.playlists = sortedPlaylists;
-					this.orderOfPlaylists = this.calculatePlaylistOrder();
-				}
-			);
-		});
+				this.playlists = sortedPlaylists;
+				this.orderOfPlaylists = this.calculatePlaylistOrder();
+			}
+		);
 	},
 	methods: {
 		showPlaylist(playlistId) {

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

@@ -39,11 +39,9 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapState, mapGetters } from "vuex";
 import Toast from "toasters";
 
-import io from "../../../io";
-
 import ActivityItem from "../../../components/ui/ActivityItem.vue";
 
 export default {
@@ -70,46 +68,45 @@ export default {
 			}),
 			myUserId: state => state.user.auth.userId,
 			username: state => state.user.auth.username
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
 		})
 	},
 	mounted() {
-		io.getSocket(socket => {
-			this.socket = socket;
-
-			if (this.myUserId !== this.userId) {
-				this.socket.dispatch(
-					"apis.joinRoom",
-					`profile-${this.userId}-activities`,
-					res => {
-						console.log("res of joining activities room", res);
-					}
-				);
-			}
+		if (this.myUserId !== this.userId) {
+			this.socket.dispatch(
+				"apis.joinRoom",
+				`profile-${this.userId}-activities`,
+				res => {
+					console.log("res of joining activities room", res);
+				}
+			);
+		}
 
-			this.socket.dispatch("activities.length", this.userId, length => {
-				this.maxPosition = Math.ceil(length / 15) + 1;
-				this.getSet();
-			});
+		this.socket.dispatch("activities.length", this.userId, length => {
+			this.maxPosition = Math.ceil(length / 15) + 1;
+			this.getSet();
+		});
 
-			this.socket.on("event:activity.create", activity => {
-				this.activities.unshift(activity);
-				this.offsettedFromNextSet += 1;
-			});
+		this.socket.on("event:activity.create", activity => {
+			this.activities.unshift(activity);
+			this.offsettedFromNextSet += 1;
+		});
 
-			this.socket.on("event:activity.hide", activityId => {
-				this.activities = this.activities.filter(
-					activity => activity._id !== activityId
-				);
+		this.socket.on("event:activity.hide", activityId => {
+			this.activities = this.activities.filter(
+				activity => activity._id !== activityId
+			);
 
-				this.offsettedFromNextSet -= 1;
-			});
+			this.offsettedFromNextSet -= 1;
+		});
 
-			this.socket.on("event:activity.removeAllForUser", () => {
-				this.activities = [];
-				this.position = 1;
-				this.maxPosition = 1;
-				this.offsettedFromNextSet = 0;
-			});
+		this.socket.on("event:activity.removeAllForUser", () => {
+			this.activities = [];
+			this.position = 1;
+			this.maxPosition = 1;
+			this.offsettedFromNextSet = 0;
 		});
 	},
 	methods: {

frontend/src/pages/ResetPassword.vue

@@ -227,12 +227,12 @@
 
 <script>
 import Toast from "toasters";
+import { mapGetters } from "vuex";
 
 import MainHeader from "../components/layout/MainHeader.vue";
 import MainFooter from "../components/layout/MainFooter.vue";
 import InputHelpBox from "../components/ui/InputHelpBox.vue";
 
-import io from "../io";
 import validation from "../validation";
 
 export default {
@@ -271,6 +271,9 @@ export default {
 			step: 1
 		};
 	},
+	computed: mapGetters({
+		socket: "websockets/getSocket"
+	}),
 	watch: {
 		email(value) {
 			if (
@@ -305,12 +308,6 @@ export default {
 			this.checkPasswordMatch(this.newPassword, value);
 		}
 	},
-	mounted() {
-		io.getSocket(socket => {
-			this.socket = socket;
-		});
-	},
-
 	methods: {
 		checkPasswordMatch(newPassword, newPasswordAgain) {
 			if (newPasswordAgain !== newPassword) {

frontend/src/pages/Settings/index.vue

@@ -46,7 +46,7 @@
 </template>
 
 <script>
-import { mapActions } from "vuex";
+import { mapActions, mapGetters } from "vuex";
 import Toast from "toasters";
 
 import TabQueryHandler from "../../mixins/TabQueryHandler.vue";
@@ -59,8 +59,6 @@ import AccountSettings from "./tabs/Account.vue";
 import ProfileSettings from "./tabs/Profile.vue";
 import PreferencesSettings from "./tabs/Preferences.vue";
 
-import io from "../../io";
-
 export default {
 	components: {
 		MainHeader,
@@ -76,6 +74,9 @@ export default {
 			tab: "profile"
 		};
 	},
+	computed: mapGetters({
+		socket: "websockets/getSocket"
+	}),
 	mounted() {
 		if (
 			this.$route.query.tab === "profile" ||
@@ -87,48 +88,44 @@ export default {
 
 		this.localNightmode = this.nightmode;
 
-		io.getSocket(socket => {
-			this.socket = socket;
-
-			this.socket.dispatch("users.findBySession", res => {
-				if (res.status === "success") {
-					this.setUser(res.data);
-				} else {
-					new Toast({
-						content: "You're not currently signed in.",
-						timeout: 3000
-					});
-				}
-			});
-
-			this.socket.on("event:user.linkPassword", () =>
-				this.updateOriginalUser({
-					property: "password",
-					value: true
-				})
-			);
-
-			this.socket.on("event:user.unlinkPassword", () =>
-				this.updateOriginalUser({
-					property: "password",
-					value: false
-				})
-			);
-
-			this.socket.on("event:user.linkGithub", () =>
-				this.updateOriginalUser({
-					property: "github",
-					value: true
-				})
-			);
-
-			this.socket.on("event:user.unlinkGithub", () =>
-				this.updateOriginalUser({
-					property: "github",
-					value: false
-				})
-			);
+		this.socket.dispatch("users.findBySession", res => {
+			if (res.status === "success") {
+				this.setUser(res.data);
+			} else {
+				new Toast({
+					content: "You're not currently signed in.",
+					timeout: 3000
+				});
+			}
 		});
+
+		this.socket.on("event:user.linkPassword", () =>
+			this.updateOriginalUser({
+				property: "password",
+				value: true
+			})
+		);
+
+		this.socket.on("event:user.unlinkPassword", () =>
+			this.updateOriginalUser({
+				property: "password",
+				value: false
+			})
+		);
+
+		this.socket.on("event:user.linkGithub", () =>
+			this.updateOriginalUser({
+				property: "github",
+				value: true
+			})
+		);
+
+		this.socket.on("event:user.unlinkGithub", () =>
+			this.updateOriginalUser({
+				property: "github",
+				value: false
+			})
+		);
 	},
 	methods: mapActions("settings", ["updateOriginalUser", "setUser"])
 };

frontend/src/pages/Settings/tabs/Account.vue

@@ -96,11 +96,10 @@
 </template>
 
 <script>
-import { mapState, mapActions } from "vuex";
+import { mapState, mapActions, mapGetters } from "vuex";
 import Toast from "toasters";
 
 import validation from "../../../validation";
-import io from "../../../io";
 
 import InputHelpBox from "../../../components/ui/InputHelpBox.vue";
 import SaveButton from "../../../components/ui/SaveButton.vue";
@@ -123,11 +122,16 @@ export default {
 			}
 		};
 	},
-	computed: mapState({
-		userId: state => state.user.auth.userId,
-		originalUser: state => state.settings.originalUser,
-		modifiedUser: state => state.settings.modifiedUser
-	}),
+	computed: {
+		...mapState({
+			userId: state => state.user.auth.userId,
+			originalUser: state => state.settings.originalUser,
+			modifiedUser: state => state.settings.modifiedUser
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
+		})
+	},
 	watch: {
 		// prettier-ignore
 		// eslint-disable-next-line func-names
@@ -167,11 +171,6 @@ export default {
 			}
 		}
 	},
-	mounted() {
-		io.getSocket(socket => {
-			this.socket = socket;
-		});
-	},
 	methods: {
 		onInputBlur(inputName) {
 			this.validation[inputName].entered = true;

frontend/src/pages/Settings/tabs/Preferences.vue

@@ -41,10 +41,9 @@
 </template>
 
 <script>
-import { mapState, mapActions } from "vuex";
+import { mapState, mapActions, mapGetters } from "vuex";
 import Toast from "toasters";
 
-import io from "../../../io";
 import SaveButton from "../../../components/ui/SaveButton.vue";
 
 export default {
@@ -56,28 +55,29 @@ export default {
 			localActivityLogPublic: false
 		};
 	},
-	computed: mapState({
-		nightmode: state => state.user.preferences.nightmode,
-		autoSkipDisliked: state => state.user.preferences.autoSkipDisliked,
-		activityLogPublic: state => state.user.preferences.activityLogPublic
-	}),
+	computed: {
+		...mapState({
+			nightmode: state => state.user.preferences.nightmode,
+			autoSkipDisliked: state => state.user.preferences.autoSkipDisliked,
+			activityLogPublic: state => state.user.preferences.activityLogPublic
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
+		})
+	},
 	mounted() {
-		io.getSocket(socket => {
-			this.socket = socket;
-
-			this.socket.dispatch("users.getPreferences", res => {
-				if (res.status === "success") {
-					this.localNightmode = res.data.nightmode;
-					this.localAutoSkipDisliked = res.data.autoSkipDisliked;
-					this.localActivityLogPublic = res.data.activityLogPublic;
-				}
-			});
+		this.socket.dispatch("users.getPreferences", res => {
+			if (res.status === "success") {
+				this.localNightmode = res.data.nightmode;
+				this.localAutoSkipDisliked = res.data.autoSkipDisliked;
+				this.localActivityLogPublic = res.data.activityLogPublic;
+			}
+		});
 
-			socket.on("keep.event:user.preferences.changed", preferences => {
-				this.localNightmode = preferences.nightmode;
-				this.localAutoSkipDisliked = preferences.autoSkipDisliked;
-				this.localActivityLogPublic = preferences.activityLogPublic;
-			});
+		this.socket.on("keep.event:user.preferences.changed", preferences => {
+			this.localNightmode = preferences.nightmode;
+			this.localAutoSkipDisliked = preferences.autoSkipDisliked;
+			this.localActivityLogPublic = preferences.activityLogPublic;
 		});
 	},
 	methods: {

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

@@ -73,22 +73,26 @@
 </template>
 
 <script>
-import { mapState, mapActions } from "vuex";
+import { mapState, mapActions, mapGetters } from "vuex";
 import Toast from "toasters";
 
 import validation from "../../../validation";
-import io from "../../../io";
 
 import ProfilePicture from "../../../components/ui/ProfilePicture.vue";
 import SaveButton from "../../../components/ui/SaveButton.vue";
 
 export default {
 	components: { ProfilePicture, SaveButton },
-	computed: mapState({
-		userId: state => state.user.auth.userId,
-		originalUser: state => state.settings.originalUser,
-		modifiedUser: state => state.settings.modifiedUser
-	}),
+	computed: {
+		...mapState({
+			userId: state => state.user.auth.userId,
+			originalUser: state => state.settings.originalUser,
+			modifiedUser: state => state.settings.modifiedUser
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
+		})
+	},
 	watch: {
 		"modifiedUser.avatar.type": function watchAvatarType(newType, oldType) {
 			if (
@@ -104,11 +108,6 @@ export default {
 			}
 		}
 	},
-	mounted() {
-		io.getSocket(socket => {
-			this.socket = socket;
-		});
-	},
 	methods: {
 		saveChanges() {
 			const nameChanged =

frontend/src/pages/Settings/tabs/Security.vue

@@ -147,7 +147,6 @@
 import Toast from "toasters";
 import { mapGetters, mapState } from "vuex";
 
-import io from "../../../io";
 import validation from "../../../validation";
 
 import InputHelpBox from "../../../components/ui/InputHelpBox.vue";
@@ -171,7 +170,8 @@ export default {
 	computed: {
 		...mapGetters({
 			isPasswordLinked: "settings/isPasswordLinked",
-			isGithubLinked: "settings/isGithubLinked"
+			isGithubLinked: "settings/isGithubLinked",
+			socket: "websockets/getSocket"
 		}),
 		...mapState({
 			userId: state => state.user.auth.userId
@@ -195,10 +195,6 @@ export default {
 		}
 	},
 	async mounted() {
-		io.getSocket(socket => {
-			this.socket = socket;
-		});
-
 		this.serverDomain = await lofig.get("serverDomain");
 	},
 	methods: {

frontend/src/pages/Station/components/Sidebar/MyPlaylists.vue

@@ -64,11 +64,10 @@
 </template>
 
 <script>
-import { mapState, mapActions } from "vuex";
+import { mapState, mapActions, mapGetters } from "vuex";
 import Toast from "toasters";
 import draggable from "vuedraggable";
 
-import io from "../../../../io";
 import PlaylistItem from "../../../../components/ui/PlaylistItem.vue";
 import SortablePlaylists from "../../../../mixins/SortablePlaylists.vue";
 
@@ -80,83 +79,84 @@ export default {
 			playlists: []
 		};
 	},
-	computed: mapState({
-		station: state => state.station.station
-	}),
+	computed: {
+		...mapState({
+			station: state => state.station.station
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
+		})
+	},
 	mounted() {
-		io.getSocket(socket => {
-			this.socket = socket;
-
-			/** Get playlists for user */
-			this.socket.dispatch("playlists.indexMyPlaylists", true, res => {
-				if (res.status === "success") this.playlists = res.data;
-				this.orderOfPlaylists = this.calculatePlaylistOrder(); // order in regards to the database
-			});
+		/** Get playlists for user */
+		this.socket.dispatch("playlists.indexMyPlaylists", true, res => {
+			if (res.status === "success") this.playlists = res.data;
+			this.orderOfPlaylists = this.calculatePlaylistOrder(); // order in regards to the database
+		});
 
-			this.socket.on("event:playlist.create", playlist => {
-				this.playlists.push(playlist);
-			});
+		this.socket.on("event:playlist.create", playlist => {
+			this.playlists.push(playlist);
+		});
 
-			this.socket.on("event:playlist.delete", playlistId => {
-				this.playlists.forEach((playlist, index) => {
-					if (playlist._id === playlistId) {
-						this.playlists.splice(index, 1);
-					}
-				});
+		this.socket.on("event:playlist.delete", playlistId => {
+			this.playlists.forEach((playlist, index) => {
+				if (playlist._id === playlistId) {
+					this.playlists.splice(index, 1);
+				}
 			});
+		});
 
-			this.socket.on("event:playlist.addSong", data => {
-				this.playlists.forEach((playlist, index) => {
-					if (playlist._id === data.playlistId) {
-						this.playlists[index].songs.push(data.song);
-					}
-				});
+		this.socket.on("event:playlist.addSong", data => {
+			this.playlists.forEach((playlist, index) => {
+				if (playlist._id === data.playlistId) {
+					this.playlists[index].songs.push(data.song);
+				}
 			});
+		});
 
-			this.socket.on("event:playlist.removeSong", data => {
-				this.playlists.forEach((playlist, index) => {
-					if (playlist._id === data.playlistId) {
-						this.playlists[index].songs.forEach((song, index2) => {
-							if (song.songId === data.songId) {
-								this.playlists[index].songs.splice(index2, 1);
-							}
-						});
-					}
-				});
+		this.socket.on("event:playlist.removeSong", data => {
+			this.playlists.forEach((playlist, index) => {
+				if (playlist._id === data.playlistId) {
+					this.playlists[index].songs.forEach((song, index2) => {
+						if (song.songId === data.songId) {
+							this.playlists[index].songs.splice(index2, 1);
+						}
+					});
+				}
 			});
+		});
 
-			this.socket.on("event:playlist.updateDisplayName", data => {
-				this.playlists.forEach((playlist, index) => {
-					if (playlist._id === data.playlistId) {
-						this.playlists[index].displayName = data.displayName;
-					}
-				});
+		this.socket.on("event:playlist.updateDisplayName", data => {
+			this.playlists.forEach((playlist, index) => {
+				if (playlist._id === data.playlistId) {
+					this.playlists[index].displayName = data.displayName;
+				}
 			});
+		});
 
-			this.socket.on("event:playlist.updatePrivacy", data => {
-				this.playlists.forEach((playlist, index) => {
-					if (playlist._id === data.playlist._id) {
-						this.playlists[index].privacy = data.playlist.privacy;
-					}
-				});
+		this.socket.on("event:playlist.updatePrivacy", data => {
+			this.playlists.forEach((playlist, index) => {
+				if (playlist._id === data.playlist._id) {
+					this.playlists[index].privacy = data.playlist.privacy;
+				}
 			});
+		});
 
-			this.socket.on(
-				"event:user.orderOfPlaylists.changed",
-				orderOfPlaylists => {
-					const sortedPlaylists = [];
+		this.socket.on(
+			"event:user.orderOfPlaylists.changed",
+			orderOfPlaylists => {
+				const sortedPlaylists = [];
 
-					this.playlists.forEach(playlist => {
-						sortedPlaylists[
-							orderOfPlaylists.indexOf(playlist._id)
-						] = playlist;
-					});
+				this.playlists.forEach(playlist => {
+					sortedPlaylists[
+						orderOfPlaylists.indexOf(playlist._id)
+					] = playlist;
+				});
 
-					this.playlists = sortedPlaylists;
-					this.orderOfPlaylists = this.calculatePlaylistOrder();
-				}
-			);
-		});
+				this.playlists = sortedPlaylists;
+				this.orderOfPlaylists = this.calculatePlaylistOrder();
+			}
+		);
 	},
 	methods: {
 		edit(id) {

frontend/src/pages/Station/index.vue

@@ -495,7 +495,7 @@
 </template>
 
 <script>
-import { mapState, mapActions } from "vuex";
+import { mapState, mapActions, mapGetters } from "vuex";
 import Toast from "toasters";
 import { ContentLoader } from "vue-content-loader";
 
@@ -582,6 +582,9 @@ export default {
 			role: state => state.user.auth.role,
 			nightmode: state => state.user.preferences.nightmode,
 			autoSkipDisliked: state => state.user.preferences.autoSkipDisliked
+		}),
+		...mapGetters({
+			socket: "websockets/getSocket"
 		})
 	},
 	mounted() {
@@ -595,251 +598,244 @@ export default {
 
 		window.stationInterval = 0;
 
-		io.getSocket(socket => {
-			this.socket = socket;
-
-			if (this.socket.readyState === 1) this.join();
-			io.onConnect(() => {
-				console.log("station page connect", this.socket.readyState);
-				this.join();
-			});
+		if (this.socket.readyState === 1) this.join();
+		io.onConnect(() => {
+			console.log("station page connect", this.socket.readyState);
+			this.join();
+		});
 
-			this.socket.dispatch(
-				"stations.existsByName",
-				this.stationIdentifier,
-				res => {
-					if (res.status === "failure" || !res.exists) {
-						// station identifier may be using stationid instead
-						this.socket.dispatch(
-							"stations.existsById",
-							this.stationIdentifier,
-							res => {
-								if (res.status === "failure" || !res.exists) {
-									this.loading = false;
-									this.exists = false;
-								}
+		this.socket.dispatch(
+			"stations.existsByName",
+			this.stationIdentifier,
+			res => {
+				if (res.status === "failure" || !res.exists) {
+					// station identifier may be using stationid instead
+					this.socket.dispatch(
+						"stations.existsById",
+						this.stationIdentifier,
+						res => {
+							if (res.status === "failure" || !res.exists) {
+								this.loading = false;
+								this.exists = false;
 							}
-						);
-					}
+						}
+					);
 				}
-			);
+			}
+		);
 
-			this.socket.on("event:songs.next", data => {
-				const previousSong = this.currentSong.songId
-					? this.currentSong
-					: null;
+		this.socket.on("event:songs.next", data => {
+			const previousSong = this.currentSong.songId
+				? this.currentSong
+				: null;
 
-				this.updatePreviousSong(previousSong);
+			this.updatePreviousSong(previousSong);
 
-				const { currentSong } = data;
+			const { currentSong } = data;
 
-				if (currentSong && !currentSong.thumbnail)
-					currentSong.ytThumbnail = `https://img.youtube.com/vi/${currentSong.songId}/mqdefault.jpg`;
+			if (currentSong && !currentSong.thumbnail)
+				currentSong.ytThumbnail = `https://img.youtube.com/vi/${currentSong.songId}/mqdefault.jpg`;
 
-				this.updateCurrentSong(currentSong || {});
+			this.updateCurrentSong(currentSong || {});
 
-				this.startedAt = data.startedAt;
-				this.updateStationPaused(data.paused);
-				this.timePaused = data.timePaused;
+			this.startedAt = data.startedAt;
+			this.updateStationPaused(data.paused);
+			this.timePaused = data.timePaused;
 
-				if (currentSong) {
-					this.updateNoSong(false);
+			if (currentSong) {
+				this.updateNoSong(false);
 
-					if (this.currentSong.artists)
-						this.currentSong.artists = this.currentSong.artists.join(
-							", "
-						);
+				if (this.currentSong.artists)
+					this.currentSong.artists = this.currentSong.artists.join(
+						", "
+					);
 
-					if (!this.playerReady) this.youtubeReady();
-					else this.playVideo();
+				if (!this.playerReady) this.youtubeReady();
+				else this.playVideo();
 
-					this.socket.dispatch(
-						"songs.getOwnSongRatings",
-						data.currentSong.songId,
-						song => {
-							if (this.currentSong.songId === song.songId) {
-								this.liked = song.liked;
-								this.disliked = song.disliked;
-
-								if (
-									this.autoSkipDisliked &&
-									song.disliked === true
-								) {
-									this.voteSkipStation();
-									new Toast({
-										content:
-											"Automatically voted to skip disliked song.",
-										timeout: 4000
-									});
-								}
+				this.socket.dispatch(
+					"songs.getOwnSongRatings",
+					data.currentSong.songId,
+					song => {
+						if (this.currentSong.songId === song.songId) {
+							this.liked = song.liked;
+							this.disliked = song.disliked;
+
+							if (
+								this.autoSkipDisliked &&
+								song.disliked === true
+							) {
+								this.voteSkipStation();
+								new Toast({
+									content:
+										"Automatically voted to skip disliked song.",
+									timeout: 4000
+								});
 							}
 						}
-					);
-				} else {
-					if (this.playerReady) this.player.pauseVideo();
-					this.updateNoSong(true);
-				}
-
-				let isInQueue = false;
+					}
+				);
+			} else {
+				if (this.playerReady) this.player.pauseVideo();
+				this.updateNoSong(true);
+			}
 
-				this.songsList.forEach(queueSong => {
-					if (queueSong.requestedBy === this.userId) isInQueue = true;
-				});
+			let isInQueue = false;
 
-				if (
-					!isInQueue &&
-					this.privatePlaylistQueueSelected &&
-					(this.automaticallyRequestedSongId !==
-						this.currentSong.songId ||
-						!this.currentSong.songId)
-				) {
-					this.addFirstPrivatePlaylistSongToQueue();
-				}
+			this.songsList.forEach(queueSong => {
+				if (queueSong.requestedBy === this.userId) isInQueue = true;
 			});
 
-			this.socket.on("event:stations.pause", data => {
-				this.pausedAt = data.pausedAt;
-				this.updateStationPaused(true);
-				this.pauseLocalPlayer();
-			});
+			if (
+				!isInQueue &&
+				this.privatePlaylistQueueSelected &&
+				(this.automaticallyRequestedSongId !==
+					this.currentSong.songId ||
+					!this.currentSong.songId)
+			) {
+				this.addFirstPrivatePlaylistSongToQueue();
+			}
+		});
 
-			this.socket.on("event:stations.resume", data => {
-				this.timePaused = data.timePaused;
-				this.updateStationPaused(false);
-				if (!this.localPaused) this.resumeLocalPlayer();
-			});
+		this.socket.on("event:stations.pause", data => {
+			this.pausedAt = data.pausedAt;
+			this.updateStationPaused(true);
+			this.pauseLocalPlayer();
+		});
 
-			this.socket.on("event:stations.remove", () => {
-				window.location.href = "/";
-				return true;
-			});
+		this.socket.on("event:stations.resume", data => {
+			this.timePaused = data.timePaused;
+			this.updateStationPaused(false);
+			if (!this.localPaused) this.resumeLocalPlayer();
+		});
 
-			this.socket.on("event:song.like", data => {
-				if (!this.noSong) {
-					if (data.songId === this.currentSong.songId) {
-						this.currentSong.dislikes = data.dislikes;
-						this.currentSong.likes = data.likes;
-					}
+		this.socket.on("event:stations.remove", () => {
+			window.location.href = "/";
+			return true;
+		});
+
+		this.socket.on("event:song.like", data => {
+			if (!this.noSong) {
+				if (data.songId === this.currentSong.songId) {
+					this.currentSong.dislikes = data.dislikes;
+					this.currentSong.likes = data.likes;
 				}
-			});
+			}
+		});
 
-			this.socket.on("event:song.dislike", data => {
-				if (!this.noSong) {
-					if (data.songId === this.currentSong.songId) {
-						this.currentSong.dislikes = data.dislikes;
-						this.currentSong.likes = data.likes;
-					}
+		this.socket.on("event:song.dislike", data => {
+			if (!this.noSong) {
+				if (data.songId === this.currentSong.songId) {
+					this.currentSong.dislikes = data.dislikes;
+					this.currentSong.likes = data.likes;
 				}
-			});
+			}
+		});
 
-			this.socket.on("event:song.unlike", data => {
-				if (!this.noSong) {
-					if (data.songId === this.currentSong.songId) {
-						this.currentSong.dislikes = data.dislikes;
-						this.currentSong.likes = data.likes;
-					}
+		this.socket.on("event:song.unlike", data => {
+			if (!this.noSong) {
+				if (data.songId === this.currentSong.songId) {
+					this.currentSong.dislikes = data.dislikes;
+					this.currentSong.likes = data.likes;
 				}
-			});
+			}
+		});
 
-			this.socket.on("event:song.undislike", data => {
-				if (!this.noSong) {
-					if (data.songId === this.currentSong.songId) {
-						this.currentSong.dislikes = data.dislikes;
-						this.currentSong.likes = data.likes;
-					}
+		this.socket.on("event:song.undislike", data => {
+			if (!this.noSong) {
+				if (data.songId === this.currentSong.songId) {
+					this.currentSong.dislikes = data.dislikes;
+					this.currentSong.likes = data.likes;
 				}
-			});
+			}
+		});
 
-			this.socket.on("event:song.newRatings", data => {
-				if (!this.noSong) {
-					if (data.songId === this.currentSong.songId) {
-						this.liked = data.liked;
-						this.disliked = data.disliked;
-					}
+		this.socket.on("event:song.newRatings", data => {
+			if (!this.noSong) {
+				if (data.songId === this.currentSong.songId) {
+					this.liked = data.liked;
+					this.disliked = data.disliked;
 				}
-			});
+			}
+		});
 
-			this.socket.on("event:queue.update", queue => {
-				if (this.station.type === "community")
-					this.updateSongsList(queue);
-			});
+		this.socket.on("event:queue.update", queue => {
+			if (this.station.type === "community") this.updateSongsList(queue);
+		});
 
-			this.socket.on("event:song.voteSkipSong", () => {
-				if (this.currentSong) this.currentSong.skipVotes += 1;
-			});
+		this.socket.on("event:song.voteSkipSong", () => {
+			if (this.currentSong) this.currentSong.skipVotes += 1;
+		});
 
-			this.socket.on("event:privatePlaylist.selected", playlistId => {
-				if (this.station.type === "community") {
-					this.station.privatePlaylist = playlistId;
-				}
-			});
+		this.socket.on("event:privatePlaylist.selected", playlistId => {
+			if (this.station.type === "community") {
+				this.station.privatePlaylist = playlistId;
+			}
+		});
 
-			this.socket.on("event:privatePlaylist.deselected", () => {
-				if (this.station.type === "community") {
-					this.station.privatePlaylist = null;
-				}
-			});
+		this.socket.on("event:privatePlaylist.deselected", () => {
+			if (this.station.type === "community") {
+				this.station.privatePlaylist = null;
+			}
+		});
 
-			this.socket.on("event:partyMode.updated", partyMode => {
-				if (this.station.type === "community") {
-					this.station.partyMode = partyMode;
-				}
-			});
+		this.socket.on("event:partyMode.updated", partyMode => {
+			if (this.station.type === "community") {
+				this.station.partyMode = partyMode;
+			}
+		});
 
-			this.socket.on("event:station.themeUpdated", theme => {
-				this.station.theme = theme;
-			});
+		this.socket.on("event:station.themeUpdated", theme => {
+			this.station.theme = theme;
+		});
 
-			this.socket.on("event:station.updateName", res => {
-				this.station.name = res.name;
-				// eslint-disable-next-line no-restricted-globals
-				history.pushState(
-					{},
-					null,
-					`${res.name}?${Object.keys(this.$route.query)
-						.map(key => {
-							return `${encodeURIComponent(
-								key
-							)}=${encodeURIComponent(this.$route.query[key])}`;
-						})
-						.join("&")}`
-				);
-			});
+		this.socket.on("event:station.updateName", res => {
+			this.station.name = res.name;
+			// eslint-disable-next-line no-restricted-globals
+			history.pushState(
+				{},
+				null,
+				`${res.name}?${Object.keys(this.$route.query)
+					.map(key => {
+						return `${encodeURIComponent(key)}=${encodeURIComponent(
+							this.$route.query[key]
+						)}`;
+					})
+					.join("&")}`
+			);
+		});
 
-			this.socket.on("event:station.updateDisplayName", res => {
-				this.station.displayName = res.displayName;
-			});
+		this.socket.on("event:station.updateDisplayName", res => {
+			this.station.displayName = res.displayName;
+		});
 
-			this.socket.on("event:station.updateDescription", res => {
-				this.station.description = res.description;
-			});
+		this.socket.on("event:station.updateDescription", res => {
+			this.station.description = res.description;
+		});
 
-			this.socket.on("event:newOfficialPlaylist", playlist => {
-				if (this.station.type === "official")
-					this.updateSongsList(playlist);
-			});
+		this.socket.on("event:newOfficialPlaylist", playlist => {
+			if (this.station.type === "official")
+				this.updateSongsList(playlist);
+		});
 
-			this.socket.on("event:users.updated", users =>
-				this.updateUsers(users)
-			);
+		this.socket.on("event:users.updated", users => this.updateUsers(users));
 
-			this.socket.on("event:userCount.updated", userCount =>
-				this.updateUserCount(userCount)
-			);
+		this.socket.on("event:userCount.updated", userCount =>
+			this.updateUserCount(userCount)
+		);
 
-			this.socket.on("event:queueLockToggled", locked => {
-				this.station.locked = locked;
-			});
+		this.socket.on("event:queueLockToggled", locked => {
+			this.station.locked = locked;
+		});
 
-			this.socket.on("event:user.favoritedStation", stationId => {
-				if (stationId === this.station._id)
-					this.updateIfStationIsFavorited({ isFavorited: true });
-			});
+		this.socket.on("event:user.favoritedStation", stationId => {
+			if (stationId === this.station._id)
+				this.updateIfStationIsFavorited({ isFavorited: true });
+		});
 
-			this.socket.on("event:user.unfavoritedStation", stationId => {
-				if (stationId === this.station._id)
-					this.updateIfStationIsFavorited({ isFavorited: false });
-			});
+		this.socket.on("event:user.unfavoritedStation", stationId => {
+			if (stationId === this.station._id)
+				this.updateIfStationIsFavorited({ isFavorited: false });
 		});
 
 		if (JSON.parse(localStorage.getItem("muted"))) {

frontend/src/store/modules/admin.js

@@ -1,6 +1,6 @@
 /* eslint no-param-reassign: 0 */
+/* eslint-disable import/no-cycle */
 
-import Vue from "vue";
 import admin from "../../api/admin/index";
 
 const state = {};
@@ -33,7 +33,7 @@ const modules = {
 			updateSong(state, updatedSong) {
 				state.songs.forEach((song, index) => {
 					if (song._id === updatedSong._id)
-						Vue.set(state.songs, index, updatedSong);
+						this.$set(state.songs, index, updatedSong);
 				});
 			}
 		}
@@ -76,12 +76,8 @@ const modules = {
 				return new Promise((resolve, reject) => {
 					return admin.reports
 						.resolve(reportId)
-						.then(res => {
-							return resolve(res);
-						})
-						.catch(err => {
-							return reject(new Error(err.message));
-						});
+						.then(res => resolve(res))
+						.catch(err => reject(new Error(err.message)));
 				});
 			}
 		},
@@ -118,7 +114,7 @@ const modules = {
 			updateNews(state, updatedNews) {
 				state.news.forEach((news, index) => {
 					if (news._id === updatedNews._id)
-						Vue.set(state.news, index, updatedNews);
+						this.$set(state.news, index, updatedNews);
 				});
 			}
 		}

frontend/src/store/modules/modals/viewReport.js

@@ -1,4 +1,5 @@
 /* eslint no-param-reassign: 0 */
+/* eslint-disable import/no-cycle */
 
 import admin from "../../../api/admin/index";
 

frontend/src/store/modules/user.js

@@ -1,4 +1,5 @@
 /* eslint no-param-reassign: 0 */
+/* eslint-disable import/no-cycle */
 
 import auth from "../../api/auth";
 import io from "../../io";
@@ -116,32 +117,27 @@ const modules = {
 					if (typeof state.userIdMap[`Z${userId}`] !== "string") {
 						if (state.userIdRequested[`Z${userId}`] !== true) {
 							commit("requestingUserId", userId);
-							io.getSocket(socket => {
-								socket.dispatch(
-									"users.getUsernameFromId",
-									userId,
-									res => {
-										if (res.status === "success") {
-											commit("mapUserId", {
-												userId,
-												username: res.data
-											});
+							io.socket.dispatch(
+								"users.getUsernameFromId",
+								userId,
+								res => {
+									if (res.status === "success") {
+										commit("mapUserId", {
+											userId,
+											username: res.data
+										});
 
-											state.pendingUserIdCallbacks[
-												`Z${userId}`
-											].forEach(cb => cb(res.data));
+										state.pendingUserIdCallbacks[
+											`Z${userId}`
+										].forEach(cb => cb(res.data));
 
-											commit(
-												"clearPendingCallbacks",
-												userId
-											);
+										commit("clearPendingCallbacks", userId);
 
-											return resolve(res.data);
-										}
-										return resolve();
+										return resolve(res.data);
 									}
-								);
-							});
+									return resolve();
+								}
+							);
 						} else {
 							commit("pendingUsername", {
 								userId,