components/Message.vue

@@ -71,9 +71,6 @@ if (now.getUTCHours() >= 0) {
 .message-data {
 	/* border: 1px solid white; */
 	margin-left: .5dvw;
-	display: flex;
-	flex-direction: column;
-	gap: 1dvh;
 }
 
 .message-author {

components/MessageArea.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="message-area">
 	<div id="messages">
-		<Message v-for="message of messages" :username="displayNames[message.user_uuid]" :text="message.message"
+		<Message v-for="message of messages" :username="message.user_uuid" :text="message.message"
 			:timestamp="uuidToTimestamp(message.uuid)" format="12" />
 	</div>
 	<div id="message-box">
@@ -17,7 +17,6 @@
 
 <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 }>();
 
@@ -29,11 +28,12 @@ if (messagesRes && props.reverse) {
   messagesRes.reverse();
 }
 
-const messages = ref(messagesRes ?? []);
+const messages = ref(messagesRes);
 
-const displayNames = ref<Record<string, string>>({});
+const { fetchUser } = useAuth();
 
-const route = useRoute();
+const user = await fetchUser();
+const displayName = user!.display_name ?? user!.username
 
 const messageInput = ref<string>();
 
@@ -49,33 +49,26 @@ 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]
-	);
-	if (ws) break;
-	await sleep(10000);
-} while (!ws);
+			["Authorization", accessToken]
+		);
+		if (ws) break;
+		await sleep(10000);
+	} while (!ws);
 
-ws.addEventListener("open", (event) => {
-	console.log("WebSocket connected!");
-});
-
-ws.addEventListener("message", (event) => {
-	console.log("event data:", event.data);
-	messages.value?.push(
-		JSON.parse(event.data)
-	);
-});
+	ws.addEventListener("open", (event) => {
+		console.log("WebSocket connected!");
+	});
+	
+	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;
@@ -86,18 +79,6 @@ 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>
@@ -136,9 +117,6 @@ onMounted(async () => {
 
 #messages {
 	overflow-y: scroll;
-	display: flex;
-	flex-direction: column;
-	gap: 1dvh;
 }
 
 </style>

utils/fetchMember.ts

@@ -1,6 +0,0 @@
-import type { UserResponse } from "~/types/interfaces"
-
-export default async (serverId: string, memberId: string): Promise<UserResponse> => {
-	const user = await fetchWithApi(`/servers/${serverId}/members/${memberId}`) as UserResponse;
-	return user;
-}

utils/fetchUser.ts

@@ -1,6 +0,0 @@
-import type { UserResponse } from "~/types/interfaces"
-
-export default async (serverId: string, userId: string): Promise<UserResponse> => {
-	const user = await fetchWithApi(`/users/${userId}`) as UserResponse;
-	return user;
-}