Work towards removing useUsers.

src/context/intermediate/Intermediate.tsx

@@ -13,6 +13,8 @@ import { useContext, useEffect, useMemo, useState } from "preact/hooks";
 
 import { internalSubscribe } from "../../lib/eventEmitter";
 
+import { User } from "../../mobx";
+
 import { Action } from "../../components/ui/Modal";
 
 import { Children } from "../../types/Preact";
@@ -42,10 +44,10 @@ export type Screen =
                 type: "create_invite";
                 target: Channels.TextChannel | Channels.GroupChannel;
             }
-          | { type: "kick_member"; target: Servers.Server; user: string }
-          | { type: "ban_member"; target: Servers.Server; user: string }
-          | { type: "unfriend_user"; target: Users.User }
-          | { type: "block_user"; target: Users.User }
+          | { type: "kick_member"; target: Servers.Server; user: User }
+          | { type: "ban_member"; target: Servers.Server; user: User }
+          | { type: "unfriend_user"; target: User }
+          | { type: "block_user"; target: User }
           | { type: "create_channel"; target: Servers.Server }
       ))
     | ({ id: "special_input" } & (
@@ -82,7 +84,7 @@ export type Screen =
     | { id: "modify_account"; field: "username" | "email" | "password" }
     | { id: "profile"; user_id: string }
     | { id: "channel_info"; channel_id: string }
-    | { id: "pending_requests"; users: string[] }
+    | { id: "pending_requests"; users: User[] }
     | {
           id: "user_picker";
           omit?: string[];

src/context/intermediate/modals/Prompt.tsx

@@ -1,3 +1,4 @@
+import { observer } from "mobx-react-lite";
 import { useHistory } from "react-router-dom";
 import { Channels, Servers, Users } from "revolt.js/dist/api/objects";
 import { ulid } from "ulid";
@@ -8,6 +9,9 @@ import { useContext, useEffect, useState } from "preact/hooks";
 
 import { TextReact } from "../../../lib/i18n";
 
+import { User } from "../../../mobx";
+import { useData } from "../../../mobx/State";
+
 import Message from "../../../components/common/messaging/Message";
 import UserIcon from "../../../components/common/user/UserIcon";
 import InputBox from "../../../components/ui/InputBox";
@@ -61,14 +65,14 @@ type SpecialProps = { onClose: () => void } & (
           type: "create_invite";
           target: Channels.TextChannel | Channels.GroupChannel;
       }
-    | { type: "kick_member"; target: Servers.Server; user: string }
-    | { type: "ban_member"; target: Servers.Server; user: string }
-    | { type: "unfriend_user"; target: Users.User }
-    | { type: "block_user"; target: Users.User }
+    | { type: "kick_member"; target: Servers.Server; user: User }
+    | { type: "ban_member"; target: Servers.Server; user: User }
+    | { type: "unfriend_user"; target: User }
+    | { type: "block_user"; target: User }
     | { type: "create_channel"; target: Servers.Server }
 );
 
-export function SpecialPromptModal(props: SpecialProps) {
+export const SpecialPromptModal = observer((props: SpecialProps) => {
     const client = useContext(AppContext);
     const [processing, setProcessing] = useState(false);
     const [error, setError] = useState<undefined | string>(undefined);
@@ -286,8 +290,6 @@ export function SpecialPromptModal(props: SpecialProps) {
             );
         }
         case "kick_member": {
-            const user = client.users.get(props.user);
-
             return (
                 <PromptModal
                     onClose={onClose}
@@ -306,7 +308,7 @@ export function SpecialPromptModal(props: SpecialProps) {
                                 try {
                                     await client.members.kickMember(
                                         props.target._id,
-                                        props.user,
+                                        props.user._id,
                                     );
                                     onClose();
                                 } catch (err) {
@@ -324,10 +326,10 @@ export function SpecialPromptModal(props: SpecialProps) {
                     ]}
                     content={
                         <div className={styles.column}>
-                            <UserIcon target={user} size={64} />
+                            <UserIcon target={props.user} size={64} />
                             <Text
                                 id="app.special.modals.prompt.confirm_kick"
-                                fields={{ name: user?.username }}
+                                fields={{ name: props.user?.username }}
                             />
                         </div>
                     }
@@ -338,7 +340,6 @@ export function SpecialPromptModal(props: SpecialProps) {
         }
         case "ban_member": {
             const [reason, setReason] = useState<string | undefined>(undefined);
-            const user = client.users.get(props.user);
 
             return (
                 <PromptModal
@@ -358,7 +359,7 @@ export function SpecialPromptModal(props: SpecialProps) {
                                 try {
                                     await client.servers.banUser(
                                         props.target._id,
-                                        props.user,
+                                        props.user._id,
                                         { reason },
                                     );
                                     onClose();
@@ -377,10 +378,10 @@ export function SpecialPromptModal(props: SpecialProps) {
                     ]}
                     content={
                         <div className={styles.column}>
-                            <UserIcon target={user} size={64} />
+                            <UserIcon target={props.user} size={64} />
                             <Text
                                 id="app.special.modals.prompt.confirm_ban"
-                                fields={{ name: user?.username }}
+                                fields={{ name: props.user?.username }}
                             />
                             <Overline>
                                 <Text id="app.special.modals.prompt.confirm_ban_reason" />
@@ -477,4 +478,4 @@ export function SpecialPromptModal(props: SpecialProps) {
         default:
             return null;
     }
-}
+});

src/context/intermediate/popovers/PendingRequests.tsx

@@ -1,31 +1,30 @@
+import { observer } from "mobx-react-lite";
+
 import styles from "./UserPicker.module.scss";
 import { Text } from "preact-i18n";
 
+import { User } from "../../../mobx";
+
 import Modal from "../../../components/ui/Modal";
 
 import { Friend } from "../../../pages/friends/Friend";
-import { useUsers } from "../../revoltjs/hooks";
 
 interface Props {
-    users: string[];
+    users: User[];
     onClose: () => void;
 }
 
-export function PendingRequests({ users: ids, onClose }: Props) {
-    const users = useUsers(ids);
-
+export const PendingRequests = observer(({ users, onClose }: Props) => {
     return (
         <Modal
             visible={true}
             title={<Text id="app.special.friends.pending" />}
             onClose={onClose}>
             <div className={styles.list}>
-                {users
-                    .filter((x) => typeof x !== "undefined")
-                    .map((x) => (
-                        <Friend user={x!} key={x!._id} />
-                    ))}
+                {users.map((x) => (
+                    <Friend user={x!} key={x!._id} />
+                ))}
             </div>
         </Modal>
     );
-}
+});

src/context/intermediate/popovers/UserProfile.tsx

@@ -10,6 +10,8 @@ import styles from "./UserProfile.module.scss";
 import { Localizer, Text } from "preact-i18n";
 import { useContext, useEffect, useLayoutEffect, useState } from "preact/hooks";
 
+import { useData } from "../../../mobx/State";
+
 import ChannelIcon from "../../../components/common/ChannelIcon";
 import Tooltip from "../../../components/common/Tooltip";
 import UserIcon from "../../../components/common/user/UserIcon";
@@ -23,6 +25,7 @@ import {
     AppContext,
     ClientStatus,
     StatusContext,
+    useClient,
 } from "../../revoltjs/RevoltClient";
 import {
     useChannels,
@@ -58,25 +61,22 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
     >(undefined);
 
     const history = useHistory();
-    const client = useContext(AppContext);
+    const client = useClient();
     const status = useContext(StatusContext);
     const [tab, setTab] = useState("profile");
 
     const ctx = useForceUpdate();
-    const all_users = useUsers(undefined, ctx);
     const channels = useChannels(undefined, ctx);
+    const permissions = useUserPermission(client.user!._id, ctx);
 
-    const user = all_users.find((x) => x!._id === user_id);
-    const users = mutual?.users
-        ? all_users.filter((x) => mutual.users.includes(x!._id))
-        : undefined;
-
-    if (!user) {
+    const store = useData();
+    if (!store.users.has(user_id)) {
         useEffect(onClose, []);
         return null;
     }
 
-    const permissions = useUserPermission(user!._id, ctx);
+    const user = store.users.get(user_id)!;
+    const users = mutual?.users.map((id) => store.users.get(id));
 
     useLayoutEffect(() => {
         if (!user_id) return;