Temporary member nickname / role colour solution.

external/lang

@@ -1 +1 @@
-Subproject commit ab87bdcf15d60cfb6f3bd52af445456e5fd23e5f
+Subproject commit f3c991242044c0125111e533a94350633a681d62

package.json

@@ -94,7 +94,7 @@
     "react-router-dom": "^5.2.0",
     "react-scroll": "^1.8.2",
     "redux": "^4.1.0",
-    "revolt.js": "^4.3.3-alpha.18",
+    "revolt.js": "^4.3.3-alpha.19",
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",
     "shade-blend-color": "^1.0.0",

src/components/common/AutoComplete.tsx

@@ -144,7 +144,7 @@ export function useAutoComplete(
                                 break;
                             case "TextChannel":
                                 const server = channel.server;
-                                users = client.servers.members
+                                users = client.members
                                     .toArray()
                                     .filter(
                                         (x) => x._id.substr(0, 26) === server,

src/components/common/user/UserShort.tsx

@@ -1,16 +1,51 @@
+import { useParams } from "react-router-dom";
 import { User } from "revolt.js";
 
 import { Text } from "preact-i18n";
 
+import {
+    useForceUpdate,
+    useMember,
+    useServer,
+} from "../../../context/revoltjs/hooks";
+
 import UserIcon from "./UserIcon";
 
 export function Username({
     user,
     ...otherProps
 }: { user?: User } & JSX.HTMLAttributes<HTMLElement>) {
+    let username = user?.username;
+    let color;
+
+    // ! this must be really bad for perf.
+    if (user) {
+        let { server } = useParams<{ server?: string }>();
+        if (server) {
+            let ctx = useForceUpdate();
+            let member = useMember(`${server}${user._id}`, ctx);
+            if (member) {
+                if (member.nickname) {
+                    username = member.nickname;
+                }
+
+                if (member.roles && member.roles.length > 0) {
+                    let s = useServer(server, ctx);
+                    for (let role of member.roles) {
+                        let c = s?.roles?.[role].colour;
+                        if (c) {
+                            color = c;
+                            continue;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
     return (
-        <span {...otherProps}>
+        <span {...otherProps} style={{ color }}>
-            {user?.username ?? <Text id="app.main.channel.unknown_user" />}
+            {username ?? <Text id="app.main.channel.unknown_user" />}
         </span>
     );
 }

src/components/navigation/items/ButtonItem.tsx

@@ -14,6 +14,7 @@ import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import ChannelIcon from "../../common/ChannelIcon";
 import Tooltip from "../../common/Tooltip";
 import UserIcon from "../../common/user/UserIcon";
+import { Username } from "../../common/user/UserShort";
 import UserStatus from "../../common/user/UserStatus";
 import IconButton from "../../ui/IconButton";
 
@@ -63,7 +64,9 @@ export function UserButton(props: UserProps) {
                 status
             />
             <div className={styles.name}>
-                <div>{user.username}</div>
+                <div>
+                    <Username user={user} />
+                </div>
                 {
                     <div className={styles.subText}>
                         {channel?.last_message && alert ? (

src/components/navigation/right/MemberSidebar.tsx

@@ -186,7 +186,7 @@ export function ServerMemberSidebar({
 
     useEffect(() => {
         if (status === ClientStatus.ONLINE && typeof members === "undefined") {
-            client.servers.members
+            client.members
                 .fetchMembers(channel.server)
                 .then((members) => setMembers(members));
         }

src/context/intermediate/modals/Prompt.tsx

@@ -304,7 +304,7 @@ export function SpecialPromptModal(props: SpecialProps) {
                                 setProcessing(true);
 
                                 try {
-                                    await client.servers.members.kickMember(
+                                    await client.members.kickMember(
                                         props.target._id,
                                         props.user,
                                     );

src/context/revoltjs/events.ts

@@ -112,7 +112,7 @@ export function registerEvents(
         client.users.addListener("mutation", logMutation);
         client.servers.addListener("mutation", logMutation);
         client.channels.addListener("mutation", logMutation);
-        client.servers.members.addListener("mutation", logMutation);
+        client.members.addListener("mutation", logMutation);
     }
 
     const online = () => {
@@ -146,7 +146,7 @@ export function registerEvents(
             client.users.removeListener("mutation", logMutation);
             client.servers.removeListener("mutation", logMutation);
             client.channels.removeListener("mutation", logMutation);
-            client.servers.members.removeListener("mutation", logMutation);
+            client.members.removeListener("mutation", logMutation);
         }
 
         window.removeEventListener("online", online);

src/context/revoltjs/hooks.ts

@@ -122,6 +122,13 @@ export function useServers(ids?: string[], context?: HookContext) {
     )[];
 }
 
+export function useMember(id?: string, context?: HookContext) {
+    if (typeof id === "undefined") return;
+    return useObject("members", id, context) as
+        | Readonly<Servers.Member>
+        | undefined;
+}
+
 export function useDMs(context?: HookContext) {
     const ctx = useForceUpdate(context);
 
@@ -192,7 +199,7 @@ export function useChannelPermission(id: string, context?: HookContext) {
 
         if (server) {
             ctx.client.servers.addListener("update", mutationServer);
-            ctx.client.servers.members.addListener("update", mutationMember);
+            ctx.client.members.addListener("update", mutationMember);
         }
 
         return () => {
@@ -200,10 +207,7 @@ export function useChannelPermission(id: string, context?: HookContext) {
 
             if (server) {
                 ctx.client.servers.removeListener("update", mutationServer);
-                ctx.client.servers.members.removeListener(
+                ctx.client.members.removeListener("update", mutationMember);
-                    "update",
-                    mutationMember,
-                );
             }
         };
     }, [id]);
@@ -221,11 +225,11 @@ export function useServerPermission(id: string, context?: HookContext) {
 
     useEffect(() => {
         ctx.client.servers.addListener("update", mutation);
-        ctx.client.servers.members.addListener("update", mutationMember);
+        ctx.client.members.addListener("update", mutationMember);
 
         return () => {
             ctx.client.servers.removeListener("update", mutation);
-            ctx.client.servers.members.removeListener("update", mutationMember);
+            ctx.client.members.removeListener("update", mutationMember);
         };
     }, [id]);
 

src/pages/settings/server/Members.tsx

@@ -28,7 +28,7 @@ export function Members({ server }: Props) {
     const users = useUsers(members?.map((x) => x._id.user) ?? [], ctx);
 
     useEffect(() => {
-        ctx.client.servers.members
+        ctx.client.members
             .fetchMembers(server._id)
             .then((members) => setMembers(members));
     }, []);
@@ -126,7 +126,7 @@ export function Members({ server }: Props) {
                                             roles,
                                         )}
                                         onClick={async () => {
-                                            await ctx.client.servers.members.editMember(
+                                            await ctx.client.members.editMember(
                                                 server._id,
                                                 member._id.user,
                                                 {

yarn.lock

@@ -3563,10 +3563,10 @@ reusify@^1.0.4:
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
-revolt.js@^4.3.3-alpha.18:
+revolt.js@^4.3.3-alpha.19:
-  version "4.3.3-alpha.18"
+  version "4.3.3-alpha.19"
-  resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-4.3.3-alpha.18.tgz#a46cef600099ea22d2f6dc8d09def7e9135839af"
+  resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-4.3.3-alpha.19.tgz#02b0fe8c44b6b803f5314a2d40eda5d3481901d3"
-  integrity sha512-3QTgX1407bLZEkxkhUsetalUGxcogpFLiTm+mPE3T9bAKgHlTC7y6F5JgHGtmMGWxsjKCDLHgHoAllwGwXJaig==
+  integrity sha512-cpJGqAnAzCV33zuFqiOlRopqhSMhSUZISB7vdsgvjS6Aof1UrWpJJO+POnVxo20FvLM0tMFZaHIxdYeW798U9w==
   dependencies:
     "@insertish/mutable" "1.1.0"
     axios "^0.19.2"