From efd37d811f34f4d48c82d36770be552a49da04dc Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <rmidhunsuresh@gmail.com>
Date: Sun, 6 Jun 2021 23:18:16 +0530
Subject: [PATCH] Update on changes to vm

Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>
---
 .../session/rightpanel/RoomInfoViewModel.js   |  1 +
 .../web/ui/session/rightpanel/RoomInfoView.js | 34 +++++++++++--------
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/domain/session/rightpanel/RoomInfoViewModel.js b/src/domain/session/rightpanel/RoomInfoViewModel.js
index d45c4994..281c557b 100644
--- a/src/domain/session/rightpanel/RoomInfoViewModel.js
+++ b/src/domain/session/rightpanel/RoomInfoViewModel.js
@@ -5,6 +5,7 @@ export class RoomInfoViewModel extends ViewModel {
     constructor(options) {
         super(options);
         this._room = options.room;
+        this._room.on("change", () => this.emitChange());
     }
 
     get roomId() {
diff --git a/src/platform/web/ui/session/rightpanel/RoomInfoView.js b/src/platform/web/ui/session/rightpanel/RoomInfoView.js
index fd2ba58e..c70454e7 100644
--- a/src/platform/web/ui/session/rightpanel/RoomInfoView.js
+++ b/src/platform/web/ui/session/rightpanel/RoomInfoView.js
@@ -5,18 +5,20 @@ import { AvatarView } from "../../avatar.js";
 export class RoomInfoView extends TemplateView {
 
     render(t, vm) {
-        const encryptionString = vm.isEncrypted ? vm.i18n`On` : vm.i18n`Off`;
-
+        const encryptionString = () => vm.isEncrypted ? vm.i18n`On` : vm.i18n`Off`;
         return t.div({ className: "RoomInfo" }, [
             this._createButton(t, vm),
             t.div({ className: "RoomAvatar" },
-                [t.view(new AvatarView(vm, 52)), this._createEncryptionIcon(vm.isEncrypted)]),
-            t.div({ className: "RoomName" }, [t.h2(vm.name)]),
+                [
+                    t.view(new AvatarView(vm, 52)),
+                    t.mapView(vm => vm.isEncrypted, isEncrypted => new EncryptionAvatarView(isEncrypted))
+                ]),
+            t.div({ className: "RoomName" }, [t.h2(vm => vm.name)]),
             this._createRoomAliasDisplay(vm),
             t.div({ className: "SidebarRow_collection" },
                 [
-                    this._createSideBarRow(vm.i18n`People`, vm.memberCount, { MemberCount: true }),
-                    this._createSideBarRow(vm.i18n`Encryption`, encryptionString, { EncryptionStatus: true })
+                    this._createSideBarRow(t, vm.i18n`People`, vm => vm.memberCount, { MemberCount: true }),
+                    this._createSideBarRow(t, vm.i18n`Encryption`, encryptionString, { EncryptionStatus: true })
                 ])
         ]);
     }
@@ -26,20 +28,15 @@ export class RoomInfoView extends TemplateView {
             "";
     }
 
-    _createSideBarRow(label, value, labelClass, valueClass) {
+    _createSideBarRow(t, label, value, labelClass, valueClass) {
         const labelClassString = classNames({ SidebarLabel: true, ...labelClass });
         const valueClassString = classNames({ SidebarValue: true, ...valueClass });
-        return tag.div({ className: "SidebarRow" }, [
-            tag.div({ className: labelClassString }, [text(label)]),
-            tag.div({ className: valueClassString }, [text(value)])
+        return t.div({ className: "SidebarRow" }, [
+            t.div({ className: labelClassString }, [text(label)]),
+            t.div({ className: valueClassString }, value)
         ]);
     }
 
-    _createEncryptionIcon(isEncrypted) {
-        return tag.div({ className: "RoomEncryption" },
-            [tag.div({ className: isEncrypted ? "encrypted" : "unencrypted" })])
-    }
-
     _createButton(t, vm) {
         return t.div({ className: "buttons" },
             [
@@ -47,3 +44,10 @@ export class RoomInfoView extends TemplateView {
             ]);
     }
 }
+
+class EncryptionAvatarView extends TemplateView{
+    render(t, isEncrypted) {
+       return t.div({ className: "RoomEncryption" },
+            [t.div({ className: isEncrypted ? "encrypted" : "unencrypted" })]);
+    }
+}