From b0681dfc998c472c3c70f13c3c075099db56c569 Mon Sep 17 00:00:00 2001 From: Paul Date: Thu, 29 Jul 2021 21:01:03 +0100 Subject: [PATCH] Load member sidebar into MobX state. --- package.json | 2 +- .../navigation/right/MemberSidebar.tsx | 2 +- src/context/index.tsx | 26 +++++++++---------- src/context/revoltjs/RevoltClient.tsx | 7 +++-- src/context/revoltjs/events.ts | 6 ++--- src/mobx/State.tsx | 17 ++++++++++-- src/mobx/index.ts | 20 ++++++++++++-- yarn.lock | 8 +++--- 8 files changed, 57 insertions(+), 31 deletions(-) diff --git a/package.json b/package.json index 83f056bd..4a1c4419 100644 --- a/package.json +++ b/package.json @@ -96,7 +96,7 @@ "react-router-dom": "^5.2.0", "react-scroll": "^1.8.2", "redux": "^4.1.0", - "revolt.js": "^4.3.3-alpha.19", + "revolt.js": "4.4.0-alpha.0", "rimraf": "^3.0.2", "sass": "^1.35.1", "shade-blend-color": "^1.0.0", diff --git a/src/components/navigation/right/MemberSidebar.tsx b/src/components/navigation/right/MemberSidebar.tsx index 8c2b8138..838acd38 100644 --- a/src/components/navigation/right/MemberSidebar.tsx +++ b/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)); } diff --git a/src/context/index.tsx b/src/context/index.tsx index e3c757e2..46966c08 100644 --- a/src/context/index.tsx +++ b/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 ( - - - - - - + + + + + + {children} - - - - - - + + + + + + ); diff --git a/src/context/revoltjs/RevoltClient.tsx b/src/context/revoltjs/RevoltClient.tsx index 27ed3193..3a5ad2b2 100644 --- a/src/context/revoltjs/RevoltClient.tsx +++ b/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(() => { diff --git a/src/context/revoltjs/events.ts b/src/context/revoltjs/events.ts index f6607334..a84e07ad 100644 --- a/src/context/revoltjs/events.ts +++ b/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, 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; diff --git a/src/mobx/State.tsx b/src/mobx/State.tsx index cd3b149a..8c491ed8 100644 --- a/src/mobx/State.tsx +++ b/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(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 ( {props.children} diff --git a/src/mobx/index.ts b/src/mobx/index.ts index 385bb814..4ea148bf 100644 --- a/src/mobx/index.ts +++ b/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(); @observable channels = new Map(); @observable servers = new Map(); @observable members = new Map(); - 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; + } } diff --git a/yarn.lock b/yarn.lock index f943b7e8..f6c86fee 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3573,10 +3573,10 @@ reusify@^1.0.4: resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76" integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw== -revolt.js@^4.3.3-alpha.19: - version "4.3.3-alpha.19" - resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-4.3.3-alpha.19.tgz#02b0fe8c44b6b803f5314a2d40eda5d3481901d3" - integrity sha512-cpJGqAnAzCV33zuFqiOlRopqhSMhSUZISB7vdsgvjS6Aof1UrWpJJO+POnVxo20FvLM0tMFZaHIxdYeW798U9w== +revolt.js@4.4.0-alpha.0: + version "4.4.0-alpha.0" + resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-4.4.0-alpha.0.tgz#6b8d7e5605c4e106800ebd7ddcda8215a8fb289b" + integrity sha512-TPb7FCC1xpAO0hJ19tXAC5ZwsceJ/yzkFlV/lESteVk4bboVINhRrsElYtJvjSKci7Ft70t0e4bbm8YSYjAblA== dependencies: "@insertish/mutable" "1.1.0" axios "^0.19.2"