Create navigation and add to right panel

Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>

src/domain/navigation/index.js

@@ -39,7 +39,7 @@ function allowsChild(parent, child) {
         case "room":
             return type === "lightbox" || type === "right-panel";
         case "right-panel":
-            return type === "details"|| type === "members";
+            return type === "details"|| type === "members" || type === "member";
         default:
             return false;
     }
@@ -87,9 +87,9 @@ function roomsSegmentWithRoom(rooms, roomId, path) {
     }
 }
 
-function pushRightPanelSegment(array, segment) {
+function pushRightPanelSegment(array, segment, value = true) {
     array.push(new Segment("right-panel"));
-    array.push(new Segment(segment));
+    array.push(new Segment(segment, value));
 }
 
 export function addPanelIfNeeded(navigation, path) {
@@ -147,6 +147,10 @@ export function parseUrlPath(urlPath, currentNavPath, defaultSessionId) {
             }
         } else if (type === "details" || type === "members") {
             pushRightPanelSegment(segments, type);
+        } else if (type === "member") {
+            const userId = iterator.next().value;
+            if (!userId) { break; }
+            pushRightPanelSegment(segments, type, userId);
         } else {
             // might be undefined, which will be turned into true by Segment 
             const value = iterator.next().value;

src/domain/session/rightpanel/RightPanelViewModel.js

@@ -1,6 +1,7 @@
 import {ViewModel} from "../../ViewModel.js";
 import {RoomDetailsViewModel} from "./RoomDetailsViewModel.js";
 import {MemberListViewModel} from "./MemberListViewModel.js";
+import {MemberDetailsViewModel} from "./MemberDetailsViewModel.js";
 
 export class RightPanelViewModel extends ViewModel {
     constructor(options) {
@@ -11,16 +12,24 @@ export class RightPanelViewModel extends ViewModel {
 
     get activeViewModel() { return this._activeViewModel; }
 
-    async _getMemberArguments() {
+    async _getMemberListArguments() {
         const members = await this._room.loadMemberList();
         const room = this._room;
         const powerLevelsObservable = await this._room.observePowerLevels();
         return {members, powerLevelsObservable, mediaRepository: room.mediaRepository};
     }
 
+    async _getMemberDetailsArguments() {
+        const segment = this.navigation.path.get("member"); 
+        const userId = segment.value;
+        const observableMember = await this._room.observeMember(userId);
+        return {observableMember, mediaRepository: this._room.mediaRepository};
+    }
+
     _setupNavigation() {
         this._hookUpdaterToSegment("details", RoomDetailsViewModel, () => { return {room: this._room}; });
-        this._hookUpdaterToSegment("members", MemberListViewModel, () => this._getMemberArguments());
+        this._hookUpdaterToSegment("members", MemberListViewModel, () => this._getMemberListArguments());
+        this._hookUpdaterToSegment("member", MemberDetailsViewModel, () => this._getMemberDetailsArguments());
     }
 
     _hookUpdaterToSegment(segment, viewmodel, argCreator) {

src/platform/web/ui/session/rightpanel/RightPanelView.js

@@ -2,12 +2,14 @@ import {TemplateView} from "../../general/TemplateView.js";
 import {RoomDetailsView} from "./RoomDetailsView.js";
 import {MemberListView} from "./MemberListView.js";
 import {LoadingView} from "../../general/LoadingView.js";
+import {MemberDetailsView} from "./MemberDetailsView.js";
 
 export class RightPanelView extends TemplateView {
     render(t) {
         const viewFromType = {
             "room-details": RoomDetailsView,
-            "member-list": MemberListView
+            "member-list": MemberListView,
+            "member-details": MemberDetailsView
         };
         return t.div({ className: "RightPanelView" },
             [