WhoReacted — FiveCord

index.tsx

Download

Source

src/plugins/whoReacted/index.tsx

1import ErrorBoundary from "@components/ErrorBoundary";

2import { Devs } from "@utils/constants";

3import { sleep } from "@utils/misc";

4import { Queue } from "@utils/Queue";

5import { useForceUpdater } from "@utils/react";

6import definePlugin from "@utils/types";

7import { CustomEmoji, Message, ReactionEmoji, User } from "@vencord/discord-types";

import { ChannelStore, Constants, FluxDispatcher, React, RestAPI, useEffect, useLayoutEffect, UserStore, UserSummaryItem } from "@webpack/common";

10interface ReactionCacheEntry {

11 fetched: boolean;

12 users: Map<string, User>;

13}

15interface ReactionProps {

16 message: Message;

17 emoji: CustomEmoji;

18 type: number;

19}

21let Scroll: any = null;

22const queue = new Queue();

23let reactions: Record<string, ReactionCacheEntry> = {};

25function fetchReactions(msg: Message, emoji: ReactionEmoji, type: number) {

26 const key = emoji.name + (emoji.id ? `:${emoji.id}` : "");

27 return RestAPI.get({

28 url: Constants.Endpoints.REACTIONS(msg.channel_id, msg.id, key),

29 query: {

30 limit: 100,

31 type

32 },

33 oldFormErrors: true

34 })

35 .then(res => {

36 for (const user of res.body) {

37 FluxDispatcher.dispatch({

38 type: "USER_UPDATE",

39 user

40 });

41 }

43 FluxDispatcher.dispatch({

44 type: "MESSAGE_REACTION_ADD_USERS",

45 channelId: msg.channel_id,

46 messageId: msg.id,

47 users: res.body,

48 emoji,

49 reactionType: type

50 });

51 })

52 .catch(console.error)

53 .finally(() => sleep(250));

54}

56function getReactionsWithQueue(msg: Message, e: ReactionEmoji, type: number) {

57 const key = `${msg.id}:${e.name}:${e.id ?? ""}:${type}`;

58 const cache = reactions[key] ??= { fetched: false, users: new Map() };

59 if (!cache.fetched) {

60 queue.unshift(() => fetchReactions(msg, e, type));

61 cache.fetched = true;

62 }

64 return cache.users;

65}

67function handleClickAvatar(event: React.UIEvent<HTMLElement, Event>) {

68 event.stopPropagation();

69}

71function ReactionUsers({ message, emoji, type }: ReactionProps) {

72 const forceUpdate = useForceUpdater();

74 useLayoutEffect(() => { class="ts-cmt">// bc need to prevent autoscrolling

75 if (Scroll?.scrollCounter > 0) {

76 Scroll.setAutomaticAnchor(null);

77 }

78 });

80 useEffect(() => {

81 const cb = (e: any) => {

82 if (e?.messageId === message.id)

83 forceUpdate();

84 };

85 FluxDispatcher.subscribe("MESSAGE_REACTION_ADD_USERS", cb);

87 return () => FluxDispatcher.unsubscribe("MESSAGE_REACTION_ADD_USERS", cb);

88 }, [message.id, forceUpdate]);

90 const reactions = getReactionsWithQueue(message, emoji, type);

91 const users = Array.from(reactions, ([id]) => UserStore.getUser(id)).filter(Boolean);

93 return (

94 <div

95 style={{ marginLeft: "0.5em", transform: "scale(0.9)" }}

96 >

97 <div onClick={handleClickAvatar} onKeyDown={handleClickAvatar}>

98 <UserSummaryItem

99 users={users}

100 guildId={ChannelStore.getChannel(message.channel_id)?.guild_id}

101 renderIcon={false}

102 max={5}

103 showDefaultAvatarsForNullUsers

104 showUserPopout

105 />

106 </div>

107 </div>

108 );

109}

110

