feat: implement fetching of usernames for messages

components/MessageArea.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="message-area">
 	<div id="messages">
-		<Message v-for="message of messages" :username="message.user_uuid" :text="message.message"
+		<Message v-for="message of messages" :username="displayNames[message.user_uuid]" :text="message.message"
 			:timestamp="uuidToTimestamp(message.uuid)" format="12" />
 	</div>
 	<div id="message-box">
@@ -17,6 +17,7 @@
 
 <script lang="ts" setup>
 import type { MessageResponse } from '~/types/interfaces';
+import fetchUser from '~/utils/fetchUser';
 
 const props = defineProps<{ channelUrl: string, amount?: number, offset?: number, reverse?: boolean }>();
 
@@ -28,12 +29,11 @@ if (messagesRes && props.reverse) {
   messagesRes.reverse();
 }
 
-const messages = ref(messagesRes);
+const messages = ref(messagesRes ?? []);
 
-const { fetchUser } = useAuth();
+const displayNames = ref<Record<string, string>>({});
 
-const user = await fetchUser();
+const route = useRoute();
-const displayName = user!.display_name ?? user!.username
 
 const messageInput = ref<string>();
 
@@ -49,26 +49,33 @@ if (accessToken && apiBase) {
 	do {
 		console.log("Trying to connect to channel WebSocket...");
 		ws = new WebSocket(`${apiBase.replace("http", "ws").replace("3000", "8080")}/${props.channelUrl}/socket`,
-			["Authorization", accessToken]
+		["Authorization", accessToken]
-		);
+	);
-		if (ws) break;
+	if (ws) break;
-		await sleep(10000);
+	await sleep(10000);
-	} while (!ws);
+} while (!ws);
 
-	ws.addEventListener("open", (event) => {
+ws.addEventListener("open", (event) => {
-		console.log("WebSocket connected!");
+	console.log("WebSocket connected!");
-	});
+});
-	
+
-	ws.addEventListener("message", (event) => {
+ws.addEventListener("message", (event) => {
-		console.log("event data:", event.data);
+	console.log("event data:", event.data);
-		messages.value?.push(
+	messages.value?.push(
-			JSON.parse(event.data)
+		JSON.parse(event.data)
-		)
+	);
-	});
+});
 } else {
 	await refresh();
 }
 
+async function getDisplayName(memberId: string): Promise<string> {
+	//const user = await fetchMember((route.params.serverId as string), memberId);
+	const user = await fetchUser((route.params.serverId as string), memberId);
+	return user!.display_name ?? user!.username;
+
+}
+
 function sendMessage(e: Event) {
 	e.preventDefault();
 	const text = messageInput.value;
@@ -79,6 +86,18 @@ function sendMessage(e: Event) {
 		console.log("MESSAGE SENT!!!");
 	}
 }
+
+onMounted(async () => {
+	const displayNamesArr: Record<string, string> = {};
+	for (const message of messages.value) {
+		if (!displayNamesArr[message.user_uuid]) {
+			const displayName = await getDisplayName(message.user_uuid);
+			displayNamesArr[message.user_uuid] = displayName;
+		}
+	}
+	displayNames.value = displayNamesArr;
+});
+
 </script>
 
 <style scoped>
@@ -117,6 +136,9 @@ function sendMessage(e: Event) {
 
 #messages {
 	overflow-y: scroll;
+	display: flex;
+	flex-direction: column;
+	gap: 1dvh;
 }
 
 </style>