From 7e6e4ecfab5094cb3e10355f649506ea6a7b5ccb Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <rmidhunsuresh@gmail.com>
Date: Fri, 11 Jun 2021 23:56:07 +0530
Subject: [PATCH] Duplicate navigation from room details

- TODO: Remove duplication

Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>
---
 src/domain/navigation/index.js             |  2 +-
 src/domain/session/SessionViewModel.js     | 22 ++++++++++++++++++++++
 src/platform/web/ui/session/SessionView.js |  2 ++
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/domain/navigation/index.js b/src/domain/navigation/index.js
index fab91c11..5dbb790f 100644
--- a/src/domain/navigation/index.js
+++ b/src/domain/navigation/index.js
@@ -37,7 +37,7 @@ function allowsChild(parent, child) {
             // downside of the approach: both of these will control which tile is selected
             return type === "room" || type === "empty-grid-tile";
         case "room":
-            return type === "lightbox" || type === "details";
+            return type === "lightbox" || type === "details"  || type === "members";
         default:
             return false;
     }
diff --git a/src/domain/session/SessionViewModel.js b/src/domain/session/SessionViewModel.js
index 087b9315..6fb8a11b 100644
--- a/src/domain/session/SessionViewModel.js
+++ b/src/domain/session/SessionViewModel.js
@@ -26,6 +26,7 @@ import {RoomGridViewModel} from "./RoomGridViewModel.js";
 import {SettingsViewModel} from "./settings/SettingsViewModel.js";
 import {ViewModel} from "../ViewModel.js";
 import {RoomViewModelObservable} from "./RoomViewModelObservable.js";
+import {MemberListViewModel} from "./rightpanel/MemberListViewModel.js";
 
 export class SessionViewModel extends ViewModel {
     constructor(options) {
@@ -84,6 +85,10 @@ export class SessionViewModel extends ViewModel {
         const details = this.navigation.observe("details");
         this.track(details.subscribe(() => this._updateRoomDetails()));
         this._updateRoomDetails();
+
+        const members = this.navigation.observe("members");
+        this.track(members.subscribe(() => this._toggleMemberListPanel()));
+        this._toggleMemberListPanel();
     }
 
     get id() {
@@ -122,6 +127,10 @@ export class SessionViewModel extends ViewModel {
         return this._roomDetailsViewModel;
     }
 
+    get memberListViewModel() {
+        return this._memberListViewModel;
+    }
+
     _updateGrid(roomIds) {
         const changed = !(this._gridViewModel && roomIds);
         const currentRoomId = this.navigation.path.get("room");
@@ -267,4 +276,17 @@ export class SessionViewModel extends ViewModel {
         this.emitChange("roomDetailsViewModel");
     }
 
+    async _toggleMemberListPanel() {
+        this._memberListViewModel = this.disposeTracked(this._memberListViewModel);
+        const enable = !!this.navigation.path.get("members")?.value;
+        if (enable) {
+            const room = this._roomFromNavigation();
+            const list = await room.loadMemberList();
+            const members = list.members;
+            this._memberListViewModel = this.track(
+                new MemberListViewModel(this.childOptions({members}))
+            );
+        }
+        this.emitChange("memberListViewModel");
+    }
 }
diff --git a/src/platform/web/ui/session/SessionView.js b/src/platform/web/ui/session/SessionView.js
index 877cc67c..4323a07c 100644
--- a/src/platform/web/ui/session/SessionView.js
+++ b/src/platform/web/ui/session/SessionView.js
@@ -26,6 +26,7 @@ import {SessionStatusView} from "./SessionStatusView.js";
 import {RoomGridView} from "./RoomGridView.js";
 import {SettingsView} from "./settings/SettingsView.js";
 import {RoomDetailsView} from "./rightpanel/RoomDetailsView.js";
+import {MemberListView} from "./rightpanel/MemberListView.js";
 
 export class SessionView extends TemplateView {
     render(t, vm) {
@@ -56,6 +57,7 @@ export class SessionView extends TemplateView {
                 }
             }),
             t.mapView(vm => vm.roomDetailsViewModel, roomDetailsViewModel => roomDetailsViewModel ? new RoomDetailsView(roomDetailsViewModel) : null),
+            t.mapView(vm => vm.memberListViewModel, memberListViewModel => memberListViewModel ? new MemberListView(memberListViewModel) : null),
             t.mapView(vm => vm.lightboxViewModel, lightboxViewModel => lightboxViewModel ? new LightboxView(lightboxViewModel) : null)
         ]);
     }