feat: add components for showing messages

components/Message.vue

@@ -1,13 +1,20 @@
 <template>
 	<div class="message">
-		<img class="message-author-pfp" :src="img" :alt="username">
+		<div>
+			<img v-if="props.img" class="message-author-avatar" :src="img" :alt="username">
+			<Icon v-else name="lucide:user" class="message-author-avatar" />
+		</div>
 		<div class="message-data">
 			<div class="message-metadata">
 				<span class="message-author-username">
 					{{ username }}
 				</span>
-				<span class="message-date">
+				<span class="message-date" :title="date.toString()">
 					{{ messageDate }}
+					<!--
+					<div class="message-date-hover" v-if="showHover">
+					</div>
+					-->
 				</span>
 			</div>
 			<div class="message-text">
@@ -21,6 +28,7 @@
 const props = defineProps<{ class?: string, img?: string, username: string, text: string, timestamp: number, format: "12" | "24" }>();
 
 const messageDate = ref<string>();
+const showHover = ref(false);
 
 const date = new Date(props.timestamp);
 const now = new Date()
@@ -32,12 +40,16 @@ if (now.getUTCHours() >= 0) {
 		if (dateHour > 12) {
 			dateHour = dateHour - 12;
 		}
-		messageDate.value = `${dateHour}:${dateMinute} ${dateHour > 0 && dateHour < 13 ? "AM" : "PM"}`
+		messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute} ${dateHour > 0 && dateHour < 13 ? "AM" : "PM"}`
 	} else {
-		messageDate.value = `${dateHour}:${dateMinute}`
+		messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute}`
 	}
 }
 
+//function toggleTooltip(e: Event) {
+//	showHover.value = !showHover.value;
+//}
+
 </script>
 
 <style scoped>
@@ -46,7 +58,8 @@ if (now.getUTCHours() >= 0) {
 	/* border: 1px solid lightcoral; */
 	margin-bottom: 1dvh;
 	display: grid;
-	grid-template-columns: 3em auto;
+	grid-template-columns: auto 1fr;
+	align-items: center;
 }
 
 .message-metadata {
@@ -65,7 +78,7 @@ if (now.getUTCHours() >= 0) {
 	align-items: center;
 }
 
-.message-author-pfp {
+.message-author-avatar {
 	margin-right: 1dvw;
 	width: 3em;
 }
@@ -79,4 +92,15 @@ if (now.getUTCHours() >= 0) {
 	font-size: small;
 	color: rgb(150, 150, 150);
 }
+
+.message-date:hover {
+	cursor: default;
+}
+
+/*
+.message-date-tooltip {
+	height: 20px;;
+	width: 20px;
+}
+*/
 </style>

components/MessageArea.vue

@@ -0,0 +1,122 @@
+<template>
+  <div id="message-area">
+	<div id="messages">
+		<Message v-for="message of messages" :username="displayName" :text="message.message"
+			:timestamp="uuidToTimestamp(message.uuid)" format="12" />
+	</div>
+	<div id="message-box">
+		<form id="message-form" @submit="sendMessage">
+			<input v-model="messageInput" type="text" name="message-input" id="message-box-input">
+			<button type="submit">
+				<Icon name="lucide:send" />
+			</button>
+		</form>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import type { MessageResponse } from '~/types/interfaces';
+
+const props = defineProps<{ channelUrl: string, amount?: number, offset?: number, reverse?: boolean }>();
+
+const messagesRes: MessageResponse[] | undefined = await fetchWithApi(
+	`${props.channelUrl}/messages`,
+	{ query: { "amount": props.amount ?? 100, "offset": props.offset ?? 0 } }
+);
+if (messagesRes && props.reverse) {
+  messagesRes.reverse();
+}
+
+const messages = ref(messagesRes);
+
+const { fetchUser } = useAuth();
+
+const user = await fetchUser();
+const displayName = user!.display_name ?? user!.username
+
+const messageInput = ref<string>();
+
+const accessToken = useCookie("access_token").value;
+const apiBase = useCookie("api_base").value;
+const { refresh } = useAuth();
+
+let ws: WebSocket;
+
+if (accessToken && apiBase) {
+	console.log("channel url:", `${apiBase.replace("http", "ws")}/${props.channelUrl}/socket`);
+	console.log("access token:", accessToken);
+	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);
+
+	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();
+}
+
+function sendMessage(e: Event) {
+	e.preventDefault();
+	const text = messageInput.value;
+	console.log("text:", text);
+	if (text) {
+		ws.send(text);	
+		messageInput.value = "";
+		console.log("MESSAGE SENT!!!");
+	}
+}
+</script>
+
+<style scoped>
+
+#message-area {
+	padding-top: 3dvh;
+}
+
+#message-area {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	padding-left: 1dvw;
+	padding-right: 1dvw;
+	overflow: hidden;
+}
+
+#message-box {
+	border: 1px solid rgb(70, 70, 70);
+	margin-bottom: 1dvh;
+	height: 7%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+}
+
+#message-form {
+	height: 50%;
+	width: 100%;
+}
+
+#message-input {
+	width: 100%;
+}
+
+#messages {
+	overflow-y: scroll;
+}
+
+</style>