role colors in messages

src/components/messaging/Chat.tsx

@@ -1,4 +1,6 @@
+import { runInAction } from "mobx";
 import { observer } from "mobx-react-lite";
+import React from "react";
 import styled from "styled-components";
 import useLogger from "../../hooks/useLogger";
 import { useAppStore } from "../../stores/AppStore";
@@ -77,13 +79,13 @@ function Chat({ channel, guild, guildId }: Props) {
 	const app = useAppStore();
 	const logger = useLogger("Messages");
 
-	// React.useEffect(() => {
-	// 	if (!channel || !guild) return;
+	React.useEffect(() => {
+		if (!channel || !guild) return;
 
-	// 	runInAction(() => {
-	// 		app.gateway.onChannelOpen(guild.id, channel.id);
-	// 	});
-	// }, [channel, guild]);
+		runInAction(() => {
+			app.gateway.onChannelOpen(guild.id, channel.id);
+		});
+	}, [channel, guild]);
 
 	if (guildId && guildId === "@me") {
 		return (

src/components/messaging/Message.tsx

@@ -9,6 +9,7 @@ import Avatar from "../Avatar";
 import { Link } from "../Link";
 import { IContextMenuItem } from "./../ContextMenuItem";
 import MessageAttachment from "./MessageAttachment";
+import MessageAuthor from "./MessageAuthor";
 import MessageBase from "./MessageBase";
 import MessageEmbed from "./MessageEmbed";
 import MessageTimestamp from "./MessageTimestamp";
@@ -43,11 +44,6 @@ const MessageHeader = styled.div`
 	align-items: center;
 `;
 
-const MessageAuthor = styled.div`
-	font-size: 16px;
-	font-weight: var(--font-weight-medium);
-`;
-
 const MessageContent = styled.div<{ sending?: boolean; failed?: boolean }>`
 	font-size: 16px;
 	font-weight: var(--font-weight-light);
@@ -116,7 +112,7 @@ function Message({ message, isHeader, isSending, isFailed }: Props) {
 				<MessageContentContainer isHeader={showHeader}>
 					{showHeader && (
 						<MessageHeader>
-							<MessageAuthor>{message.author.username}</MessageAuthor>
+							<MessageAuthor message={message} />
 							<MessageTimestamp date={message.timestamp} />
 						</MessageHeader>
 					)}

src/components/messaging/MessageAuthor.tsx

@@ -0,0 +1,45 @@
+import { observer } from "mobx-react-lite";
+import React from "react";
+import styled from "styled-components";
+import { useAppStore } from "../../stores/AppStore";
+import { MessageLike } from "../../stores/objects/Message";
+
+const Container = styled.div`
+	font-size: 16px;
+	font-weight: var(--font-weight-medium);
+`;
+
+interface Props {
+	message: MessageLike;
+}
+
+function MessageAuthor({ message }: Props) {
+	const app = useAppStore();
+	const [color, setColor] = React.useState<string | undefined>(undefined);
+
+	React.useEffect(() => {
+		if ("guild_id" in message && message.guild_id) {
+			const guild = app.guilds.get(message.guild_id);
+			if (!guild) return;
+			const member = guild.members.get(message.author.id);
+			if (!member) return;
+			const highestRole = member.roles.reduce((prev, role) => {
+				if (role.position > prev.position) return role;
+				return prev;
+			}, member.roles[0]);
+			setColor(highestRole?.color);
+		}
+	}, [message]);
+
+	return (
+		<Container
+			style={{
+				color,
+			}}
+		>
+			{message.author.username}
+		</Container>
+	);
+}
+
+export default observer(MessageAuthor);

src/components/messaging/MessageInput.tsx

@@ -100,7 +100,7 @@ function MessageInput({ channel }: Props) {
 			content: contentCopy,
 			files: attachmentsCopy,
 			author: app.account!.raw,
-			channel: channel.id,
+			channel_id: channel.id,
 			timestamp: new Date().toISOString(),
 			type: MessageType.Default,
 		});

src/stores/AppStore.ts

@@ -4,7 +4,6 @@ import secureLocalStorage from "react-secure-storage";
 import Logger from "../utils/Logger";
 import REST from "../utils/REST";
 import AccountStore from "./AccountStore";
-import ChannelStore from "./ChannelStore";
 import ExperimentsStore from "./ExperimentsStore";
 import GatewayConnectionStore from "./GatewayConnectionStore";
 import GuildStore from "./GuildStore";
@@ -34,7 +33,7 @@ export default class AppStore {
 	@observable account: AccountStore | null = null;
 	@observable gateway = new GatewayConnectionStore(this);
 	@observable guilds = new GuildStore(this);
-	@observable channels = new ChannelStore(this);
+	// @observable channels = new ChannelStore(this);
 	@observable users = new UserStore();
 	@observable privateChannels = new PrivateChannelStore(this);
 	@observable rest = new REST(this);

src/stores/GuildMemberListStore.ts

@@ -63,21 +63,19 @@ export default class GuildMemberListStore {
 								data: [],
 							});
 						} else {
-							// try to get the existing member
-							if (item.member.user?.id) {
-								const member = this.guild.members.get(item.member.user.id);
-								if (member) {
-									listData[listData.length - 1].data.push({
-										member,
-										index: item.member.index,
-									});
-									return;
-								}
+							const member = this.guild.members.get(item.member.id);
+							if (member) {
+								listData[listData.length - 1].data.push({
+									member,
+									index: item.member.index,
+								});
+							} else {
+								const member = this.guild.members.add(item.member);
+								listData[listData.length - 1].data.push({
+									member: member!,
+									index: item.member.index,
+								});
 							}
-							listData[listData.length - 1].data.push({
-								member: new GuildMember(this.app, this.guild, item.member),
-								index: item.member.index,
-							});
 						}
 					}
 

src/stores/GuildMemberStore.ts

@@ -26,7 +26,10 @@ export default class GuildMemberStore {
 		if (this.members.has(member.user.id)) {
 			return;
 		}
-		this.members.set(member.user.id, new GuildMember(this.app, this.guild, member));
+		const m = new GuildMember(this.app, this.guild, member);
+		this.members.set(member.user.id, m);
+		console.log(`added member ${m.user?.username}`);
+		return m;
 	}
 
 	@action

src/stores/MessageQueue.ts

@@ -37,7 +37,7 @@ export default class MessageQueue {
 
 	@computed
 	get(channel: Snowflake) {
-		return this.messages.filter((message) => message.channel === channel);
+		return this.messages.filter((message) => message.channel_id === channel);
 	}
 
 	@action

src/stores/objects/Channel.ts

@@ -267,4 +267,10 @@ export default class Channel {
 			this.typing = null;
 		}
 	}
+
+	@computed
+	get guild() {
+		if (!this.guildId) return undefined;
+		return this.app.guilds.get(this.guildId);
+	}
 }

src/stores/objects/Guild.ts

@@ -103,6 +103,7 @@ export default class Guild {
 		this.roles.addAll(data.roles);
 		// FIXME: hack to prevent errors after guild creation where channels is undefined
 		if (data.channels) {
+			console.log(data.channels);
 			this.channels.addAll(data.channels);
 		}
 

src/stores/objects/Message.ts

@@ -198,8 +198,9 @@ export default class Message extends MessageBase {
 	 * It can be used to estimate the relative position of the message in a thread in company with `total_message_sent` on parent thread
 	 */
 	position?: number;
+	guild_id?: Snowflake;
 
-	constructor(app: AppStore, data: APIMessage) {
+	constructor(app: AppStore, data: APIMessage & { guild_id?: Snowflake }) {
 		super(app, data);
 
 		this.id = data.id;
@@ -232,6 +233,9 @@ export default class Message extends MessageBase {
 		this.sticker_items = data.sticker_items;
 		this.stickers = data.stickers;
 		this.position = data.position;
+		if (data.guild_id) {
+			this.guild_id = data.guild_id;
+		}
 
 		makeObservable(this);
 	}

src/stores/objects/QueuedMessage.ts

@@ -10,7 +10,7 @@ export enum QueuedMessageStatus {
 
 export type QueuedMessageData = {
 	id: string;
-	channel: string;
+	channel_id: string;
 	content: string;
 	files?: File[];
 	timestamp: string;
@@ -19,7 +19,7 @@ export type QueuedMessageData = {
 };
 
 export default class QueuedMessage extends MessageBase {
-	channel: string;
+	channel_id: string;
 	files?: File[];
 	@observable progress = 0;
 	@observable status: QueuedMessageStatus;
@@ -29,7 +29,7 @@ export default class QueuedMessage extends MessageBase {
 	constructor(app: AppStore, data: QueuedMessageData) {
 		super(app, data);
 		this.id = data.id;
-		this.channel = data.channel;
+		this.channel_id = data.channel_id;
 		this.files = data.files;
 		this.status = QueuedMessageStatus.SENDING;