Refactor Chatterbox class from main.ts

src/Chatterbox.ts

+import { IChatterboxConfig } from "./types/IChatterboxConfig";
+import { Hydrogen } from "./Hydrogen";
+import { generateRandomString } from "./random";
+
+
+export class Chatterbox {
+    private _config: IChatterboxConfig;
+    private _hydrogen: Hydrogen;
+
+    constructor(config: IChatterboxConfig, root: HTMLDivElement) {
+        this._config = config;
+        this._hydrogen = new Hydrogen(this._homeserver, root);
+    }
+
+    async start(): Promise<void> {
+        console.log("Checking if session already exists");
+        const sessionAlreadyExists = await this._hydrogen.attemptStartWithExistingSession();
+        if (sessionAlreadyExists) {
+            console.log("Starting hydrogen with existing session");
+        } else {
+            console.log("Session does not exist!");
+            await this._registerAndLogin();
+        }
+
+        console.log("Attempting to mount Timeline");
+        await this._hydrogen.mountTimeline(this._roomToJoin);
+        console.log("Mounted Timeline");
+    }
+
+    private async _registerAndLogin(): Promise<void> {
+        const username = generateRandomString(7);
+        const password = generateRandomString(10);
+        console.log( `Attempting to register with username = ${username} and password = ${password}`);
+        await this._hydrogen.register( username, password, "Chatterbox");
+        console.log("Registration done");
+        console.log("Attempting to login with same credentials");
+        await this._hydrogen.login(username, password);
+        console.log("Login successful");
+    }
+
+    private get _homeserver(): string {
+        return this._config.homeserver;
+    }
+
+    private get _roomToJoin(): string {
+        return this._config.auto_join_room;
+    }
+}

src/main.ts

-import { Hydrogen } from "./Hydrogen";
+import { Chatterbox } from "./Chatterbox";
 import type { IChatterboxConfig } from "./types/IChatterboxConfig";
 
-async function fetchConfig(): Promise<IChatterboxConfig> {
-    const root = document.querySelector("#chatterbox") as HTMLDivElement;
-    if (!root) {
-        throw new Error("No element with id as 'chatterbox' found!");
-    }
+const rootDivId = "#chatterbox";
 
+async function fetchConfig(root: HTMLDivElement): Promise<IChatterboxConfig> {
     const configLink = root?.dataset.configLink;
     if (!configLink) {
         throw new Error("Root element does not have config specified");
     }
-
     const config: IChatterboxConfig = await (await fetch(configLink)).json();
     return config;
 }
 
 async function main() {
-    const root = document.querySelector("#chatterbox") as HTMLDivElement;
-    const { homeserver, auto_join_room } = await fetchConfig();
-    const hydrogen = new Hydrogen(homeserver, root);
-    console.log("Checking if session already exists");
-    const sessionAlreadyExists = await hydrogen.attemptStartWithExistingSession();
-    if (sessionAlreadyExists) {
-        console.log("Starting Hydrogen with existing session");
-    }
-    else {
-        console.log("Session does not exist!");
-        const username = generateRandomString(7);
-        const password = generateRandomString(10);
-        console.log(`Attempting to register with username = ${username} and password = ${password}`);
-        await hydrogen.register(username, password, "Chatterbox");
-        console.log("Registration done"); 
-        console.log("Attempting to login with same credentials");
-        await hydrogen.login(username, password);
-        console.log("Login successful");
-    }
-
-    console.log("Attempting to mount Timeline");
-    await hydrogen.mountTimeline(auto_join_room);
-    console.log("Mounted Timeline");
-}
-
-function generateRandomString(length: number): string {
-    let result = "";
-    const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_";
-    var charactersLength = characters.length;
-    for (let i = 0; i < length; i++) {
-        result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    const root = document.querySelector(rootDivId) as HTMLDivElement;
+    if (!root) {
+        throw new Error("No element with id as 'chatterbox' found!");
     }
-    return result;
+    const config = await fetchConfig(root);
+    const chatterbox = new Chatterbox(config, root);
+    chatterbox.start();
 }
 
 main();

src/random.ts

+// todo: do we need something better than this?
+export function generateRandomString(length: number): string {
+    let result = "";
+    const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_";
+    var charactersLength = characters.length;
+    for (let i = 0; i < length; i++) {
+        result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    }
+    return result;
+}