Load member sidebar into MobX state.

src/components/navigation/right/MemberSidebar.tsx

@@ -181,7 +181,7 @@ export const ServerMemberSidebar = observer(
                 status === ClientStatus.ONLINE &&
                 typeof members === "undefined"
             ) {
-                client.members
+                store
                     .fetchMembers(channel.server!)
                     .then((members) => setMembers(members));
             }

src/context/index.tsx

@@ -1,8 +1,8 @@
 import { BrowserRouter as Router } from "react-router-dom";
 
+import MobXState from "../mobx/State";
 import State from "../redux/State";
 
-import MobXState from "../mobx/State";
 import { Children } from "../types/Preact";
 import Locale from "./Locale";
 import Settings from "./Settings";
@@ -15,19 +15,19 @@ export default function Context({ children }: { children: Children }) {
     return (
         <Router>
             <State>
-                <MobXState>
-                    <Theme>
-                        <Settings>
-                            <Locale>
-                                <Intermediate>
-                                    <Client>
+                <Theme>
+                    <Settings>
+                        <Locale>
+                            <Intermediate>
+                                <Client>
+                                    <MobXState>
                                         <Voice>{children}</Voice>
-                                    </Client>
-                                </Intermediate>
-                            </Locale>
-                        </Settings>
-                    </Theme>
-                </MobXState>
+                                    </MobXState>
+                                </Client>
+                            </Intermediate>
+                        </Locale>
+                    </Settings>
+                </Theme>
             </State>
         </Router>
     );

src/context/revoltjs/RevoltClient.tsx

@@ -8,13 +8,13 @@ import { useContext, useEffect, useMemo, useState } from "preact/hooks";
 
 import { SingletonMessageRenderer } from "../../lib/renderer/Singleton";
 
+import { useData } from "../../mobx/State";
 import { dispatch } from "../../redux";
 import { connectState } from "../../redux/connector";
 import { AuthState } from "../../redux/reducers/auth";
 
 import Preloader from "../../components/ui/Preloader";
 
-import { useData } from "../../mobx/State";
 import { Children } from "../../types/Preact";
 import { useIntermediate } from "../intermediate/Intermediate";
 import { registerEvents, setReconnectDisallowed } from "./events";
@@ -158,10 +158,9 @@ function Context({ auth, children }: Props) {
         };
     }, [client, auth.active]);
 
-    const store = useData();
     useEffect(
-        () => registerEvents({ operations }, setStatus, client, store),
-        [client, store],
+        () => registerEvents({ operations }, setStatus, client),
+        [client],
     );
 
     useEffect(() => {

src/context/revoltjs/events.ts

@@ -3,10 +3,10 @@ import { ClientboundNotification } from "revolt.js/dist/websocket/notifications"
 
 import { StateUpdater } from "preact/hooks";
 
-import { dispatch } from "../../redux";
-
 import { DataStore } from "../../mobx";
 import { useData } from "../../mobx/State";
+import { dispatch } from "../../redux";
+
 import { ClientOperations, ClientStatus } from "./RevoltClient";
 
 export var preventReconnect = false;
@@ -20,7 +20,6 @@ export function registerEvents(
     { operations }: { operations: ClientOperations },
     setStatus: StateUpdater<ClientStatus>,
     client: Client,
-    store: DataStore,
 ) {
     function attemptReconnect() {
         if (preventReconnect) return;
@@ -48,7 +47,6 @@ export function registerEvents(
         },
 
         packet: (packet: ClientboundNotification) => {
-            store.packet(packet);
             switch (packet.type) {
                 case "ChannelStartTyping": {
                     if (packet.user === client.user?._id) return;

src/mobx/State.tsx

@@ -1,5 +1,9 @@
+import { ClientboundNotification } from "revolt.js/dist/websocket/notifications";
+
 import { createContext } from "preact";
-import { useContext } from "preact/hooks";
+import { useContext, useEffect, useState } from "preact/hooks";
+
+import { useClient } from "../context/revoltjs/RevoltClient";
 
 import { DataStore } from ".";
 import { Children } from "../types/Preact";
@@ -13,9 +17,18 @@ export const DataContext = createContext<DataStore>(null!);
 // ! later we can do seamless account switching, by hooking this into Redux
 // ! and monitoring changes to active account and hence swapping stores.
 // although this may need more work since we need a Client per account too.
-const store = new DataStore();
 
 export default function StateLoader(props: Props) {
+    const client = useClient();
+    const [store] = useState(new DataStore(client));
+
+    useEffect(() => {
+        const packet = (packet: ClientboundNotification) =>
+            store.packet(packet);
+        client.addListener("packet", packet);
+        return () => client.removeListener("packet", packet);
+    }, [client]);
+
     return (
         <DataContext.Provider value={store}>
             {props.children}

src/mobx/index.ts

@@ -9,6 +9,7 @@ import {
     action,
     extendObservable,
 } from "mobx";
+import { Client } from "revolt.js";
 import {
     Attachment,
     Channels,
@@ -307,13 +308,16 @@ export class Member {
 }
 
 export class DataStore {
+    client: Client;
+
     @observable users = new Map<string, User>();
     @observable channels = new Map<string, Channel>();
     @observable servers = new Map<string, Server>();
     @observable members = new Map<Servers.MemberCompositeKey, Member>();
 
-    constructor() {
-        makeAutoObservable(this);
+    constructor(client: Client) {
+        makeAutoObservable(this, undefined, { proxy: false });
+        this.client = client;
     }
 
     @action
@@ -389,4 +393,16 @@ export class DataStore {
             }
         }
     }
+
+    async fetchMembers(server: string) {
+        let res = await this.client.members.fetchMembers(server);
+
+        for (let user of res.users) {
+            if (!this.users.has(user._id)) {
+                this.users.set(user._id, new User(user));
+            }
+        }
+
+        return res.members;
+    }
 }