index.tsx

@@ -10,6 +10,7 @@ import { addAccessory } from "@api/MessageAccessories";
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
 import { Parser, React, Text } from "@webpack/common";
+import { Message } from "discord-types/general";
 
 let userFlags = new Map<string, Flag>();
 
@@ -26,22 +27,23 @@ type FlagRegistryEntry = {
     emoji: string;
 };
 
-const flagRegistry: Record<FlagType, FlagRegistryEntry> = {
+// worst typing ever?
+const flagRegistry: { [key in FlagType]: FlagRegistryEntry } = {
     [FlagType.DANGER]: {
         label: "Danger",
         color: "#ff7473",
         emoji: "🛑"
-    },
+    } as FlagRegistryEntry,
     [FlagType.WARNING]: {
         label: "Warning",
         color: "#ffb02e",
         emoji: "⚠️"
-    },
+    } as FlagRegistryEntry,
     [FlagType.INFO]: {
         label: "Info",
         color: "#62a8ff",
-        emoji: "ℹ️"
+        emoji: "🔵"
-    },
+    } as FlagRegistryEntry,
     [FlagType.POSITIVE]: {
         label: "Positive",
         color: "#62ff74",
@@ -55,24 +57,16 @@ 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[flag.type].color }}
+                style={{ color: flagRegistry[userFlags.get(id)?.type || ""]?.color }}
             >
-                {Parser.parse(flagRegistry[flag.type].emoji)} {flag.text}
+                {Parser.parse(flagRegistry[userFlags.get(id)?.type || ""]?.emoji)} {userFlags.get(id)?.text}
             </Text>
-        </div>
+        </div >
     );
 }
 
@@ -87,12 +81,15 @@ export default definePlugin({
             if (typeof savedFlags === "string") {
                 userFlags = new Map<string, Flag>(JSON.parse(savedFlags));
             } else {
-                userFlags = new Map<string, Flag>(savedFlags);
+                userFlags = new Map(savedFlags);
             }
         }
-        addAccessory("flag", (props: Record<string, any>) => (
+        addAccessory("flag", (props: Record<string, any>) => {
-            <Flag id={props.message.author.id} />
+            if (userFlags.has((props.message as Message).author.id)) {
-        ), 4);
+                return <Flag id={props.message.author.id} />;
+            }
+            return null;
+        }, 4);
     },
     commands: [
         {
@@ -107,9 +104,9 @@ export default definePlugin({
                     required: true
                 },
                 {
-                    name: "type",
+                    "name": "type",
-                    type: ApplicationCommandOptionType.STRING,
+                    "type": ApplicationCommandOptionType.STRING,
-                    description: "The type of flag to add",
+                    "description": "The type of flag to add",
                     choices: Object.entries(flagRegistry).map(([key, flag]) => ({
                         name: key,
                         label: flag.label,
@@ -133,7 +130,6 @@ export default definePlugin({
                     type,
                     text
                 });
-                subscribers.forEach(cb => cb());
                 sendBotMessage(ctx.channel.id, {
                     content: `Flag set on <@${user}> with content \`${text}\`!`
                 });
@@ -156,7 +152,6 @@ 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}>`
                 });