reactions and a bunch of bug fixes

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

@@ -13,27 +13,27 @@ definePageMeta({
 export default {
 	async setup() {
 		const route = useRoute()
-
 		const headers = useRequestHeaders(['cookie']) as Record<string, string>
 		const server: IChannel = await $fetch(`/api/channels/${route.params.id}`, { headers })
+
 		if (!server) throw new Error('could not find the dm')
+
 		useGlobalStore().addDM(server);
 		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);
+		useGlobalStore().setActiveServer('dms', route.params.id);
 
-		function parseBody(body) {
+		function parseBody(body: string) {
 			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)
+					const user = server.dmParticipants?.find((e) => e.id === id)
+					if (!user) return;
 					body = body.split(e).join(`@${user.username}`)
 				});
 			}
-
 			return body
 		}
 
@@ -41,6 +41,8 @@ export default {
 			e.body = parseBody(e.body)
 		})
 
+		useGlobalStore().setActiveChannel(server)
+
 		return {
 			server
 		}
@@ -48,7 +50,9 @@ export default {
 	async updated() {
 		const route = useRoute()
 		if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumably?')
-		if (useGlobalStore().activeServer !== this.server) useGlobalStore().setActive('dms', route.params.id)
+		if (useGlobalStore().activeServer !== this.server) {
+			useGlobalStore().setActiveServer('dms', route.params.id)
+		}
 	},
 }
 </script>

pages/channel/@me/index.vue

@@ -20,7 +20,7 @@ export default {
 		}
 	},
 	mounted() {
-		useGlobalStore().setActive('dms', '@me')
+		useGlobalStore().setActiveServer('dms', '@me')
 	},
 	methods: {
 		async startDM() {

pages/channel/[id].vue

@@ -3,6 +3,7 @@
 </template>
 
 <script lang="ts">
+import { Server } from 'socket.io';
 import { useGlobalStore } from '~/stores/store'
 import { IChannel } from '~/types'
 
@@ -11,43 +12,17 @@ definePageMeta({
 })
 
 export default {
-	async setup() {
-		const route = useRoute()
-
-		const headers = useRequestHeaders(['cookie']) as Record<string, string>
-		const server: IChannel = await $fetch(`/api/channels/${route.params.id}`, { headers })
-
-		const realServer = useGlobalStore().servers?.find((e) => e.channels.some((el) => el.id == route.params.id))
-
-		if (!realServer) throw new Error('realServer not found, this means that the channel is serverless but not a dm????');
-		useGlobalStore().addServer(realServer);
-		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)
-		})
-
+	data() {
 		return {
-			server,
+			socket: storeToRefs(useGlobalStore()).socket as unknown as Server,
 		}
 	},
+	mounted() {
+		this.socket.on(`addChannel-${this.server.serverId}`, (ev) => {
+			const newChannel = ev as IChannel
+			useGlobalStore().addChannel(this.server.serverId, newChannel)
+		})
+	},
 	async updated() {
 		const route = useRoute()
 		const headers = useRequestHeaders(['cookie']) as Record<string, string>;
@@ -57,8 +32,47 @@ export default {
 
 		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)
+			useGlobalStore().setActiveServer('servers', route.params.id)
+			// update the server with the refreshed data
+			useGlobalStore().updateServer(route.params.id, this.server.server)
 		}
-	}
+	},
+	async setup() {
+		const route = useRoute()
+		const headers = useRequestHeaders(['cookie']) as Record<string, string>
+		const server: IChannel = await $fetch(`/api/channels/${route.params.id}`, { headers })
+
+		const realServer = useGlobalStore().servers?.find((e) => e.channels.some((el) => el.id == route.params.id))
+
+		if (!realServer) throw new Error('realServer not found, this means that the channel is serverless but not a dm????');
+		useGlobalStore().addServer(realServer);
+		if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumiably?')
+		useGlobalStore().setActiveServer('servers', route.params.id)
+
+		function parseBody(body: string) {
+			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)
+					if (!user) return;
+					body = body.split(e).join(`@${user.username}`)
+				});
+			}
+			return body
+		}
+
+		server.messages?.forEach((e) => {
+			e.body = parseBody(e.body)
+		})
+
+		useGlobalStore().setActiveChannel(server)
+
+		return {
+			server,
+		}
+	},
 }
 </script>

pages/signup.vue

@@ -63,15 +63,19 @@ 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 })
+			setTimeout(async () => {
+				const headers = { Cookie: `sessionToken=${token.value}` }
+				const { servers, dms } = await $fetch('/api/user/getServers', { headers })
 
-			globalStore.setServers(servers)
-			globalStore.setDms(dms)
+				if (!servers || !dms) return;
 
-			useGlobalStore().setUser(user.user)
+				globalStore.setServers(servers)
+				globalStore.setDms(dms)
 
-			navigateTo('/channel/@me')
+				globalStore.setUser(user.user)
+
+				navigateTo('/channel/@me')
+			})
 		}
 	}
 }