typing indicator, mentions + bug fixes

pages/channel/@me/[id].vue

@@ -21,6 +21,26 @@ export default {
 		if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumably?')
 		useGlobalStore().setActive('dms', route.params.id);
 
+		function parseBody(body) {
+			const mentions = body.match(/<@([a-z]|[0-9]){25}>/g);
+
+			if (mentions) {
+				mentions.forEach((e: string) => {
+					if (!e) return
+					const id = e.split('<@')[1]?.split('>')[0];
+					if (!id) return;
+					const user = server.dmParticipants.find((e) => e.id === id)
+					body = body.split(e).join(`@${user.username}`)
+				});
+			}
+
+			return body
+		}
+
+		server.messages?.forEach((e) => {
+			e.body = parseBody(e.body)
+		})
+
 		return {
 			server
 		}

pages/channel/@me/index.vue

@@ -20,7 +20,6 @@ export default {
 		}
 	},
 	mounted() {
-		console.log('mounted')
 		useGlobalStore().setActive('dms', '@me')
 	},
 	methods: {

pages/channel/[id].vue

@@ -24,8 +24,28 @@ export default {
 		if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumiably?')
 		useGlobalStore().setActive('servers', route.params.id)
 
+		function parseBody(body) {
+			const mentions = body.match(/<@([a-z]|[0-9]){25}>/g);
+
+			if (mentions) {
+				mentions.forEach((e: string) => {
+					if (!e) return
+					const id = e.split('<@')[1]?.split('>')[0];
+					if (!id) return;
+					const user = realServer?.participants.find((e) => e.id === id)
+					body = body.split(e).join(`@${user.username}`)
+				});
+			}
+
+			return body
+		}
+
+		server.messages?.forEach((e) => {
+			e.body = parseBody(e.body)
+		})
+
 		return {
-			server
+			server,
 		}
 	},
 	async updated() {
@@ -36,7 +56,9 @@ export default {
 		this.server = await $fetch(`/api/channels/${route.params.id}`, { headers });
 
 		if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumiably?')
-		if (useGlobalStore().activeServer.id !== this.server.id) useGlobalStore().setActive('servers', route.params.id)
+		if (useGlobalStore().activeServer.id !== this.server.id) {
+			useGlobalStore().setActive('servers', route.params.id)
+		}
 	}
 }
 </script>

pages/login.vue

@@ -1,21 +1,26 @@
 <template>
 	<div class="w-screen h-screen bg-[hsl(216,calc(1*7.2%),10%)] relative">
-		<div class="-translate-y-1/2 -translate-x-1/2 top-1/2 left-1/2 absolute bg-[hsl(216,calc(1*7.2%),16%)] p-4 rounded-md shadow-lg">
+		<div
+			class="-translate-y-1/2 -translate-x-1/2 top-1/2 left-1/2 absolute bg-[hsl(216,calc(1*7.2%),16%)] p-4 rounded-md shadow-lg">
 			<h2 class="text-xl font-semibold text-center">Login</h2>
 			<form class="flex flex-col gap-y-2 my-2"
-				@submit.prevent="signup()"> 
-				<input class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[hsl(218,calc(1*4.6%),46.9%)] focus:outline-none"
+				@submit.prevent="signup()">
+				<input
+					class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[hsl(218,calc(1*4.6%),46.9%)] focus:outline-none"
 					name="username"
 					v-model="username"
 					placeholder="username" />
-				<input class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[hsl(218,calc(1*4.6%),46.9%)] focus:outline-none"
+				<input
+					class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[hsl(218,calc(1*4.6%),46.9%)] focus:outline-none"
 					name="password"
 					type="password"
 					v-model="password"
 					placeholder="password" />
-				<input type="submit" class="w-full bg-[#5865F2] py-2 px-4 rounded cursor-pointer" />
+				<input type="submit"
+					class="w-full bg-[#5865F2] py-2 px-4 rounded cursor-pointer" />
 			</form>
-			<div class="text-center">Or <nuxt-link class="hover:underline text-blue-500" to="/signup">Signup</nuxt-link></div>
+			<div class="text-center">Or <nuxt-link class="hover:underline text-blue-500"
+					to="/signup">Signup</nuxt-link></div>
 		</div>
 	</div>
 </template>
@@ -37,14 +42,13 @@ export default {
 	},
 	methods: {
 		async signup() {
-			const headers = useRequestHeaders(['cookie'])
+			const globalStore = useGlobalStore();
 			if (!this.username || !this.password) return;
 			const user = await $fetch('/api/login', {
 				method: 'post', body: {
 					username: this.username,
 					password: this.password
 				},
-				headers
 			}) as { userId: string; token: string; user: SafeUser; }
 
 			const userId = useCookie('userId')
@@ -52,9 +56,19 @@ export default {
 			const token = useCookie('sessionToken')
 			token.value = user.token
 
-			useGlobalStore().setUser(user.user)
+			setTimeout(async () => {
+				const headers = { Cookie: `sessionToken=${token.value}` }
+				const { servers, dms } = await $fetch('/api/user/getServers', { headers })
 
-			navigateTo('/channel/@me')
+				if (!servers || !dms) return;
+
+				globalStore.setServers(servers)
+				globalStore.setDms(dms)
+
+				globalStore.setUser(user.user)
+
+				navigateTo('/channel/@me')
+			})
 		}
 	}
 }

pages/signup.vue

@@ -48,7 +48,7 @@ export default {
 	},
 	methods: {
 		async signup() {
-			const headers = useRequestHeaders(['cookie']) as Record<string, string>
+			const globalStore = useGlobalStore();
 			if (!this.username || !this.password || !this.email) return;
 			const user = await $fetch('/api/signup', {
 				method: 'post', body: {
@@ -56,7 +56,6 @@ export default {
 					email: this.email,
 					password: this.password
 				},
-				headers
 			}) as { userId: string; token: string; user: SafeUser; }
 
 			const userId = useCookie('userId')
@@ -64,6 +63,12 @@ export default {
 			const token = useCookie('sessionToken')
 			token.value = user.token
 
+			const headers = { Cookie: `sessionToken=${token.value}`}
+			const { servers, dms } = await $fetch('/api/user/getServers', { headers })
+
+			globalStore.setServers(servers)
+			globalStore.setDms(dms)
+
 			useGlobalStore().setUser(user.user)
 
 			navigateTo('/channel/@me')