fix: props definition not allowing for null value on img

components/Message.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="message">
 		<div>
-			<img v-if="props.img" class="message-author-avatar" :src="img" :alt="username">
+			<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="username">
 			<Icon v-else name="lucide:user" class="message-author-avatar" />
 		</div>
 		<div class="message-data">
@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts" setup>
-const props = defineProps<{ class?: string, img?: string, username: string, text: string, timestamp: number, format: "12" | "24" }>();
+const props = defineProps<{ class?: string, img?: string | null, username: string, text: string, timestamp: number, format: "12" | "24" }>();
 
 const messageDate = ref<string>();
 const showHover = ref(false);
@@ -74,6 +74,7 @@ if (now.getUTCHours() >= 0) {
 	display: flex;
 	flex-direction: column;
 	gap: 1dvh;
+	height: 100%;
 }
 
 .message-author {
@@ -84,6 +85,7 @@ if (now.getUTCHours() >= 0) {
 .message-author-avatar {
 	margin-right: 1dvw;
 	width: 3em;
+	border-radius: 50%;
 }
 
 .author-username {

components/MessageArea.vue

@@ -1,8 +1,8 @@
 <template>
   <div id="message-area">
 	<div id="messages" ref="messagesElement">
-		<Message v-for="message of messages" :username="displayNames[message.user_uuid]" :text="message.message"
-			:timestamp="uuidToTimestamp(message.uuid)" format="12" />
+		<Message v-for="message of messages" :username="message.user.display_name ?? message.user.username" :text="message.message"
+			:timestamp="uuidToTimestamp(message.uuid)" :img="message.user.avatar" format="12" />
 	</div>
 	<div id="message-box">
 		<form id="message-form" @submit="sendMessage">
@@ -17,7 +17,6 @@
 
 <script lang="ts" setup>
 import type { MessageResponse } from '~/types/interfaces';
-import fetchUser from '~/utils/fetchUser';
 import scrollToBottom from '~/utils/scrollToBottom';
 
 const props = defineProps<{ channelUrl: string, amount?: number, offset?: number, reverse?: boolean }>();
@@ -32,8 +31,6 @@ if (messagesRes && props.reverse) {
 
 const messages = ref<MessageResponse[]>([]);
 
-const displayNames = ref<Record<string, string>>({});
-
 const route = useRoute();
 
 const messageInput = ref<string>();
@@ -41,14 +38,6 @@ const messageInput = ref<string>();
 const messagesElement = ref<HTMLDivElement>();
 
 if (messagesRes) messages.value = messagesRes;
-	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;
 
 const accessToken = useCookie("access_token").value;
 const apiBase = useCookie("api_base").value;
@@ -87,13 +76,6 @@ ws.addEventListener("message", async (event) => {
 	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;

types/interfaces.ts

@@ -32,10 +32,11 @@ export interface ChannelResponse {
 }
 
 export interface MessageResponse {
-	uuid: string
-	channel_uuid: string
-	user_uuid: string
-	message: string
+	uuid: string,
+	channel_uuid: string,
+	user_uuid: string,
+	message: string,
+	user: UserResponse
 }
 
 export interface InviteResponse {
@@ -49,6 +50,6 @@ export interface UserResponse {
 	username: string,
 	display_name: string | null,
 	avatar: string | null,
-	email: string,
-	email_verified: boolean
+	email?: string,
+	email_verified?: boolean
   }