refactor: moved userIdToUsername code to custom component

frontend/App.vue

@@ -40,9 +40,7 @@ export default {
 			username: "",
 			userId: "",
 			serverDomain: "",
-			socketConnected: true,
-			userIdMap: {},
-			currentlyGettingUsernameFrom: {}
+			socketConnected: true
 		};
 	},
 	computed: mapState({
@@ -63,23 +61,6 @@ export default {
 		submitOnEnter: (cb, event) => {
 			if (event.which == 13) cb();
 		},
-		getUsernameFromId: function(userId) {
-			// refactor
-			if (
-				typeof this.userIdMap[userId] !== "string" &&
-				!this.currentlyGettingUsernameFrom[userId]
-			) {
-				this.currentlyGettingUsernameFrom[userId] = true;
-				io.getSocket(socket => {
-					socket.emit("users.getUsernameFromId", userId, res => {
-						if (res.status === "success") {
-							this.$set(this.userIdMap, `Z${userId}`, res.data);
-						}
-						this.currentlyGettingUsernameFrom[userId] = false;
-					});
-				});
-			}
-		},
 		...mapActions("modals", ["closeCurrentModal"])
 	},
 	mounted: function() {

frontend/components/Admin/QueueSongs.vue

@@ -36,7 +36,12 @@
 						<td>{{ song.songId }}</td>
 						<td>{{ song.artists.join(", ") }}</td>
 						<td>{{ song.genres.join(", ") }}</td>
-						<td>{{ song.requestedBy }}</td>
+						<td>
+							<user-id-to-username
+								:userId="song.requestedBy"
+								:link="true"
+							/>
+						</td>
 						<td>
 							<button
 								class="button is-primary"
@@ -89,10 +94,12 @@ import { mapState, mapActions } from "vuex";
 import { Toast } from "vue-roaster";
 
 import EditSong from "../Modals/EditSong.vue";
+import UserIdToUsername from "../UserIdToUsername.vue";
+
 import io from "../../io";
 
 export default {
-	components: { EditSong },
+	components: { EditSong, UserIdToUsername },
 	data() {
 		return {
 			position: 1,

frontend/components/Admin/Reports.vue

@@ -17,7 +17,10 @@
 							<span>{{ report.songId }}</span>
 						</td>
 						<td>
-							<span>{{ report.createdBy }}</span>
+							<user-id-to-username
+								:userId="report.createdBy"
+								:link="true"
+							/>
 						</td>
 						<td>
 							<span>{{ report.createdAt }}</span>
@@ -53,9 +56,10 @@ import { Toast } from "vue-roaster";
 import io from "../../io";
 
 import IssuesModal from "../Modals/IssuesModal.vue";
+import UserIdToUsername from "../UserIdToUsername.vue";
 
 export default {
-	components: { IssuesModal },
+	components: { IssuesModal, UserIdToUsername },
 	data() {
 		return {
 			reports: [],

frontend/components/Admin/Songs.vue

@@ -36,7 +36,12 @@
 						<td>{{ song.songId }}</td>
 						<td>{{ song.artists.join(", ") }}</td>
 						<td>{{ song.genres.join(", ") }}</td>
-						<td>{{ song.requestedBy }}</td>
+						<td>
+							<user-id-to-username
+								:userId="song.requestedBy"
+								:link="true"
+							/>
+						</td>
 						<td>
 							<button
 								class="button is-primary"
@@ -65,10 +70,12 @@ import { mapState, mapActions } from "vuex";
 import { Toast } from "vue-roaster";
 
 import EditSong from "../Modals/EditSong.vue";
+import UserIdToUsername from "../UserIdToUsername.vue";
+
 import io from "../../io";
 
 export default {
-	components: { EditSong },
+	components: { EditSong, UserIdToUsername },
 	data() {
 		return {
 			position: 1,

frontend/components/Admin/Stations.vue

@@ -9,6 +9,7 @@
 						<td>Type</td>
 						<td>Display Name</td>
 						<td>Description</td>
+						<td>Owner</td>
 						<td>Options</td>
 					</tr>
 				</thead>
@@ -29,6 +30,12 @@
 						<td>
 							<span>{{ station.description }}</span>
 						</td>
+						<td>
+							<user-id-to-username
+								:userId="station.owner"
+								:link="true"
+							/>
+						</td>
 						<td>
 							<a class="button is-info" v-on:click="edit(station)"
 								>Edit</a
@@ -165,9 +172,10 @@ import { Toast } from "vue-roaster";
 import io from "../../io";
 
 import EditStation from "./EditStation.vue";
+import UserIdToUsername from "../UserIdToUsername.vue";
 
 export default {
-	components: { EditStation },
+	components: { EditStation, UserIdToUsername },
 	data() {
 		return {
 			stations: [],

frontend/components/Sidebars/SongsList.vue

@@ -55,14 +55,12 @@
 						>
 							<small>
 								Requested by
-								<b
-									>{{
-										$parent.$parent.getUsernameFromId(
-											song.requestedBy
-										)
-									}}
-									{{ userIdMap["Z" + song.requestedBy] }}</b
-								>
+								<b>
+									<user-id-to-username
+										:userId="song.requestedBy"
+										:link="true"
+									/>
+								</b>
 							</small>
 							<i
 								v-if="isOwnerOnly() || isAdminOnly()"
@@ -135,11 +133,12 @@ import { mapActions } from "vuex";
 
 import { Toast } from "vue-roaster";
 
+import UserIdToUsername from "../UserIdToUsername.vue";
+
 export default {
 	data: function() {
 		return {
-			dismissedWarning: false,
-			userIdMap: this.$parent.$parent.userIdMap
+			dismissedWarning: false
 		};
 	},
 	methods: {
@@ -178,7 +177,8 @@ export default {
 				_this.socket = socket;
 
 			});*/
-	}
+	},
+	components: { UserIdToUsername }
 };
 </script>
 

frontend/components/Station/Station.vue

@@ -135,18 +135,12 @@
 									<br />
 									<small>
 										Requested by
-										<b
-											>{{
-												$parent.getUsernameFromId(
-													song.requestedBy
-												)
-											}}
-											{{
-												userIdMap[
-													"Z" + song.requestedBy
-												]
-											}}</b
-										>
+										<b>
+											<user-id-to-username
+												:userId="song.requestedBy"
+												:link="true"
+											/>
+										</b>
 									</small>
 									<button
 										v-if="isOwnerOnly() || isAdminOnly()"
@@ -422,6 +416,9 @@ import UsersSidebar from "../Sidebars/UsersList.vue";
 
 import OfficialHeader from "./OfficialHeader.vue";
 import CommunityHeader from "./CommunityHeader.vue";
+
+import UserIdToUsername from "../UserIdToUsername.vue";
+
 import io from "../../io";
 
 export default {
@@ -453,8 +450,7 @@ export default {
 			automaticallyRequestedSongId: null,
 			systemDifference: 0,
 			users: [],
-			userCount: 0,
-			userIdMap: this.$parent.userIdMap
+			userCount: 0
 		};
 	},
 	computed: {
@@ -1125,7 +1121,8 @@ export default {
 		Report,
 		SongsListSidebar,
 		PlaylistSidebar,
-		UsersSidebar
+		UsersSidebar,
+		UserIdToUsername
 	}
 };
 </script>

frontend/components/UserIdToUsername.vue

@@ -0,0 +1,33 @@
+<template>
+	<a v-if="$props.link" v-bind:href="`/u/${userIdMap['Z' + $props.userId]}`">
+		{{ userIdMap["Z" + $props.userId] }}
+	</a>
+	<span v-else>
+		{{ userIdMap["Z" + $props.userId] }}
+	</span>
+</template>
+
+<script>
+import { mapState, mapActions } from "vuex";
+
+export default {
+	components: {},
+	props: ["userId", "link"],
+	data() {
+		return {};
+	},
+	computed: {
+		...mapState("user/userIdMap", {
+			userIdMap: state => state.userIdMap
+		})
+	},
+	methods: {
+		...mapActions("user/userIdMap", ["getUsernameFromId"])
+	},
+	mounted: function() {
+		this.getUsernameFromId(this.$props.userId).then(() => {
+			this.$forceUpdate();
+		});
+	}
+};
+</script>

frontend/components/pages/Home.vue

@@ -102,13 +102,13 @@
 						<div class="under-content">
 							<span class="hostedby"
 								>Hosted by
-								<span class="host"
-									>{{
-										$parent.getUsernameFromId(station.owner)
-									}}
-									{{ userIdMap["Z" + station.owner] }}</span
-								></span
-							>
+								<span class="host">
+									<user-id-to-username
+										:userId="station.owner"
+										:link="true"
+									/>
+								</span>
+							</span>
 							<i
 								v-if="station.privacy !== 'public'"
 								class="material-icons right-icon"
@@ -145,6 +145,8 @@ import { mapState, mapActions } from "vuex";
 import MainHeader from "../MainHeader.vue";
 import MainFooter from "../MainFooter.vue";
 import CreateCommunityStation from "../Modals/CreateCommunityStation.vue";
+import UserIdToUsername from "../UserIdToUsername.vue";
+
 import auth from "../../auth";
 import io from "../../io";
 
@@ -158,7 +160,6 @@ export default {
 				official: [],
 				community: []
 			},
-			userIdMap: this.$parent.userIdMap,
 			nightMode: false
 		};
 	},
@@ -278,7 +279,12 @@ export default {
 		},
 		...mapActions("modals", ["toggleModal"])
 	},
-	components: { MainHeader, MainFooter, CreateCommunityStation }
+	components: {
+		MainHeader,
+		MainFooter,
+		CreateCommunityStation,
+		UserIdToUsername
+	}
 };
 </script>
 

frontend/store/modules/user.js

@@ -1,4 +1,5 @@
 import auth from "../../api/auth.js";
+import io from "../../io.js";
 import validation from "../../validation.js";
 
 const state = {};
@@ -117,6 +118,58 @@ const modules = {
 				state.editing = id;
 			}
 		}
+	},
+	userIdMap: {
+		namespaced: true,
+		state: {
+			userIdMap: {},
+			currentlyGettingUsernameFrom: {}
+		},
+		getters: {},
+		actions: {
+			getUsernameFromId: ({ commit }, userId) => {
+				/* eslint-disable-next-line no-unused-vars */
+				return new Promise((resolve, reject) => {
+					if (
+						typeof state.userIdMap.userIdMap[userId] !== "string" &&
+						!state.userIdMap.currentlyGettingUsernameFrom[userId]
+					) {
+						commit("gettingUsername", userId);
+						io.getSocket(socket => {
+							socket.emit(
+								"users.getUsernameFromId",
+								userId,
+								res => {
+									commit("noLongerGettingUsername", userId);
+									if (res.status === "success") {
+										commit("gotUsername", {
+											userId,
+											username: res.data
+										});
+										return resolve(res.data);
+									} else return resolve();
+								}
+							);
+						});
+					} else if (
+						!state.userIdMap.currentlyGettingUsernameFrom[userId]
+					)
+						return resolve(state.userIdMap.userIdMap[userId]);
+					else return resolve();
+				});
+			}
+		},
+		mutations: {
+			gettingUsername(state, userId) {
+				state.currentlyGettingUsernameFrom[userId] = true;
+			},
+			noLongerGettingUsername(state, userId) {
+				state.currentlyGettingUsernameFrom[userId] = true;
+			},
+			gotUsername(state, data) {
+				state.userIdMap["Z" + data.userId] = data.username;
+			}
+		}
 	}
 };