chore: clean up FSM code

src/components/navigation/items/ConnectionStatus.tsx

@@ -2,7 +2,7 @@ import { observer } from "mobx-react-lite";
 
 import { Text } from "preact-i18n";
 
-import { Banner } from "@revoltchat/ui";
+import { Banner, Button, Column } from "@revoltchat/ui";
 
 import { useSession } from "../../../controllers/client/ClientController";
 
@@ -18,15 +18,19 @@ function ConnectionStatus() {
     } else if (session.state === "Disconnected") {
         return (
             <Banner>
-                <Text id="app.special.status.disconnected" /> <br />
+                <Column centred>
-                <a
+                    <Text id="app.special.status.disconnected" />
-                    onClick={() =>
+                    <Button
-                        session.emit({
+                        compact
-                            action: "RETRY",
+                        palette="secondary"
-                        })
+                        onClick={() =>
-                    }>
+                            session.emit({
-                    <Text id="app.special.status.reconnect" />
+                                action: "RETRY",
-                </a>
+                            })
+                        }>
+                        <Text id="app.status.reconnect" />
+                    </Button>
+                </Column>
             </Banner>
         );
     } else if (session.state === "Connecting") {

src/controllers/client/ClientController.tsx

@@ -1,6 +1,8 @@
 import { action, computed, makeAutoObservable, ObservableMap } from "mobx";
 import { Client, Nullable } from "revolt.js";
 
+import { injectController } from "../../lib/window";
+
 import Auth from "../../mobx/stores/Auth";
 
 import { modalController } from "../modals/ModalController";
@@ -35,7 +37,7 @@ class ClientController {
         this.logoutCurrent = this.logoutCurrent.bind(this);
 
         // Inject globally
-        (window as any).clientController = this;
+        injectController("client", this);
     }
 
     /**
@@ -53,12 +55,14 @@ class ClientController {
                 .emit({
                     action: "LOGIN",
                     session: entry.session,
+                    apiUrl: entry.apiUrl,
                 })
                 .catch((error) => {
                     if (error === "Forbidden" || error === "Unauthorized") {
                         this.sessions.delete(user_id);
                         auth.removeSession(user_id);
                         modalController.push({ type: "signed_out" });
+                        session.destroy();
                     }
                 });
         }

src/controllers/client/Session.tsx

@@ -7,6 +7,7 @@ type Transition =
     | {
           action: "LOGIN";
           session: SessionPrivate;
+          apiUrl?: string;
       }
     | {
           action:
@@ -70,12 +71,12 @@ export default class Session {
         });
     }
 
-    private createClient() {
+    private createClient(apiUrl?: string) {
         this.client = new Client({
             unreads: true,
             autoReconnect: false,
             onPongTimeout: "EXIT",
-            apiURL: import.meta.env.VITE_API_URL,
+            apiURL: apiUrl ?? import.meta.env.VITE_API_URL,
         });
 
         this.client.addListener("dropped", this.onDropped);
@@ -110,7 +111,7 @@ export default class Session {
             case "LOGIN": {
                 this.assert("Ready");
                 this.state = "Connecting";
-                this.createClient();
+                this.createClient(data.apiUrl);
 
                 try {
                     await this.client!.useExistingSession(data.session);
@@ -135,10 +136,13 @@ export default class Session {
                     this.state = "Disconnected";
 
                     setTimeout(() => {
-                        this.emit({
+                        // Check we are still disconnected before retrying.
-                            action: "RETRY",
+                        if (this.state === "Disconnected") {
-                        });
+                            this.emit({
-                    }, 1500);
+                                action: "RETRY",
+                            });
+                        }
+                    }, 1000);
                 }
 
                 break;

src/controllers/modals/ModalController.tsx

@@ -9,6 +9,7 @@ import type { Client, API } from "revolt.js";
 import { ulid } from "ulid";
 
 import { determineLink } from "../../lib/links";
+import { injectController } from "../../lib/window";
 
 import { getApplicationState } from "../../mobx/State";
 
@@ -52,6 +53,9 @@ class ModalController<T extends Modal> {
             rendered: computed,
             isVisible: computed,
         });
+
+        // Inject globally
+        injectController("modal", this);
     }
 
     /**

src/lib/window.ts

@@ -0,0 +1,6 @@
+export function injectController(key: string, value: any) {
+    (window as any).controllers = {
+        ...((window as any).controllers ?? {}),
+        [key]: value,
+    };
+}

src/mobx/stores/Auth.ts

@@ -8,6 +8,7 @@ import Store from "../interfaces/Store";
 
 interface Account {
     session: Session;
+    apiUrl?: string;
 }
 
 export interface Data {
@@ -70,9 +71,10 @@ export default class Auth implements Store, Persistent<Data> {
     /**
      * Add a new session to the auth manager.
      * @param session Session
+     * @param apiUrl Custom API URL
      */
-    @action setSession(session: Session) {
+    @action setSession(session: Session, apiUrl?: string) {
-        this.sessions.set(session.user_id, { session });
+        this.sessions.set(session.user_id, { session, apiUrl });
     }
 
     /**