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 displayName = user!.display_name ?? user!.username
+const route = useRoute();
 
 const messageInput = ref<string>();
 
@@ -53,22 +53,29 @@ if (accessToken && apiBase) {
 	);
 	if (ws) break;
 	await sleep(10000);
-	} while (!ws);
+} while (!ws);
 
-	ws.addEventListener("open", (event) => {
+ws.addEventListener("open", (event) => {
 	console.log("WebSocket connected!");
-	});
+});
 
-	ws.addEventListener("message", (event) => {
+ws.addEventListener("message", (event) => {
 	console.log("event data:", event.data);
 	messages.value?.push(
 		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>