added bad ui

index.tsx

@@ -1,8 +1,11 @@
+
+
 import { DataStore } from "@api/index";
+import { definePluginSettings } from "@api/Settings";
 import { Devs } from "@utils/constants";
-import definePlugin from "@utils/types";
+import definePlugin, { OptionType } from "@utils/types";
 import { cache } from "@webpack";
-import { Constants, MessageStore, RestAPI, UserStore } from "@webpack/common";
+import { Constants, Forms, MessageStore, Parser, RestAPI, useEffect, UserStore, useState } from "@webpack/common";
 import { Message } from "discord-types/general";
 
 const DATA_STORE_KEY = "huskchart";
@@ -11,6 +14,10 @@ type Husk = {
     channelId: string;
     messageId: string;
 };
+type SortedHusk = {
+    id: string;
+    count: number;
+};
 const messageCache = new Map<string, {
     message?: Message;
     fetched: boolean;
@@ -45,22 +52,79 @@ async function getMessage(channelId: string, messageId: string): Promise<Message
         return apiMessage.body[0];
     }
 }
+const UserData = () => {
+    // powered by generative ai, idk react :trolley:
+    const [data, setData] = useState([]);
+
+    useEffect(() => {
+        const fetchData = async () => {
+            const rawHusks: Husk[] = await DataStore.get(DATA_STORE_KEY) || [];
+            const unsortedHuskCountPerUser: SortedHusk[] = [];
+            for (const husk of rawHusks) {
+                let shouldAddInitialHusk = true;
+                for (const [i, hc] of unsortedHuskCountPerUser.entries()) {
+                    const unsortedHusker: SortedHusk = hc;
+                    if (unsortedHusker.id == husk.userId) {
+                        unsortedHuskCountPerUser[i].count++;
+                        shouldAddInitialHusk = false;
+                    }
+                }
+                if (!shouldAddInitialHusk) continue;
+                unsortedHuskCountPerUser.push({ id: husk.userId, count: 1 });
+            }
+            const sortedHuskers = unsortedHuskCountPerUser.sort((a, b) => b.count - a.count);
+            // @ts-ignore EXPLODEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE
+            setData(sortedHuskers);
+        };
+        fetchData();
+    }, []);
+
+    return (
+        <>
+            {
+                data && data.map(user => <>
+                    <div>
+                        {/* @ts-ignore */}
+                        {Parser.parse(`<@${user.id}>`)} <Forms.FormText>with {user.count} husks</Forms.FormText>
+                    </div>
+                </>)
+            }
+        </>
+    );
+};
 export default definePlugin({
     name: "HuskChart",
     description: "See how much you've been husked, and by who",
     authors: [Devs.nin0dev],
     flux: {
         async MESSAGE_REACTION_ADD(event) {
-            const msg = await getMessage(event.channelId, event.messageId);
-            if (msg!.author.id !== UserStore.getCurrentUser().id) return;
-            if (!event.emoji.name.includes("husk")) return;
-            let husks: Husk[] = await DataStore.get(DATA_STORE_KEY) || [];
-            husks.push({
-                userId: event.userId,
-                channelId: event.channelId,
-                messageId: event.messageId
-            });
-            DataStore.set(DATA_STORE_KEY, husks);
+            try {
+                const msg = await getMessage(event.channelId, event.messageId);
+                if (msg!.author.id !== UserStore.getCurrentUser().id) return;
+                if (!event.emoji.name.includes("husk")) return;
+                let husks: Husk[] = await DataStore.get(DATA_STORE_KEY) || [];
+                husks.push({
+                    userId: event.userId,
+                    channelId: event.channelId,
+                    messageId: event.messageId
+                });
+                DataStore.set(DATA_STORE_KEY, husks);
+            }
+            catch {
+                // explode
+            }
         }
-    }
+    },
+    settings: definePluginSettings({
+        buttons: {
+            type: OptionType.COMPONENT,
+            description: "User stats",
+            component: (aaa) => (
+                <>
+                    <Forms.FormText style={{ fontSize: "1.07rem", fontWeight: "500" }}>User stats</Forms.FormText>
+                    <UserData />
+                </>
+            )
+        }
+    })
 });