components/Message.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)" :id="props.last ? 'last-message' : undefined"
-			class="message normal-message" :class="{ 'mentioned': (props.replyMessage || props.isMentioned) && props.message.user.uuid != props.me.uuid && props.replyMessage?.user.uuid == props.me.uuid }" :data-message-id="props.messageId"
+			class="message normal-message" :class="{ 'mentioned': (props.replyMessage || props.isMentioned) && props.message.member.user.uuid != props.me.uuid && props.replyMessage?.member.user.uuid == props.me.uuid }" :data-message-id="props.messageId"
 			:editing.sync="props.editing" :replying-to.sync="props.replyingTo">
 		<div v-if="props.replyMessage" class="message-reply-svg">
 			<svg
@@ -25,7 +25,7 @@
 			</svg>
 		</div>
 		<MessageReply v-if="props.replyMessage" :id="props.message.uuid"
-			:author="getDisplayName(props.replyMessage.user)"
+			:author="getDisplayName(props.replyMessage.member)"
 			:text="props.replyMessage?.message"
 			:reply-id="props.replyMessage.uuid" max-width="reply" />
 		<div class="left-column">

components/MessageArea.vue

@@ -1,13 +1,13 @@
 <template>
 	<div id="message-area">
 		<div id="messages" ref="messagesElement">
-			<Message v-for="(message, i) of messages" :username="getDisplayName(message.user)" :key="message.uuid"
-				:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.user.avatar"
+			<Message v-for="(message, i) of messages" :username="getDisplayName(message.member.user)" :key="message.uuid"
+				:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.member.user.avatar"
 				:format="timeFormat" :type="messagesType[message.uuid]"
 				:margin-bottom="(messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal') ?? false"
-				:last="i == messages.length - 1" :message-id="message.uuid" :author="message.user" :me="me"
+				:last="i == messages.length - 1" :message-id="message.uuid" :author="message.member" :me="me"
 				:message="message" :is-reply="message.reply_to"
-				:author-color="`${generateIrcColor(message.user.uuid)}`"
+				:author-color="`${generateIrcColor(message.member.uuid)}`"
 				:reply-message="message.reply_to ? getReplyMessage(message.reply_to) : undefined" />
 		</div>
 		<div id="message-box" class="rounded-corners">
