Load member sidebar into MobX state.

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;
+    }
 }