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,50 +1,48 @@
 <template>
-  <NuxtLayout>
-    <div id="root-container" style="margin-top: 5dvh;">
-      <div id="main-container">
-        <div v-if="!instanceUrl">
-          <div v-if="instanceError" style="color: red;">
-            {{ instanceError }}
-          </div>
-          <form @submit="selectInstance">
-            <div>
-              <label for="instance-url">Instance URL</label>
-              <br>
-              <input type="url" name="instance-url" id="instance-url" required v-model="instanceUrlInput">
-            </div>
-            <div>
-              <button type="submit">Next</button>
-            </div>
-          </form>
+  <div id="root-container" style="margin-top: 5dvh;">
+    <div id="main-container">
+      <div v-if="!instanceUrl">
+        <div v-if="instanceError" style="color: red;">
+          {{ instanceError }}
         </div>
-        <div v-else id="auth-form-container">
-          <slot />
+        <form @submit="selectInstance">
+          <div>
+            <label for="instance-url">Instance URL</label>
+            <br>
+            <input type="url" name="instance-url" id="instance-url" required v-model="instanceUrlInput">
+          </div>
+          <div>
+            <button type="submit">Next</button>
+          </div>
+        </form>
+      </div>
+      <div v-else id="auth-form-container">
+        <slot />
+      </div>
+      <div v-if="auth.accessToken.value">
+        You're logged in!
+        <form @submit="logout">
+          <div>
+            <label for="logout-password">Password</label>
+            <br>
+            <input type="password" name="logout-password" id="logout-password" v-model="form.password" required>
+          </div>
+          <div>
+            <button type="submit">Log out</button>
+          </div>
+        </form>
+        <div>
+          <button @click="refresh">Refresh</button>
         </div>
-        <div v-if="auth.accessToken.value">
-          You're logged in!
-          <form @submit="logout">
-            <div>
-              <label for="logout-password">Password</label>
-              <br>
-              <input type="password" name="logout-password" id="logout-password" v-model="form.password" required>
-            </div>
-            <div>
-              <button type="submit">Log out</button>
-            </div>
-          </form>
-          <div>
-            <button @click="refresh">Refresh</button>
-          </div>
-          <div>
-            <button @click="showUser">Show user</button>
-          </div>
-          <div>
-            <button @click="getUser">Get me</button>
-          </div>
+        <div>
+          <button @click="showUser">Show user</button>
+        </div>
+        <div>
+          <button @click="getUser">Get me</button>
         </div>
       </div>
     </div>
-  </NuxtLayout>
+  </div>
 </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;
+  }
+}