index.tsx

@@ -27,8 +27,7 @@ type FlagRegistryEntry = {
     emoji: string;
 };
 
-// worst typing ever?
-const flagRegistry: { [key in FlagType]: FlagRegistryEntry } = {
+const flagRegistry: Record<FlagType, FlagRegistryEntry> = {
     [FlagType.DANGER]: {
         label: "Danger",
         color: "#ff7473",
@@ -57,14 +56,22 @@ type Flag = {
     text: string;
 };
 
+const subscribers = new Set<() => void>();
+function subscribe(callback: () => void) {
+    subscribers.add(callback);
+    return () => subscribers.delete(callback);
+};
+
 function Flag({ id }: { id: string; }) {
+    const flag = React.useSyncExternalStore(subscribe, () => userFlags.get(id));
+    if (!flag) return null;
     return (
         <div>
             <Text
                 variant="text-md/bold"
-                style={{ color: flagRegistry[userFlags.get(id)?.type || ""]?.color }}
+                style={{ color: flagRegistry[flag.type].color }}
             >
-                {Parser.parse(flagRegistry[userFlags.get(id)?.type || ""]?.emoji)} {userFlags.get(id)?.text}
+                {Parser.parse(flagRegistry[flag.type].emoji)} {flag.text}
             </Text>
         </div >
     );
@@ -84,12 +91,9 @@ export default definePlugin({
                 userFlags = new Map(savedFlags);
             }
         }
-        addAccessory("flag", (props: Record<string, any>) => {
-            if (userFlags.has((props.message as Message).author.id)) {
-                return <Flag id={props.message.author.id} />;
-            }
-            return null;
-        }, 4);
+        addAccessory("flag", (props: Record<string, any>) => (
+            <Flag id={props.message.author.id} />
+        ), 4);
     },
     commands: [
         {
@@ -130,6 +134,7 @@ export default definePlugin({
                     type,
                     text
                 });
+                subscribers.forEach(cb => cb());
                 sendBotMessage(ctx.channel.id, {
                     content: `Flag set on <@${user}> with content \`${text}\`!`
                 });
@@ -152,6 +157,7 @@ export default definePlugin({
             execute: async (args: Argument[], ctx: CommandContext) => {
                 const user = findOption(args, "user", "");
                 userFlags.delete(user);
+                subscribers.forEach(cb => cb());
                 sendBotMessage(ctx.channel.id, {
                     content: `Flag removed from <@${user}>`
                 });