111export default definePlugin({

112 name: "WhoReacted",

113 description: "Renders the avatars of users who reacted to a message",

114 tags: ["Reactions", "Chat", "Appearance"],

115 authors: [Devs.Ven, Devs.KannaDev, Devs.newwares],

116

117 patches: [

118 {

119 find: ",reactionRef:",

120 replacement: {

121

                match: /(\i)\?null:\(0,\i\.jsx\)\(\i\.\i,{className:\i\.reactionCount,.*?}\),(?<=(emoji:\i,message:\i,type:\i).+?)/,

122 replace: "$&$1?null:$self.renderUsers({$2}),"

123 }

124 },

125 {

126 find: '"MessageReactionsStore"',

127 replacement: {

128 match: /CONNECTION_OPEN:function{(\i)={}/,

129 replace: "$&;$self.reactions=$1;"

130 }

131 },

132 {

133

134 find: "cleanAutomaticAnchor(){",

135 replacement: {

136 match: /constructor$\i$\{(?=.{0,100}(?:automaticAnchor|\.messages\.loadingMore))/,

137 replace: "$&$self.setScrollObj(this);"

138 }

139 }

140 ],

141

142 renderUsers: ErrorBoundary.wrap((props: ReactionProps) => {

143 return props.message.reactions.length > 10

144 ? null

145 : <ReactionUsers {...props} />;

146 }, { noop: true }),

147

148 setScrollObj(scroll: any) {

149 Scroll = scroll;

150 },

151

152 set reactions(value: any) {

153 reactions = value;

154 }

155});

156

import ErrorBoundary from "@components/ErrorBoundary";
import { Devs } from "@utils/constants";
import { sleep } from "@utils/misc";
import { Queue } from "@utils/Queue";
import { useForceUpdater } from "@utils/react";
import definePlugin from "@utils/types";
import { CustomEmoji, Message, ReactionEmoji, User } from "@vencord/discord-types";
import { ChannelStore, Constants, FluxDispatcher, React, RestAPI, useEffect, useLayoutEffect, UserStore, UserSummaryItem } from "@webpack/common";

interface ReactionCacheEntry {
    fetched: boolean;
    users: Map<string, User>;
}

interface ReactionProps {
    message: Message;
    emoji: CustomEmoji;
    type: number;
}

let Scroll: any = null;
const queue = new Queue();
let reactions: Record<string, ReactionCacheEntry> = {};

function fetchReactions(msg: Message, emoji: ReactionEmoji, type: number) {
    const key = emoji.name + (emoji.id ? `:${emoji.id}` : "");
    return RestAPI.get({
        url: Constants.Endpoints.REACTIONS(msg.channel_id, msg.id, key),
        query: {
            limit: 100,
            type
        },
        oldFormErrors: true
    })
        .then(res => {
            for (const user of res.body) {
                FluxDispatcher.dispatch({
                    type: "USER_UPDATE",
                    user
                });
            }

            FluxDispatcher.dispatch({
                type: "MESSAGE_REACTION_ADD_USERS",
                channelId: msg.channel_id,
                messageId: msg.id,
                users: res.body,
                emoji,
                reactionType: type
            });
        })
        .catch(console.error)
        .finally(() => sleep(250));
}

function getReactionsWithQueue(msg: Message, e: ReactionEmoji, type: number) {
    const key = `${msg.id}:${e.name}:${e.id ?? ""}:${type}`;
    const cache = reactions[key] ??= { fetched: false, users: new Map() };
    if (!cache.fetched) {
        queue.unshift(() => fetchReactions(msg, e, type));
        cache.fetched = true;
    }

    return cache.users;
}

function handleClickAvatar(event: React.UIEvent<HTMLElement, Event>) {
    event.stopPropagation();
}

function ReactionUsers({ message, emoji, type }: ReactionProps) {
    const forceUpdate = useForceUpdater();

    useLayoutEffect(() => { // bc need to prevent autoscrolling
        if (Scroll?.scrollCounter > 0) {
            Scroll.setAutomaticAnchor(null);
        }
    });

    useEffect(() => {
        const cb = (e: any) => {
            if (e?.messageId === message.id)
                forceUpdate();
        };
        FluxDispatcher.subscribe("MESSAGE_REACTION_ADD_USERS", cb);

        return () => FluxDispatcher.unsubscribe("MESSAGE_REACTION_ADD_USERS", cb);
    }, [message.id, forceUpdate]);

    const reactions = getReactionsWithQueue(message, emoji, type);
    const users = Array.from(reactions, ([id]) => UserStore.getUser(id)).filter(Boolean);

    return (
        <div
            style={{ marginLeft: "0.5em", transform: "scale(0.9)" }}
        >
            <div onClick={handleClickAvatar} onKeyDown={handleClickAvatar}>
                <UserSummaryItem
                    users={users}
                    guildId={ChannelStore.getChannel(message.channel_id)?.guild_id}
                    renderIcon={false}
                    max={5}
                    showDefaultAvatarsForNullUsers
                    showUserPopout
                />
            </div>
        </div>
    );
}

export default definePlugin({
    name: "WhoReacted",
    description: "Renders the avatars of users who reacted to a message",
    tags: ["Reactions", "Chat", "Appearance"],
    authors: [Devs.Ven, Devs.KannaDev, Devs.newwares],

    patches: [
        {
            find: ",reactionRef:",
            replacement: {
                match: /(\i)\?null:\(0,\i\.jsx\)\(\i\.\i,{className:\i\.reactionCount,.*?}\),(?<=(emoji:\i,message:\i,type:\i).+?)/,
                replace: "$&$1?null:$self.renderUsers({$2}),"
            }
        },
        {
            find: '"MessageReactionsStore"',
            replacement: {
                match: /CONNECTION_OPEN:function\(\){(\i)={}/,
                replace: "$&;$self.reactions=$1;"
            }
        },
        {

            find: "cleanAutomaticAnchor(){",
            replacement: {
                match: /constructor\(\i\)\{(?=.{0,100}(?:automaticAnchor|\.messages\.loadingMore))/,
                replace: "$&$self.setScrollObj(this);"
            }
        }
    ],

    renderUsers: ErrorBoundary.wrap((props: ReactionProps) => {
        return props.message.reactions.length > 10
            ? null
            : <ReactionUsers {...props} />;
    }, { noop: true }),

    setScrollObj(scroll: any) {
        Scroll = scroll;
    },

    set reactions(value: any) {
        reactions = value;
    }
});

Source

FiveCord for Windows