Work towards removing useUsers.

2026-03-06 17:11:55 +00:00 · 2021-07-29 15:11:21 +01:00
parent cf3930b094
commit 4dffaad6c1
25 changed files with 580 additions and 501 deletions
--- a/src/pages/channels/ChannelHeader.tsx
+++ b/src/pages/channels/ChannelHeader.tsx
@@ -1,14 +1,18 @@
 import { At, Hash, Menu } from "@styled-icons/boxicons-regular";
 import { Notepad, Group } from "@styled-icons/boxicons-solid";
-import { Channel, User } from "revolt.js";
+import { observable } from "mobx";
+import { Channel } from "revolt.js";
 import styled from "styled-components";

 import { useContext } from "preact/hooks";

 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";

+import { User } from "../../mobx";
+import { useData } from "../../mobx/State";
+
 import { useIntermediate } from "../../context/intermediate/Intermediate";
-import { AppContext } from "../../context/revoltjs/RevoltClient";
+import { AppContext, useClient } from "../../context/revoltjs/RevoltClient";
 import { getChannelName } from "../../context/revoltjs/util";

 import { useStatusColour } from "../../components/common/user/UserIcon";
@@ -65,15 +69,13 @@ const Info = styled.div`
    }
 `;

-export default function ChannelHeader({
-    channel,
-    toggleSidebar,
-}: ChannelHeaderProps) {
+export default observable(({ channel, toggleSidebar }: ChannelHeaderProps) => {
    const { openScreen } = useIntermediate();
-    const client = useContext(AppContext);
+    const client = useClient();
+    const state = useData();

    const name = getChannelName(client, channel);
-    let icon, recipient;
+    let icon, recipient: User | undefined;
    switch (channel.channel_type) {
        case "SavedMessages":
            icon = <Notepad size={24} />;
@@ -81,7 +83,7 @@ export default function ChannelHeader({
        case "DirectMessage":
            icon = <At size={24} />;
            const uid = client.channels.getRecipient(channel._id);
-            recipient = client.users.get(uid);
+            recipient = state.users.get(uid);
            break;
        case "Group":
            icon = <Group size={24} />;
@@ -109,12 +111,11 @@ export default function ChannelHeader({
                                <div
                                    className="status"
                                    style={{
-                                        backgroundColor: useStatusColour(
-                                            recipient as User,
-                                        ),
+                                        backgroundColor:
+                                            useStatusColour(recipient),
                                    }}
                                />
-                                <UserStatus user={recipient as User} />
+                                <UserStatus user={recipient} />
                            </span>
                        </>
                    )}
@@ -145,4 +146,4 @@ export default function ChannelHeader({
            <HeaderActions channel={channel} toggleSidebar={toggleSidebar} />
        </Header>
    );
-}
+});
--- a/src/pages/channels/voice/VoiceHeader.tsx
+++ b/src/pages/channels/voice/VoiceHeader.tsx
@@ -1,19 +1,18 @@
 import { BarChart } from "@styled-icons/boxicons-regular";
+import { observable } from "mobx";
 import styled from "styled-components";

 import { Text } from "preact-i18n";
 import { useContext } from "preact/hooks";

+import { useData } from "../../../mobx/State";
+
 import {
    VoiceContext,
    VoiceOperationsContext,
    VoiceStatus,
 } from "../../../context/Voice";
-import {
-    useForceUpdate,
-    useSelf,
-    useUsers,
-} from "../../../context/revoltjs/hooks";
+import { useClient } from "../../../context/revoltjs/RevoltClient";

 import UserIcon from "../../../components/common/user/UserIcon";
 import Button from "../../../components/ui/Button";
@@ -70,17 +69,21 @@ const VoiceBase = styled.div`
    }
 `;

-export default function VoiceHeader({ id }: Props) {
+export default observable(({ id }: Props) => {
    const { status, participants, roomId } = useContext(VoiceContext);
    if (roomId !== id) return null;

    const { isProducing, startProducing, stopProducing, disconnect } =
        useContext(VoiceOperationsContext);

-    const ctx = useForceUpdate();
-    const self = useSelf(ctx);
+    const store = useData();
+    const client = useClient();
+    const self = store.users.get(client.user!._id);
+
+    //const ctx = useForceUpdate();
+    //const self = useSelf(ctx);
    const keys = participants ? Array.from(participants.keys()) : undefined;
-    const users = keys ? useUsers(keys, ctx) : undefined;
+    const users = keys?.map((key) => store.users.get(key));

    return (
        <VoiceBase>
@@ -135,7 +138,7 @@ export default function VoiceHeader({ id }: Props) {
            </div>
        </VoiceBase>
    );
-}
+});

 /**{voice.roomId === id && (
                        <div className={styles.rtc}>
--- a/src/pages/friends/Friend.tsx
+++ b/src/pages/friends/Friend.tsx
@@ -1,6 +1,7 @@
 import { X, Plus } from "@styled-icons/boxicons-regular";
 import { PhoneCall, Envelope, UserX } from "@styled-icons/boxicons-solid";
-import { User, Users } from "revolt.js/dist/api/objects";
+import { observer } from "mobx-react-lite";
+import { Users } from "revolt.js/dist/api/objects";

 import styles from "./Friend.module.scss";
 import classNames from "classnames";
@@ -10,6 +11,8 @@ import { useContext } from "preact/hooks";

 import { stopPropagation } from "../../lib/stopPropagation";

+import { User } from "../../mobx";
+
 import { VoiceOperationsContext } from "../../context/Voice";
 import { useIntermediate } from "../../context/intermediate/Intermediate";
 import {
@@ -27,7 +30,7 @@ interface Props {
    user: User;
 }

-export function Friend({ user }: Props) {
+export const Friend = observer(({ user }: Props) => {
    const client = useContext(AppContext);
    const { openScreen } = useIntermediate();
    const { openDM } = useContext(OperationsContext);
@@ -133,4 +136,4 @@ export function Friend({ user }: Props) {
            <div className={styles.actions}>{actions}</div>
        </div>
    );
-}
+});
--- a/src/pages/friends/Friends.tsx
+++ b/src/pages/friends/Friends.tsx
@@ -4,7 +4,8 @@ import {
    ListPlus,
 } from "@styled-icons/boxicons-regular";
 import { UserDetail, MessageAdd, UserPlus } from "@styled-icons/boxicons-solid";
-import { User, Users } from "revolt.js/dist/api/objects";
+import { observer } from "mobx-react-lite";
+import { Users } from "revolt.js/dist/api/objects";

 import styles from "./Friend.module.scss";
 import { Text } from "preact-i18n";
@@ -12,30 +13,30 @@ import { Text } from "preact-i18n";
 import { TextReact } from "../../lib/i18n";
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";

+import { User } from "../../mobx";
+import { useData } from "../../mobx/State";
+
 import { useIntermediate } from "../../context/intermediate/Intermediate";
-import { useUsers } from "../../context/revoltjs/hooks";

 import CollapsibleSection from "../../components/common/CollapsibleSection";
 import Tooltip from "../../components/common/Tooltip";
 import UserIcon from "../../components/common/user/UserIcon";
-import Details from "../../components/ui/Details";
 import Header from "../../components/ui/Header";
 import IconButton from "../../components/ui/IconButton";
-import Overline from "../../components/ui/Overline";

 import { Children } from "../../types/Preact";
 import { Friend } from "./Friend";

-export default function Friends() {
+export default observer(() => {
    const { openScreen } = useIntermediate();

-    const users = useUsers() as User[];
+    const store = useData();
+    const users = [...store.users.values()];
    users.sort((a, b) => a.username.localeCompare(b.username));

    const friends = users.filter(
        (x) => x.relationship === Users.Relationship.Friend,
    );
-
    const lists = [
        [
            "",
@@ -138,7 +139,7 @@ export default function Friends() {
                        onClick={() =>
                            openScreen({
                                id: "pending_requests",
-                                users: incoming.map((x) => x._id),
+                                users: incoming,
                            })
                        }>
                        <div className={styles.avatars}>
@@ -216,4 +217,4 @@ export default function Friends() {
            </div>
        </>
    );
-}
+});
--- a/src/pages/settings/panes/Account.tsx
+++ b/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>
    );
-}
+});
--- a/src/pages/settings/panes/Feedback.tsx
+++ b/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",
        });
--- a/src/pages/settings/panes/Profile.tsx
+++ b/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 },
                        });
                    }}
--- a/src/pages/settings/server/Invites.tsx
+++ b/src/pages/settings/server/Invites.tsx
@@ -1,10 +1,14 @@
 import { XCircle } from "@styled-icons/boxicons-regular";
+import { observer } from "mobx-react-lite";
 import { Invites as InvitesNS, Servers } from "revolt.js/dist/api/objects";

 import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";

+import { useData } from "../../../mobx/State";
+
+import { useClient } from "../../../context/revoltjs/RevoltClient";
 import {
    useChannels,
    useForceUpdate,
@@ -20,16 +24,19 @@ interface Props {
    server: Servers.Server;
 }

-export function Invites({ server }: Props) {
+export const Invites = observer(({ server }: Props) => {
+    const [deleting, setDelete] = useState<string[]>([]);
    const [invites, setInvites] = useState<
        InvitesNS.ServerInvite[] | undefined
    >(undefined);

    const ctx = useForceUpdate();
-    const [deleting, setDelete] = useState<string[]>([]);
-    const users = useUsers(invites?.map((x) => x.creator) ?? [], ctx);
    const channels = useChannels(invites?.map((x) => x.channel) ?? [], ctx);

+    const store = useData();
+    const client = useClient();
+    const users = invites?.map((invite) => store.users.get(invite.creator));
+
    useEffect(() => {
        ctx.client.servers
            .fetchInvites(server._id)
@@ -53,8 +60,8 @@ export function Invites({ server }: Props) {
                </span>
            </div>
            {typeof invites === "undefined" && <Preloader type="ring" />}
-            {invites?.map((invite) => {
-                const creator = users.find((x) => x?._id === invite.creator);
+            {invites?.map((invite, index) => {
+                const creator = users![index];
                const channel = channels.find((x) => x?._id === invite.channel);

                return (
@@ -93,4 +100,4 @@ export function Invites({ server }: Props) {
            })}
        </div>
    );
-}
+});
--- a/src/pages/settings/server/Members.tsx
+++ b/src/pages/settings/server/Members.tsx
@@ -1,11 +1,15 @@
 import { ChevronDown } from "@styled-icons/boxicons-regular";
 import { isEqual } from "lodash";
+import { observer } from "mobx-react-lite";
 import { Servers } from "revolt.js/dist/api/objects";

 import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";

+import { useData } from "../../../mobx/State";
+
+import { useClient } from "../../../context/revoltjs/RevoltClient";
 import { useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";

 import UserIcon from "../../../components/common/user/UserIcon";
@@ -18,17 +22,18 @@ interface Props {
    server: Servers.Server;
 }

-export function Members({ server }: Props) {
+export const Members = observer(({ server }: Props) => {
+    const [selected, setSelected] = useState<undefined | string>();
    const [members, setMembers] = useState<Servers.Member[] | undefined>(
        undefined,
    );

-    const ctx = useForceUpdate();
-    const [selected, setSelected] = useState<undefined | string>();
-    const users = useUsers(members?.map((x) => x._id.user) ?? [], ctx);
+    const store = useData();
+    const client = useClient();
+    const users = members?.map((member) => store.users.get(member._id.user));

    useEffect(() => {
-        ctx.client.members
+        client.members
            .fetchMembers(server._id)
            .then((members) => setMembers(members));
    }, []);
@@ -50,10 +55,10 @@ export function Members({ server }: Props) {
            {members &&
                members.length > 0 &&
                members
-                    .map((x) => {
+                    .map((member, index) => {
                        return {
-                            member: x,
-                            user: users.find((y) => y?._id === x._id.user),
+                            member,
+                            user: users![index],
                        };
                    })
                    .map(({ member, user }) => (
@@ -126,7 +131,7 @@ export function Members({ server }: Props) {
                                            roles,
                                        )}
                                        onClick={async () => {
-                                            await ctx.client.members.editMember(
+                                            await client.members.editMember(
                                                server._id,
                                                member._id.user,
                                                {
@@ -154,4 +159,4 @@ export function Members({ server }: Props) {
                    ))}
        </div>
    );
-}
+});