Work towards removing useUsers.

src/pages/settings/panes/Account.tsx

@@ -1,5 +1,6 @@
 import { At } from "@styled-icons/boxicons-regular";
 import { Envelope, Key, HelpCircle } from "@styled-icons/boxicons-solid";
+import { observer } from "mobx-react-lite";
 import { Link, useHistory } from "react-router-dom";
 import { Users } from "revolt.js/dist/api/objects";
 
@@ -7,26 +8,28 @@ import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
 
+import { useData } from "../../../mobx/State";
+
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import {
     ClientStatus,
     StatusContext,
+    useClient,
 } from "../../../context/revoltjs/RevoltClient";
-import { useForceUpdate, useSelf } from "../../../context/revoltjs/hooks";
+import { useForceUpdate } from "../../../context/revoltjs/hooks";
 
 import Tooltip from "../../../components/common/Tooltip";
 import UserIcon from "../../../components/common/user/UserIcon";
 import Button from "../../../components/ui/Button";
-import Overline from "../../../components/ui/Overline";
 import Tip from "../../../components/ui/Tip";
 
-export function Account() {
+export const Account = observer(() => {
     const { openScreen, writeClipboard } = useIntermediate();
     const status = useContext(StatusContext);
 
-    const ctx = useForceUpdate();
-    const user = useSelf(ctx);
-    if (!user) return null;
+    const client = useClient();
+    const store = useData();
+    const user = store.users.get(client.user!._id)!;
 
     const [email, setEmail] = useState("...");
     const [revealEmail, setRevealEmail] = useState(false);
@@ -41,13 +44,13 @@ export function Account() {
 
     useEffect(() => {
         if (email === "..." && status === ClientStatus.ONLINE) {
-            ctx.client
+            client
                 .req("GET", "/auth/user")
                 .then((account) => setEmail(account.email));
         }
 
         if (profile === undefined && status === ClientStatus.ONLINE) {
-            ctx.client.users
+            client.users
                 .fetchProfile(user._id)
                 .then((profile) => setProfile(profile ?? {}));
         }
@@ -180,4 +183,4 @@ export function Account() {
             </Tip>
         </div>
     );
-}
+});

src/pages/settings/panes/Feedback.tsx

@@ -2,7 +2,7 @@ import styles from "./Panes.module.scss";
 import { Localizer, Text } from "preact-i18n";
 import { useState } from "preact/hooks";
 
-import { useSelf } from "../../../context/revoltjs/hooks";
+import { useClient } from "../../../context/revoltjs/RevoltClient";
 
 import Button from "../../../components/ui/Button";
 import InputBox from "../../../components/ui/InputBox";
@@ -10,7 +10,7 @@ import Radio from "../../../components/ui/Radio";
 import TextArea from "../../../components/ui/TextArea";
 
 export function Feedback() {
-    const user = useSelf();
+    const client = useClient();
     const [other, setOther] = useState("");
     const [description, setDescription] = useState("");
     const [state, setState] = useState<"ready" | "sending" | "sent">("ready");
@@ -28,7 +28,7 @@ export function Feedback() {
                 checked,
                 other,
                 description,
-                name: user?.username ?? "Unknown User",
+                name: client.user!.username,
             }),
             mode: "no-cors",
         });

src/pages/settings/panes/Profile.tsx

@@ -11,8 +11,8 @@ import { FileUploader } from "../../../context/revoltjs/FileUploads";
 import {
     ClientStatus,
     StatusContext,
+    useClient,
 } from "../../../context/revoltjs/RevoltClient";
-import { useForceUpdate, useSelf } from "../../../context/revoltjs/hooks";
 
 import AutoComplete, {
     useAutoComplete,
@@ -23,9 +23,7 @@ export function Profile() {
     const { intl } = useContext(IntlContext);
     const status = useContext(StatusContext);
 
-    const ctx = useForceUpdate();
-    const user = useSelf();
-    if (!user) return null;
+    const client = useClient();
 
     const [profile, setProfile] = useState<undefined | Users.Profile>(
         undefined,
@@ -34,8 +32,8 @@ export function Profile() {
     // ! FIXME: temporary solution
     // ! we should just announce profile changes through WS
     function refreshProfile() {
-        ctx.client.users
-            .fetchProfile(user!._id)
+        client.users
+            .fetchProfile(client.user!._id)
             .then((profile) => setProfile(profile ?? {}));
     }
 
@@ -69,7 +67,7 @@ export function Profile() {
             </h3>
             <div className={styles.preview}>
                 <UserProfile
-                    user_id={user._id}
+                    user_id={client.user!._id}
                     dummy={true}
                     dummyProfile={profile}
                     onClose={() => {}}
@@ -87,19 +85,17 @@ export function Profile() {
                         fileType="avatars"
                         behaviour="upload"
                         maxFileSize={4_000_000}
-                        onUpload={(avatar) =>
-                            ctx.client.users.editUser({ avatar })
-                        }
+                        onUpload={(avatar) => client.users.editUser({ avatar })}
                         remove={() =>
-                            ctx.client.users.editUser({ remove: "Avatar" })
+                            client.users.editUser({ remove: "Avatar" })
                         }
-                        defaultPreview={ctx.client.users.getAvatarURL(
-                            user._id,
+                        defaultPreview={client.users.getAvatarURL(
+                            client.user!._id,
                             { max_side: 256 },
                             true,
                         )}
-                        previewURL={ctx.client.users.getAvatarURL(
-                            user._id,
+                        previewURL={client.users.getAvatarURL(
+                            client.user!._id,
                             { max_side: 256 },
                             true,
                             true,
@@ -117,20 +113,20 @@ export function Profile() {
                         fileType="backgrounds"
                         maxFileSize={6_000_000}
                         onUpload={async (background) => {
-                            await ctx.client.users.editUser({
+                            await client.users.editUser({
                                 profile: { background },
                             });
                             refreshProfile();
                         }}
                         remove={async () => {
-                            await ctx.client.users.editUser({
+                            await client.users.editUser({
                                 remove: "ProfileBackground",
                             });
                             setProfile({ ...profile, background: undefined });
                         }}
                         previewURL={
                             profile?.background
-                                ? ctx.client.users.getBackgroundURL(
+                                ? client.users.getBackgroundURL(
                                       profile,
                                       { width: 1000 },
                                       true,
@@ -173,7 +169,7 @@ export function Profile() {
                     contrast
                     onClick={() => {
                         setChanged(false);
-                        ctx.client.users.editUser({
+                        client.users.editUser({
                             profile: { content: profile?.content },
                         });
                     }}