@@ -67,33 +67,33 @@ const previousMessage = ref<MessageResponse>();
 function groupMessage(message: MessageResponse, options?: { prevMessage?: MessageResponse, reverse?: boolean }) {
 	messageTimestamps.value[message.uuid] = uuidToTimestamp(message.uuid);
 	console.log("message:", message.message);
-	console.log("author:", message.user.username, `(${message.user.uuid})`);
+	console.log("author:", message.member.user.username, `(${message.member.uuid})`);
 
-	if (!previousMessage.value || previousMessage.value && message.user.uuid != previousMessage.value.user.uuid) {
+	if (!previousMessage.value || previousMessage.value && message.member.uuid != previousMessage.value.member.uuid) {
 		console.log("no previous message or author is different than last messsage's");
 		messagesType.value[message.uuid] = "normal";
 		previousMessage.value = message;
 		console.log("set previous message to:", previousMessage.value.message);
-		console.log(`setting first post by user ${message.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`);
-		firstMessageByUsers.value[message.user.uuid] = message;
+		console.log(`setting first post by user ${message.member.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`);
+		firstMessageByUsers.value[message.member.uuid] = message;
 		return;
 	}
 
 
-	const firstByUser = firstMessageByUsers.value[message.user.uuid];
+	const firstByUser = firstMessageByUsers.value[message.member.uuid];
 	if (firstByUser) {
 		console.log("first by user exists:", firstByUser);
-		if (message.user.uuid != firstByUser.user.uuid) {
+		if (message.member.uuid != firstByUser.member.uuid) {
 			console.log("message is by new user, setting their first message")
-			firstMessageByUsers.value[message.user.uuid] = message;
+			firstMessageByUsers.value[message.member.uuid] = message;
 			console.log("RETURNING FALSE");
 			messagesType.value[message.uuid] = "normal";
 			return;
 		}
 	} else {
 		console.log("first by user doesn't exist");
-		console.log(`setting first post by user ${message.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`);
-		firstMessageByUsers.value[message.user.uuid] = message;
+		console.log(`setting first post by user ${message.member.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`);
+		firstMessageByUsers.value[message.member.uuid] = message;
 		console.log("RETURNING FALSE");
 		messagesType.value[message.uuid] = "normal";
 		return;
@@ -111,8 +111,8 @@ function groupMessage(message: MessageResponse, options?: { prevMessage?: Messag
 	console.log("group?", lessThanMax);
 	if (!lessThanMax) {
 		console.log("diff exceeds max");
-		console.log(`setting first post by user ${message.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`)
-		firstMessageByUsers.value[message.user.uuid] = message;
+		console.log(`setting first post by user ${message.member.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`)
+		firstMessageByUsers.value[message.member.uuid] = message;
 		messagesType.value[message.uuid] = "normal";
 		return;
 	}

composables/api.ts

@@ -1,4 +1,4 @@
-import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse, StatsResponse, UserResponse } from "~/types/interfaces";
+import type { ChannelResponse, GuildMemberResponse, GuildMembersResponse, GuildResponse, MessageResponse, StatsResponse, UserResponse } from "~/types/interfaces";
 
 function ensureIsArray(list: any) {
 	if (Array.isArray(list)) {
@@ -33,8 +33,15 @@ export const useApi = () => {
 		return await fetchWithApi(`/channels/${channelId}`)
 	}
 
-	async function fetchMembers(guildId: string): Promise<GuildMemberResponse[]> {
-		return ensureIsArray(await fetchWithApi(`/guilds/${guildId}/members`));
+	async function fetchMembers(guildId: string, options?: { per_page?: number, page?: number }): Promise<GuildMembersResponse> {
+		const query = new URLSearchParams();
+		query.set("page", options?.page ? options.page.toString() : "1");
+		if (options?.per_page) {
+			query.set("per_page", options.per_page.toString());
+		}
+
+		console.log("members query:", query);
+		return await fetchWithApi(`/guilds/${guildId}/members?${query.toString()}`) as GuildMembersResponse;
 	}
 
 	async function fetchMember(guildId: string, memberId: string): Promise<GuildMemberResponse | undefined> {

pages/servers/[serverId]/channels/[channelId].vue

@@ -77,7 +77,10 @@ onActivated(async () => {
 });
 
 async function setArrayVariables() {
+	const membersRes = await fetchMembers(route.params.serverId as string);
+	members.value = membersRes.objects;
 	members.value = await fetchMembers(route.params.serverId as string);
+	console.log("Placeholder count:", totalMemberCount.value);
 	const guildUrl = `guilds/${route.params.serverId}`;
 	channels.value = await fetchWithApi(`${guildUrl}/channels`);
 	console.log("channels:", channels.value);

types/interfaces.ts

@@ -31,6 +31,13 @@ export interface GuildMemberResponse {
 	user: UserResponse
 }
 
+export interface GuildMembersResponse {
+	objects: GuildMemberResponse[],
+	amount: number,
+	pages: number,
+	page: number
+}
+
 export interface ChannelResponse {
 	uuid: string,
 	guild_uuid: string,
@@ -45,7 +52,7 @@ export interface MessageResponse {
 	user_uuid: string,
 	message: string,
 	reply_to: string | null,
-	user: UserResponse,
+	member: GuildMemberResponse,
 }
 
 export interface InviteResponse {

types/props.ts

@@ -1,9 +1,9 @@
-import type { MessageResponse, UserResponse } from "./interfaces";
+import type { GuildMemberResponse, MessageResponse, UserResponse } from "./interfaces";
 
 export interface MessageProps {
 	class?: string,
 	img?: string | null,
-	author: UserResponse
+	author: GuildMemberResponse
 	text: string,
 	timestamp: number,
 	format: "12" | "24",