fix: "User ID -> Username" Vue component

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

backend/logic/actions/users.js

@@ -412,21 +412,17 @@ module.exports = {
 	 * @param {Function} cb - gets called with the result
 	 */
 	getUsernameFromId: (session, userId, cb) => {
-		async.waterfall([
-			(next) => {
-				db.models.user.findOne({ _id: userId }, next);
-			},
-		], (err, user) => {
+		db.models.user.findById(userId).then(user => {
+			logger.success("GET_USERNAME_FROM_ID", `Found username for userId "${userId}".`);
+			return cb({
+				status: 'success',
+				data: user.username
+			});
+		}).catch(err => {
 			if (err && err !== true) {
 				err = utils.getError(err);
 				logger.error("GET_USERNAME_FROM_ID", `Getting the username from userId "${userId}" failed. "${err}"`);
-				cb({status: 'failure', message: err});
-			} else {
-				logger.success("GET_USERNAME_FROM_ID", `Found username for userId "${userId}".`);
-				return cb({
-					status: 'success',
-					data: user.username
-				});
+				cb({ status: 'failure', message: err });
 			}
 		});
 	},

frontend/App.vue

@@ -136,11 +136,6 @@ export default {
 
 html {
 	overflow: auto !important;
-
-	a {
-		color: #03a9f4;
-		text-decoration: none;
-	}
 }
 
 .modal-card {

frontend/components/Modals/CreateCommunityStation.vue

@@ -39,6 +39,8 @@
 </template>
 
 <script>
+import { mapActions } from "vuex";
+
 import { Toast } from "vue-roaster";
 import Modal from "./Modal.vue";
 import io from "../../io";
@@ -109,6 +111,8 @@ export default {
 					8000
 				);
 
+			let _this = this;
+
 			this.socket.emit(
 				"stations.create",
 				{
@@ -118,16 +122,17 @@ export default {
 					description: description
 				},
 				res => {
-					if (res.status === "success")
+					if (res.status === "success") {
 						Toast.methods.addToast(
 							`You have added the station successfully`,
 							4000
 						);
-					else Toast.methods.addToast(res.message, 4000);
+						_this.closeCurrentModal();
+					} else Toast.methods.addToast(res.message, 4000);
 				}
 			);
-			//   this.toggleModal();
-		}
+		},
+		...mapActions("modals", ["closeCurrentModal"])
 	}
 };
 </script>

frontend/components/UserIdToUsername.vue

@@ -1,12 +1,12 @@
 <template>
 	<router-link
-		v-if="$props.link"
+		v-if="$props.link && username"
 		:to="{ path: `/u/${userIdMap['Z' + $props.userId]}` }"
 	>
-		{{ userIdMap["Z" + $props.userId] }}
+		{{ username ? username : "unknown" }}
 	</router-link>
 	<span v-else>
-		{{ userIdMap["Z" + $props.userId] }}
+		{{ username ? username : "unknown" }}
 	</span>
 </template>
 
@@ -14,22 +14,23 @@
 import { mapState, mapActions } from "vuex";
 
 export default {
-	components: {},
 	props: ["userId", "link"],
-	data() {
-		return {};
+	data: function() {
+		return {
+			username: ""
+		};
 	},
 	computed: {
-		...mapState("user/userIdMap", {
+		...mapState("user/auth", {
 			userIdMap: state => state.userIdMap
 		})
 	},
 	methods: {
-		...mapActions("user/userIdMap", ["getUsernameFromId"])
+		...mapActions("user/auth", ["getUsernameFromId"])
 	},
 	mounted: function() {
-		this.getUsernameFromId(this.$props.userId).then(() => {
-			this.$forceUpdate();
+		this.getUsernameFromId(this.$props.userId).then(res => {
+			this.username = res;
 		});
 	}
 };

frontend/components/pages/Home.vue

@@ -360,8 +360,11 @@ html {
 		font-size: 15px;
 
 		.host {
-			font-size: 18px;
 			color: #03a9f4;
+
+			a {
+				color: #03a9f4;
+			}
 		}
 	}
 

frontend/store/modules/user.js

@@ -10,7 +10,9 @@ const mutations = {};
 const modules = {
 	auth: {
 		namespaced: true,
-		state: {},
+		state: {
+			userIdMap: {}
+		},
 		getters: {},
 		actions: {
 			/* eslint-disable-next-line no-unused-vars */
@@ -100,49 +102,17 @@ const modules = {
 							});
 						});
 				});
-			}
-		},
-		mutations: {}
-	},
-	playlists: {
-		namespaced: true,
-		state: {
-			editing: ""
-		},
-		getters: {},
-		actions: {
-			editPlaylist: ({ commit }, id) => commit("editPlaylist", id)
-		},
-		mutations: {
-			editPlaylist(state, id) {
-				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);
+			},
+			getUsernameFromId: ({ commit, state }, userId) => {
+				return new Promise(resolve => {
+					if (typeof state.userIdMap[userId] !== "string") {
 						io.getSocket(socket => {
 							socket.emit(
 								"users.getUsernameFromId",
 								userId,
 								res => {
-									commit("noLongerGettingUsername", userId);
 									if (res.status === "success") {
-										commit("gotUsername", {
+										commit("mapUserId", {
 											userId,
 											username: res.data
 										});
@@ -151,25 +121,30 @@ const modules = {
 								}
 							);
 						});
-					} 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) {
+			mapUserId(state, data) {
 				state.userIdMap["Z" + data.userId] = data.username;
 			}
 		}
+	},
+	playlists: {
+		namespaced: true,
+		state: {
+			editing: ""
+		},
+		getters: {},
+		actions: {
+			editPlaylist: ({ commit }, id) => commit("editPlaylist", id)
+		},
+		mutations: {
+			editPlaylist(state, id) {
+				state.editing = id;
+			}
+		}
 	}
 };