Work towards removing useUsers.

src/components/navigation/items/ButtonItem.tsx

@@ -1,4 +1,5 @@
 import { X, Crown } from "@styled-icons/boxicons-regular";
+import { observer } from "mobx-react-lite";
 import { Channels, Users } from "revolt.js/dist/api/objects";
 
 import styles from "./Item.module.scss";
@@ -9,6 +10,8 @@ import { Localizer, Text } from "preact-i18n";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 import { stopPropagation } from "../../../lib/stopPropagation";
 
+import { User } from "../../../mobx";
+
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 
 import ChannelIcon from "../../common/ChannelIcon";
@@ -30,12 +33,12 @@ type CommonProps = Omit<
 };
 
 type UserProps = CommonProps & {
-    user: Users.User;
+    user: User;
     context?: Channels.Channel;
     channel?: Channels.DirectMessageChannel;
 };
 
-export function UserButton(props: UserProps) {
+export const UserButton = observer((props: UserProps) => {
     const { active, alert, alertCount, user, context, channel, ...divProps } =
         props;
     const { openScreen } = useIntermediate();
@@ -109,11 +112,11 @@ export function UserButton(props: UserProps) {
             </div>
         </div>
     );
-}
+});
 
 type ChannelProps = CommonProps & {
     channel: Channels.Channel & { unread?: string };
-    user?: Users.User;
+    user?: User;
     compact?: boolean;
 };
 

src/components/navigation/left/HomeSidebar.tsx

@@ -4,6 +4,7 @@ import {
     Wrench,
     Notepad,
 } from "@styled-icons/boxicons-solid";
+import { observer } from "mobx-react-lite";
 import { Link, Redirect, useLocation, useParams } from "react-router-dom";
 import { Channels } from "revolt.js/dist/api/objects";
 import { Users as UsersNS } from "revolt.js/dist/api/objects";
@@ -15,6 +16,7 @@ import ConditionalLink from "../../../lib/ConditionalLink";
 import PaintCounter from "../../../lib/PaintCounter";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 
+import { useData } from "../../../mobx/State";
 import { dispatch } from "../../../redux";
 import { connectState } from "../../../redux/connector";
 import { Unreads } from "../../../redux/reducers/unreads";
@@ -39,7 +41,7 @@ type Props = {
     unreads: Unreads;
 };
 
