feat: implement autoscroll

components/MessageArea.vue

@@ -18,6 +18,7 @@
 <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 }>();
 
@@ -71,11 +72,16 @@ ws.addEventListener("open", (event) => {
 	console.log("WebSocket connected!");
 });
 
-ws.addEventListener("message", (event) => {
+ws.addEventListener("message", async (event) => {
 	console.log("event data:", event.data);
 	messages.value?.push(
 		JSON.parse(event.data)
 	);
+	await nextTick();
+	if (messagesElement.value) {
+		console.log("scrolling to bottom");
+		scrollToBottom(messagesElement);
+	}
 });
 } else {
 	await refresh();
@@ -100,7 +106,9 @@ function sendMessage(e: Event) {
 }
 
 onMounted(async () => {
-	messagesElement.value?.scrollTo({ top: messagesElement.value.scrollHeight });
+	if (messagesElement.value) {
+		scrollToBottom(messagesElement);
+	}
 });
 
 </script>

composables/auth.ts

@@ -64,7 +64,7 @@ export const useAuth = () => {
       method: "POST"
     }) as any;
     console.log("finished refreshing:", res);
-    if (res.access_token) {
+    if (res && res.access_token) {
       accessToken.value = res.access_token;
       console.log("set new access token");
     } else {

layouts/auth.vue

@@ -1,5 +1,4 @@
 <template>
-  <NuxtLayout>
   <div id="root-container" style="margin-top: 5dvh;">
     <div id="main-container">
       <div v-if="!instanceUrl">
@@ -44,7 +43,6 @@
       </div>
     </div>
   </div>
-  </NuxtLayout>
 </template>
 
 <script lang="ts" setup>

middleware/auth.global.ts

@@ -1,5 +1,5 @@
 export default defineNuxtRouteMiddleware(async (to, from) => {
-	console.log("to.path:", to.path);
+	console.log("to.fullPath:", to.fullPath);
 	const loading = useState("loading");
 	const accessToken = useCookie("access_token").value;
 	if (["/login", "/register"].includes(to.path)) {
@@ -19,6 +19,6 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
 		query.set("redirect_to", to.path);
 		loading.value = false;
 		console.log("set loading to false");
-		return await navigateTo("/login" + (query ?? ""));
+		return await navigateTo("/login?" + (query ?? ""));
 	}
 })

utils/scrollToBottom.ts

@@ -0,0 +1,6 @@
+export default (element: Ref<HTMLElement | undefined, HTMLElement | undefined>) => {
+  if (element.value) {
+    element.value.scrollTo({ top: element.value.scrollHeight });
+    return;
+  }
+}