ungeneralized plugin

index.tsx

@@ -5,7 +5,7 @@ import { definePluginSettings } from "@api/Settings";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
 import { cache } from "@webpack";
-import { Constants, Forms, MessageStore, Parser, RestAPI, useEffect, UserStore, useState } from "@webpack/common";
+import { Button, Constants, Forms, MessageStore, Parser, RestAPI, Toasts, useEffect, UserStore, useState } from "@webpack/common";
 import { Message } from "discord-types/general";
 
 const DATA_STORE_KEY = "huskchart";
@@ -81,8 +81,11 @@ const UserData = () => {
 
     return (
         <>
-            <Forms.FormText style={{ fontSize: "1.07rem", fontWeight: "500" }}>User stats <a onClick={() => { collapsed ? collapse(false) : collapse(true); }}>[{collapsed ? "View all" : "Collapse"}]</a></Forms.FormText>
+            <Forms.FormText style={{ fontSize: "1.07rem", fontWeight: "500" }}>User stats {data.length > 6 && <a onClick={() => { collapsed ? collapse(false) : collapse(true); }}>[{collapsed ? "View all" : "Collapse"}]</a>}</Forms.FormText>
             <div style={{ display: "grid", gridTemplateColumns: "auto auto" }}>
+                {
+                    data.length === 0 && <Forms.FormText style={{ marginTop: "7px" }}>Nothing to see here.</Forms.FormText>
+                }
                 {
                     data && data.map(user => <>
                         {
@@ -112,9 +115,72 @@ const UserData = () => {
         </>
     );
 };
+const ChannelData = () => {
+    const [data, setData] = useState([]);
+    const [collapsed, collapse] = useState(true);
+
+    useEffect(() => {
+        const fetchData = async () => {
+            const rawHusks: Husk[] = await DataStore.get(DATA_STORE_KEY) || [];
+            const unsortedHuskCountPerChannel: SortedHusk[] = [];
+            for (const husk of rawHusks) {
+                let shouldAddInitialHusk = true;
+                for (const [i, hc] of unsortedHuskCountPerChannel.entries()) {
+                    const unsortedHusker: SortedHusk = hc;
+                    if (unsortedHusker.id == husk.channelId) {
+                        unsortedHuskCountPerChannel[i].count++;
+                        shouldAddInitialHusk = false;
+                    }
+                }
+                if (!shouldAddInitialHusk) continue;
+                unsortedHuskCountPerChannel.push({ id: husk.channelId, count: 1 });
+            }
+            const sortedHuskers = unsortedHuskCountPerChannel.sort((a, b) => b.count - a.count);
+            // @ts-ignore EXPLODEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE
+            setData(sortedHuskers);
+        };
+        fetchData();
+    }, []);
+
+    return (
+        <>
+            <Forms.FormText style={{ fontSize: "1.07rem", fontWeight: "500" }}>Channel stats {data.length > 6 && <a onClick={() => { collapsed ? collapse(false) : collapse(true); }}>[{collapsed ? "View all" : "Collapse"}]</a>}</Forms.FormText>
+            <div style={{ display: "grid", gridTemplateColumns: "auto auto" }}>
+                {
+                    data.length === 0 && <Forms.FormText style={{ marginTop: "7px" }}>Nothing to see here.</Forms.FormText>
+                }
+                {
+                    data && data.map(channel => <>
+                        {
+                            collapsed && <>
+                                {
+                                    data.indexOf(channel) < 6 &&
+                                    <div style={{ marginTop: data.indexOf(channel) < 2 ? "0" : "7px" }}>
+                                        {/* @ts-ignore */}
+                                        {Parser.parse(`<#${channel.id}>`)} <Forms.FormText style={{ marginTop: "4px" }}>with {channel.count} {channel.count > 1 ? "husks" : "husk"}</Forms.FormText>
+                                    </div>
+                                }
+                            </>
+                        }
+                        {
+                            !collapsed && <>
+                                {
+                                    <div style={{ marginTop: data.indexOf(channel) < 2 ? "0" : "7px" }}>
+                                        {/* @ts-ignore */}
+                                        {Parser.parse(`<#${channel.id}>`)} <Forms.FormText style={{ marginTop: "4px" }}>with {channel.count} {channel.count > 1 ? "husks" : "husk"}</Forms.FormText>
+                                    </div>
+                                }
+                            </>
+                        }
+                    </>)
+                }
+            </div>
+        </>
+    );
+};
 export default definePlugin({
-    name: "HuskChart",
+    name: "ReactionTracker",
-    description: "See how much you've been husked, and by who",
+    description: "See how much you've been reacted with a specific emoji, and by who",
     authors: [Devs.nin0dev],
     flux: {
         async MESSAGE_REACTION_ADD(event) {
@@ -137,15 +203,39 @@ export default definePlugin({
         }
     },
     settings: definePluginSettings({
+        emojiToTrack: {
+            type: OptionType.STRING,
+            description: "The emoji to track (type its name, any emoji containing that name will be tracked)",
+            default: "husk",
+            placeholder: "emojiname (no :)"
+        },
         buttons: {
             type: OptionType.COMPONENT,
-            description: "User stats",
+            description: "stats",
-            component: (aaa) => (
+            component: () => (
                 <>
-
                     <UserData />
+                    <ChannelData />
                 </>
             )
+        },
+        clearAll: {
+            type: OptionType.COMPONENT,
+            description: "clear",
+            component: () => (
+                <Button color={Button.Colors.RED} onClick={() => {
+                    DataStore.set(DATA_STORE_KEY, []); Toasts.show({
+                        id: Toasts.genId(),
+                        message: "Cleared all data, reopen settings to see changes",
+                        type: Toasts.Type.SUCCESS,
+                        options: {
+                            position: Toasts.Position.BOTTOM, // NOBODY LIKES TOASTS AT THE TOP
+                        },
+                    });
+                }}>
+                    Clear all data
+                </Button>
+            )
         }
     })
 });