-function HomeSidebar(props: Props) {
+const HomeSidebar = observer((props: Props) => {
     const { pathname } = useLocation();
     const client = useContext(AppContext);
     const { channel } = useParams<{ channel: string }>();
@@ -66,7 +68,7 @@ function HomeSidebar(props: Props) {
         .filter((x) => x.channel_type !== "SavedMessages")
         .map((x) => mapChannelWithUnread(x, props.unreads));
 
-    const users = useUsers(undefined, ctx);
+    const store = useData();
     channelsArr.sort((b, a) => a.timestamp.localeCompare(b.timestamp));
 
     return (
@@ -89,7 +91,7 @@ function HomeSidebar(props: Props) {
                             <ButtonItem
                                 active={pathname === "/friends"}
                                 alert={
-                                    typeof users.find(
+                                    typeof [...store.users.values()].find(
                                         (user) =>
                                             user?.relationship ===
                                             UsersNS.Relationship.Incoming,
@@ -143,7 +145,7 @@ function HomeSidebar(props: Props) {
                         if (!x.active) return null;
 
                         const recipient = client.channels.getRecipient(x._id);
-                        user = users.find((x) => x?._id === recipient);
+                        user = store.users.get(recipient);
 
                         if (!user) {
                             console.warn(
@@ -171,7 +173,7 @@ function HomeSidebar(props: Props) {
             </GenericSidebarList>
         </GenericSidebarBase>
     );
-}
+});
 
 export default connectState(
     HomeSidebar,

src/components/navigation/left/ServerListSidebar.tsx

@@ -1,4 +1,5 @@
 import { Plus } from "@styled-icons/boxicons-regular";
+import { observer } from "mobx-react-lite";
 import { useLocation, useParams } from "react-router-dom";
 import { Channel, Servers, Users } from "revolt.js/dist/api/objects";
 import styled, { css } from "styled-components";
@@ -9,17 +10,17 @@ import ConditionalLink from "../../../lib/ConditionalLink";
 import PaintCounter from "../../../lib/PaintCounter";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 
+import { useData } from "../../../mobx/State";
 import { connectState } from "../../../redux/connector";
 import { LastOpened } from "../../../redux/reducers/last_opened";
 import { Unreads } from "../../../redux/reducers/unreads";
 
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import { useClient } from "../../../context/revoltjs/RevoltClient";
 import {
     useChannels,
     useForceUpdate,
-    useSelf,
     useServers,
-    useUsers,
 } from "../../../context/revoltjs/hooks";
 
 import logoSVG from "../../../assets/logo.svg";
@@ -178,14 +179,16 @@ interface Props {
     lastOpened: LastOpened;
 }
 
-export function ServerListSidebar({ unreads, lastOpened }: Props) {
+export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
+    const store = useData();
+    const client = useClient();
+    const self = store.users.get(client.user!._id);
+
     const ctx = useForceUpdate();
-    const self = useSelf(ctx);
     const activeServers = useServers(undefined, ctx) as Servers.Server[];
     const channels = (useChannels(undefined, ctx) as Channel[]).map((x) =>
         mapChannelWithUnread(x, unreads),
     );
-    const users = useUsers(undefined, ctx);
 
     const unreadChannels = channels.filter((x) => x.unread).map((x) => x._id);
 
@@ -230,7 +233,11 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
         }
     }
 
-    if (users.find((x) => x?.relationship === Users.Relationship.Incoming)) {
+    if (
+        [...store.users.values()].find(
+            (x) => x.relationship === Users.Relationship.Incoming,
+        )
+    ) {
         alertCount++;
     }
 
@@ -298,7 +305,7 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
             </ServerList>
         </ServersBase>
     );
-}
+});
 
 export default connectState(ServerListSidebar, (state) => {
     return {

src/components/navigation/right/MemberSidebar.tsx

@@ -1,3 +1,4 @@
+import { observer } from "mobx-react-lite";
 import { useParams } from "react-router";
 import { Link } from "react-router-dom";
 import { User } from "revolt.js";
@@ -7,6 +8,7 @@ import { ClientboundNotification } from "revolt.js/dist/websocket/notifications"
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
 
+import { useData } from "../../../mobx/State";
 import { getState } from "../../../redux";
 
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
@@ -52,17 +54,16 @@ export default function MemberSidebar(props: { channel?: Channels.Channel }) {
     }
 }
 
-export function GroupMemberSidebar({
-    channel,
-    ctx,
-}: Props & { channel: Channels.GroupChannel }) {
-    const { openScreen } = useIntermediate();
-    const users = useUsers(undefined, ctx);
-    const members = channel.recipients
-        .map((x) => users.find((y) => y?._id === x))
-        .filter((x) => typeof x !== "undefined") as User[];
+export const GroupMemberSidebar = observer(
+    ({ channel }: Props & { channel: Channels.GroupChannel }) => {
+        const { openScreen } = useIntermediate();
 
-    /*const voice = useContext(VoiceContext);
+        const store = useData();
+        const members = channel.recipients
+            ?.map((member) => store.users.get(member)!)
+            .filter((x) => typeof x !== "undefined");
+
+        /*const voice = useContext(VoiceContext);
     const voiceActive = voice.roomId === channel._id;
 
     let voiceParticipants: User[] = [];
@@ -77,34 +78,36 @@ export function GroupMemberSidebar({
         voiceParticipants.sort((a, b) => a.username.localeCompare(b.username));
     }*/
 
-    members.sort((a, b) => {
-        // ! FIXME: should probably rewrite all this code
-        const l =
-            +(
-                (a.online && a.status?.presence !== Users.Presence.Invisible) ??
-                false
-            ) | 0;
-        const r =
-            +(
-                (b.online && b.status?.presence !== Users.Presence.Invisible) ??
-                false
-            ) | 0;
+        members.sort((a, b) => {
+            // ! FIXME: should probably rewrite all this code
+            const l =
+                +(
+                    (a.online &&
+                        a.status?.presence !== Users.Presence.Invisible) ??
+                    false
+                ) | 0;
+            const r =
+                +(
+                    (b.online &&
+                        b.status?.presence !== Users.Presence.Invisible) ??
+                    false
+                ) | 0;
 
-        const n = r - l;
-        if (n !== 0) {
-            return n;
-        }
+            const n = r - l;
+            if (n !== 0) {
+                return n;
+            }
 
-        return a.username.localeCompare(b.username);
-    });
+            return a.username.localeCompare(b.username);
+        });
 
-    return (
-        <GenericSidebarBase>
-            <GenericSidebarList>
-                <ChannelDebugInfo id={channel._id} />
-                <Search channel={channel._id} />
+        return (
+            <GenericSidebarBase>
+                <GenericSidebarList>
+                    <ChannelDebugInfo id={channel._id} />
+                    <Search channel={channel._id} />
 
-                {/*voiceActive && voiceParticipants.length !== 0 && (
+                    {/*voiceActive && voiceParticipants.length !== 0 && (
                     <Fragment>
                         <Category
                             type="members"
@@ -129,140 +132,25 @@ export function GroupMemberSidebar({
                         )}
                     </Fragment>
                 )*/}
-                <CollapsibleSection
-                    sticky
-                    id="members"
-                    defaultValue
-                    summary={
-                        <Category
-                            variant="uniform"
-                            text={
-                                <span>
-                                    <Text id="app.main.categories.members" /> —{" "}
-                                    {channel.recipients.length}
-                                </span>
-                            }
-                        />
-                    }>
-                    {members.length === 0 && (
-                        <img src={placeholderSVG} loading="eager" />
-                    )}
-                    {members.map(
-                        (user) =>
-                            user && (
-                                <UserButton
-                                    key={user._id}
-                                    user={user}
-                                    context={channel}
-                                    onClick={() =>
-                                        openScreen({
-                                            id: "profile",
-                                            user_id: user._id,
-                                        })
-                                    }
-                                />
-                            ),
-                    )}
-                </CollapsibleSection>
-            </GenericSidebarList>
-        </GenericSidebarBase>
-    );
-}
-
-export function ServerMemberSidebar({
-    channel,
-    ctx,
-}: Props & { channel: Channels.TextChannel }) {
-    const [members, setMembers] = useState<Servers.Member[] | undefined>(
-        undefined,
-    );
-    const users = useUsers(members?.map((x) => x._id.user) ?? []).filter(
-        (x) => typeof x !== "undefined",
-        ctx,
-    ) as Users.User[];
-    const { openScreen } = useIntermediate();
-    const status = useContext(StatusContext);
-    const client = useContext(AppContext);
-
-    useEffect(() => {
-        if (status === ClientStatus.ONLINE && typeof members === "undefined") {
-            client.members
-                .fetchMembers(channel.server)
-                .then((members) => setMembers(members));
-        }
-    }, [status]);
-
-    // ! FIXME: temporary code
-    useEffect(() => {
-        function onPacket(packet: ClientboundNotification) {
-            if (!members) return;
-            if (packet.type === "ServerMemberJoin") {
-                if (packet.id !== channel.server) return;
-                setMembers([
-                    ...members,
-                    { _id: { server: packet.id, user: packet.user } },
-                ]);
-            } else if (packet.type === "ServerMemberLeave") {
-                if (packet.id !== channel.server) return;
-                setMembers(
-                    members.filter(
-                        (x) =>
-                            !(
-                                x._id.user === packet.user &&
-                                x._id.server === packet.id
-                            ),
-                    ),
-                );
-            }
-        }
-
-        client.addListener("packet", onPacket);
-        return () => client.removeListener("packet", onPacket);
-    }, [members]);
-
-    // copy paste from above
-    users.sort((a, b) => {
-        // ! FIXME: should probably rewrite all this code
-        const l =
-            +(
-                (a.online && a.status?.presence !== Users.Presence.Invisible) ??
-                false
-            ) | 0;
-        const r =
-            +(
-                (b.online && b.status?.presence !== Users.Presence.Invisible) ??
-                false
-            ) | 0;
-
-        const n = r - l;
-        if (n !== 0) {
-            return n;
-        }
-
-        return a.username.localeCompare(b.username);
-    });
-
-    return (
-        <GenericSidebarBase>
-            <GenericSidebarList>
-                <ChannelDebugInfo id={channel._id} />
-                <Search channel={channel._id} />
-                <div>{!members && <Preloader type="ring" />}</div>
-                {members && (
                     <CollapsibleSection
-                        //sticky //will re-add later, need to fix css
+                        sticky
                         id="members"
                         defaultValue
                         summary={
-                            <span>
-                                <Text id="app.main.categories.members" /> —{" "}
-                                {users.length}
-                            </span>
+                            <Category
+                                variant="uniform"
+                                text={
+                                    <span>
+                                        <Text id="app.main.categories.members" />{" "}
+                                        — {channel.recipients.length}
+                                    </span>
+                                }
+                            />
                         }>
-                        {users.length === 0 && (
+                        {members.length === 0 && (
                             <img src={placeholderSVG} loading="eager" />
                         )}
-                        {users.map(
+                        {members.map(
                             (user) =>
                                 user && (
                                     <UserButton
@@ -279,11 +167,133 @@ export function ServerMemberSidebar({
                                 ),
                         )}
                     </CollapsibleSection>
-                )}
-            </GenericSidebarList>
-        </GenericSidebarBase>
-    );
-}
+                </GenericSidebarList>
+            </GenericSidebarBase>
+        );
+    },
+);
+
+export const ServerMemberSidebar = observer(
+    ({ channel }: Props & { channel: Channels.TextChannel }) => {
+        const [members, setMembers] = useState<Servers.Member[] | undefined>(
+            undefined,
+        );
+
+        const store = useData();
+        const users = members
+            ?.map((member) => store.users.get(member._id.user)!)
+            .filter((x) => typeof x !== "undefined");
+
+        const { openScreen } = useIntermediate();
+        const status = useContext(StatusContext);
+        const client = useContext(AppContext);
+
+        useEffect(() => {
+            if (
+                status === ClientStatus.ONLINE &&
+                typeof members === "undefined"
+            ) {
+                client.members
+                    .fetchMembers(channel.server)
+                    .then((members) => setMembers(members));
+            }
+        }, [status]);
+
+        // ! FIXME: temporary code
+        useEffect(() => {
+            function onPacket(packet: ClientboundNotification) {
+                if (!members) return;
+                if (packet.type === "ServerMemberJoin") {
+                    if (packet.id !== channel.server) return;
+                    setMembers([
+                        ...members,
+                        { _id: { server: packet.id, user: packet.user } },
+                    ]);
+                } else if (packet.type === "ServerMemberLeave") {
+                    if (packet.id !== channel.server) return;
+                    setMembers(
+                        members.filter(
+                            (x) =>
+                                !(
+                                    x._id.user === packet.user &&
+                                    x._id.server === packet.id
+                                ),
+                        ),
+                    );
+                }
+            }
+
+            client.addListener("packet", onPacket);
+            return () => client.removeListener("packet", onPacket);
+        }, [members]);
+
+        // copy paste from above
+        users?.sort((a, b) => {
+            // ! FIXME: should probably rewrite all this code
+            const l =
+                +(
+                    (a.online &&
+                        a.status?.presence !== Users.Presence.Invisible) ??
+                    false
+                ) | 0;
+            const r =
+                +(
+                    (b.online &&
+                        b.status?.presence !== Users.Presence.Invisible) ??
+                    false
+                ) | 0;
+
+            const n = r - l;
+            if (n !== 0) {
+                return n;
+            }
+
+            return a.username.localeCompare(b.username);
+        });
+
+        return (
+            <GenericSidebarBase>
+                <GenericSidebarList>
+                    <ChannelDebugInfo id={channel._id} />
+                    <Search channel={channel._id} />
+                    <div>{!members && <Preloader type="ring" />}</div>
+                    {members && (
+                        <CollapsibleSection
+                            //sticky //will re-add later, need to fix css
+                            id="members"
+                            defaultValue
+                            summary={
+                                <span>
+                                    <Text id="app.main.categories.members" /> —{" "}
+                                    {users?.length ?? 0}
+                                </span>
+                            }>
+                            {(users?.length ?? 0) === 0 && (
+                                <img src={placeholderSVG} loading="eager" />
+                            )}
+                            {users?.map(
+                                (user) =>
+                                    user && (
+                                        <UserButton
+                                            key={user._id}
+                                            user={user}
+                                            context={channel}
+                                            onClick={() =>
+                                                openScreen({
+                                                    id: "profile",
+                                                    user_id: user._id,
+                                                })
+                                            }
+                                        />
+                                    ),
+                            )}
+                        </CollapsibleSection>
+                    )}
+                </GenericSidebarList>
+            </GenericSidebarBase>
+        );
+    },
+);
 
 function Search({ channel }: { channel: string }) {
     if (!getState().experiments.enabled?.includes("search")) return null;