From edb16ad7c0b295278f45916d7fd099992da7345d Mon Sep 17 00:00:00 2001
From: Puyodead1 <puyodead@proton.me>
Date: Sun, 3 Mar 2024 13:44:30 -0500
Subject: [PATCH] some refactoring to improve message author role color
 fetching

---
 src/components/messaging/Message.tsx       |  2 +-
 src/components/messaging/MessageAuthor.tsx | 21 ++++++++++++---------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/components/messaging/Message.tsx b/src/components/messaging/Message.tsx
index 8c30799..666abc4 100644
--- a/src/components/messaging/Message.tsx
+++ b/src/components/messaging/Message.tsx
@@ -50,7 +50,7 @@ function Message({ message, header }: Props) {
 			<MessageContent>
 				{header && (
 					<span className="message-details">
-						<MessageAuthor message={message} />
+						<MessageAuthor message={message} guild={guild} />
 						<MessageDetails message={message} position="top" />
 					</span>
 				)}
diff --git a/src/components/messaging/MessageAuthor.tsx b/src/components/messaging/MessageAuthor.tsx
index c8e1f04..d63fc2d 100644
--- a/src/components/messaging/MessageAuthor.tsx
+++ b/src/components/messaging/MessageAuthor.tsx
@@ -2,7 +2,9 @@ import { observer } from "mobx-react-lite";
 import React, { useContext } from "react";
 import styled from "styled-components";
 import { ContextMenuContext } from "../../contexts/ContextMenuContext";
+import useLogger from "../../hooks/useLogger";
 import { useAppStore } from "../../stores/AppStore";
+import Guild from "../../stores/objects/Guild";
 import GuildMember from "../../stores/objects/GuildMember";
 import { MessageLike } from "../../stores/objects/Message";
 import Floating from "../floating/Floating";
@@ -21,14 +23,17 @@ const Container = styled.div`
 
 interface Props {
 	message: MessageLike;
+	guild?: Guild;
 }
 
-function MessageAuthor({ message }: Props) {
+function MessageAuthor({ message, guild }: Props) {
 	const app = useAppStore();
+	const logger = useLogger("MessageAuthor");
 	const contextMenu = useContext(ContextMenuContext);
 	const [color, setColor] = React.useState<string | undefined>(undefined);
 	const [eventData, setEventData] = React.useState<React.MouseEvent<HTMLDivElement, MouseEvent> | undefined>();
 	const [member, setMember] = React.useState<GuildMember | undefined>(undefined);
+	const { members } = guild || {};
 
 	React.useEffect(() => {
 		if (!eventData) return;
@@ -44,14 +49,12 @@ function MessageAuthor({ message }: Props) {
 	};
 
 	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;
-			setColor(member.roleColor);
-		}
-	}, [message]);
+		if (!members) return;
+
+		const member = members.get(message.author.id);
+		if (!member) return;
+		setColor(member.roleColor);
+	}, [message, members]);
 
 	return (
 		<Floating