make join functional + fix room id being passed to delete during dispose

Automattic · Feb 23, 2023 · 10415d1 · 10415d1
1 parent e9261e5
commit 10415d1
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 2 deletions.
diff --git a/src/domain/session/room/WorldReadableRoomViewModel.js b/src/domain/session/room/WorldReadableRoomViewModel.js
@@ -4,15 +4,41 @@ export class WorldReadableRoomViewModel extends RoomViewModel {
     constructor(options) {
         options.room.isWorldReadable = true;
         super(options);
+        this._room = options.room;
         this._session = options.session;
+        this._error = null;
+        this._busy = false;
     }
 
     get kind() {
         return "preview";
     }
 
+    get busy() {
+        return this._busy;
+    }
+
+    async join() {
+        this._busy = true;
+        this.emitChange("busy");
+        try {
+            const roomId = await this._session.joinRoom(this._room.id);
+            await this._session.deleteWorldReadableRoomData(this._room.id);
+            // navigate to roomId if we were at the alias
+            // so we're subscribed to the right room status
+            // and we'll switch to the room view model once
+            // the join is synced
+            this.navigation.push("room", roomId);
+            // keep busy on true while waiting for the join to sync
+        } catch (err) {
+            this._error = err;
+            this._busy = false;
+            this.emitChange("error");
+        }
+    }
+
     dispose() {
         super.dispose();
-        void this._session.deleteWorldReadableRoomData(this.roomIdOrAlias);
+        void this._session.deleteWorldReadableRoomData(this._room.id);
     }
 }
diff --git a/src/platform/web/ui/session/room/WorldReadableRoomView.js b/src/platform/web/ui/session/room/WorldReadableRoomView.js
@@ -32,7 +32,11 @@ export class WorldReadableRoomView extends TemplateView {
                 }),
                 t.div({className: "WorldReadableRoomComposerView"}, [
                     t.h3(vm => vm.i18n`Join the room to participate`),
-                    t.button({className: "joinRoomButton", onClick: () => vm.join()}, vm.i18n`Join Room`)
+                    t.button({
+                        className: "joinRoomButton",
+                        onClick: () => vm.join(),
+                        disabled: vm => vm.busy,
+                    }, vm.i18n`Join Room`)
                 ])
             ])
         ]);