From 3788fde711d5d5a0f761c9b853000f5d1a4692bb Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 5 Jan 2018 23:16:21 +0000
Subject: [PATCH 1/4] Add a tooltip to members button and badge with actual
 count

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/structures/RightPanel.js | 11 ++++++-----
 src/i18n/strings/en_EN.json             |  1 +
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index 2a19794f..778c0114 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -266,6 +266,7 @@ module.exports = React.createClass({
         let inviteGroup;
 
         let membersBadge;
+        let membersTitle = _t('Members');
         if ((this.state.phase == this.Phase.RoomMemberList || this.state.phase === this.Phase.RoomMemberInfo)
             && this.props.roomId
         ) {
@@ -273,10 +274,10 @@ module.exports = React.createClass({
             const room = cli.getRoom(this.props.roomId);
             let userIsInRoom;
             if (room) {
-                membersBadge = formatCount(room.getJoinedMembers().length);
-                userIsInRoom = room.hasMembershipState(
-                    this.context.matrixClient.credentials.userId, 'join',
-                );
+                const numMembers = room.getJoinedMembers().length;
+                membersTitle = _t('%(numMembers)s Members', { numMembers });
+                membersBadge = <div title={membersTitle}>{ formatCount(numMembers) }</div>;
+                userIsInRoom = room.hasMembershipState(this.context.matrixClient.credentials.userId, 'join');
             }
 
             if (userIsInRoom) {
@@ -298,7 +299,7 @@ module.exports = React.createClass({
         let headerButtons = [];
         if (this.props.roomId) {
             headerButtons = [
-                <HeaderButton key="_membersButton" title={_t('Members')} iconSrc="img/icons-people.svg"
+                <HeaderButton key="_membersButton" title={membersTitle} iconSrc="img/icons-people.svg"
                     isHighlighted={[this.Phase.RoomMemberList, this.Phase.RoomMemberInfo].includes(this.state.phase)}
                     clickPhase={this.Phase.RoomMemberList}
                     badge={membersBadge}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index c1857e31..52244e09 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -158,6 +158,7 @@
     "Register": "Register",
     "Invite to this room": "Invite to this room",
     "Members": "Members",
+    "%(numMembers)s Members": "%(numMembers)s Members",
     "Files": "Files",
     "Notifications": "Notifications",
     "Rooms": "Rooms",

From c68c54618f37d70f485f40719021efa7448bbb80 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 5 Jan 2018 23:19:43 +0000
Subject: [PATCH 2/4] delint

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/structures/RightPanel.js | 58 ++++++++++++-------------
 1 file changed, 27 insertions(+), 31 deletions(-)

diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index 778c0114..da1e7117 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -24,7 +24,7 @@ import sdk from 'matrix-react-sdk';
 import dis from 'matrix-react-sdk/lib/dispatcher';
 import { MatrixClient } from 'matrix-js-sdk';
 import Analytics from 'matrix-react-sdk/lib/Analytics';
-import rate_limited_func from 'matrix-react-sdk/lib/ratelimitedfunc';
+import RateLimitedFunc from 'matrix-react-sdk/lib/ratelimitedfunc';
 import AccessibleButton from 'matrix-react-sdk/lib/components/views/elements/AccessibleButton';
 import { showGroupInviteDialog, showGroupAddRoomDialog } from 'matrix-react-sdk/lib/GroupAddressPicker';
 import GroupStoreCache from 'matrix-react-sdk/lib/stores/GroupStoreCache';
@@ -58,8 +58,8 @@ class HeaderButton extends React.Component {
                 <div className="mx_RightPanel_headerButton_badge">
                     { this.props.badge ? this.props.badge : <span>&nbsp;</span> }
                 </div>
-                <TintableSvg src={this.props.iconSrc} width="25" height="25"/>
-                { this.props.isHighlighted ? <div className="mx_RightPanel_headerButton_highlight"></div> : <div/> }
+                <TintableSvg src={this.props.iconSrc} width="25" height="25" />
+                { this.props.isHighlighted ? <div className="mx_RightPanel_headerButton_highlight" /> : <div /> }
 
             </AccessibleButton>;
     }
@@ -184,18 +184,17 @@ module.exports = React.createClass({
 
     onRoomStateMember: function(ev, state, member) {
         // redraw the badge on the membership list
-        if (this.state.phase == this.Phase.RoomMemberList && member.roomId === this.props.roomId) {
+        if (this.state.phase === this.Phase.RoomMemberList && member.roomId === this.props.roomId) {
             this._delayedUpdate();
-        }
-        else if (this.state.phase === this.Phase.RoomMemberInfo && member.roomId === this.props.roomId &&
+        } else if (this.state.phase === this.Phase.RoomMemberInfo && member.roomId === this.props.roomId &&
                 member.userId === this.state.member.userId) {
             // refresh the member info (e.g. new power level)
             this._delayedUpdate();
         }
     },
 
-    _delayedUpdate: new rate_limited_func(function() {
-        this.forceUpdate();
+    _delayedUpdate: new RateLimitedFunc(function() {
+        this.forceUpdate(); // eslint-disable-line babel/no-invalid-this
     }, 500),
 
     onAction: function(payload) {
@@ -267,7 +266,7 @@ module.exports = React.createClass({
 
         let membersBadge;
         let membersTitle = _t('Members');
-        if ((this.state.phase == this.Phase.RoomMemberList || this.state.phase === this.Phase.RoomMemberInfo)
+        if ((this.state.phase === this.Phase.RoomMemberList || this.state.phase === this.Phase.RoomMemberInfo)
             && this.props.roomId
         ) {
             const cli = this.context.matrixClient;
@@ -282,7 +281,7 @@ module.exports = React.createClass({
 
             if (userIsInRoom) {
                 inviteGroup =
-                    <AccessibleButton className="mx_RightPanel_invite" onClick={ this.onInviteButtonClick } >
+                    <AccessibleButton className="mx_RightPanel_invite" onClick={this.onInviteButtonClick}>
                         <div className="mx_RightPanel_icon" >
                             <TintableSvg src="img/icon-invite-people.svg" width="35" height="35" />
                         </div>
@@ -293,7 +292,7 @@ module.exports = React.createClass({
 
         const isPhaseGroup = [
             this.Phase.GroupMemberInfo,
-            this.Phase.GroupMemberList
+            this.Phase.GroupMemberList,
         ].includes(this.state.phase);
 
         let headerButtons = [];
@@ -337,54 +336,54 @@ module.exports = React.createClass({
             // button on these 2 screens or you won't be able to re-expand the panel.
             headerButtons.push(
                 <div className="mx_RightPanel_headerButton mx_RightPanel_collapsebutton" key="_minimizeButton"
-                    title={ _t("Hide panel") } aria-label={ _t("Hide panel") } onClick={ this.onCollapseClick }
+                    title={_t("Hide panel")} aria-label={_t("Hide panel")} onClick={this.onCollapseClick}
                 >
-                    <TintableSvg src="img/minimise.svg" width="10" height="16"/>
+                    <TintableSvg src="img/minimise.svg" width="10" height="16" />
                 </div>,
             );
         }
 
         let panel = <div />;
         if (!this.props.collapsed) {
-            if (this.props.roomId && this.state.phase == this.Phase.RoomMemberList) {
+            if (this.props.roomId && this.state.phase === this.Phase.RoomMemberList) {
                 panel = <MemberList roomId={this.props.roomId} key={this.props.roomId} />;
-            } else if (this.props.groupId && this.state.phase == this.Phase.GroupMemberList) {
+            } else if (this.props.groupId && this.state.phase === this.Phase.GroupMemberList) {
                 panel = <GroupMemberList groupId={this.props.groupId} key={this.props.groupId} />;
             } else if (this.state.phase === this.Phase.GroupRoomList) {
                 panel = <GroupRoomList groupId={this.props.groupId} key={this.props.groupId} />;
-            } else if (this.state.phase == this.Phase.RoomMemberInfo) {
+            } else if (this.state.phase === this.Phase.RoomMemberInfo) {
                 panel = <MemberInfo member={this.state.member} key={this.props.roomId || this.state.member.userId} />;
-            } else if (this.state.phase == this.Phase.GroupMemberInfo) {
+            } else if (this.state.phase === this.Phase.GroupMemberInfo) {
                 panel = <GroupMemberInfo
                     groupMember={this.state.member}
                     groupId={this.props.groupId}
                     key={this.state.member.user_id} />;
-            } else if (this.state.phase == this.Phase.GroupRoomInfo) {
+            } else if (this.state.phase === this.Phase.GroupRoomInfo) {
                 panel = <GroupRoomInfo
                     groupRoomId={this.state.groupRoomId}
                     groupId={this.props.groupId}
                     key={this.state.groupRoomId} />;
-            } else if (this.state.phase == this.Phase.NotificationPanel) {
+            } else if (this.state.phase === this.Phase.NotificationPanel) {
                 panel = <NotificationPanel />;
-            } else if (this.state.phase == this.Phase.FilePanel) {
+            } else if (this.state.phase === this.Phase.FilePanel) {
                 panel = <FilePanel roomId={this.props.roomId} />;
             }
         }
 
         if (!panel) {
-            panel = <div className="mx_RightPanel_blank"></div>;
+            panel = <div className="mx_RightPanel_blank" />;
         }
 
         if (this.props.groupId && this.state.isUserPrivilegedInGroup) {
             inviteGroup = isPhaseGroup ? (
-                <AccessibleButton className="mx_RightPanel_invite" onClick={ this.onInviteButtonClick } >
+                <AccessibleButton className="mx_RightPanel_invite" onClick={this.onInviteButtonClick}>
                     <div className="mx_RightPanel_icon" >
                         <TintableSvg src="img/icon-invite-people.svg" width="35" height="35" />
                     </div>
                     <div className="mx_RightPanel_message">{ _t('Invite to this community') }</div>
                 </AccessibleButton>
             ) : (
-                <AccessibleButton className="mx_RightPanel_invite" onClick={ this.onInviteButtonClick } >
+                <AccessibleButton className="mx_RightPanel_invite" onClick={this.onInviteButtonClick}>
                     <div className="mx_RightPanel_icon" >
                         <TintableSvg src="img/icons-room-add.svg" width="35" height="35" />
                     </div>
@@ -393,19 +392,16 @@ module.exports = React.createClass({
             );
         }
 
-        let classes = classNames(
-            "mx_RightPanel", "mx_fadable",
-            {
-                "collapsed": this.props.collapsed,
-                "mx_fadable_faded": this.props.disabled,
-            }
-        );
+        const classes = classNames("mx_RightPanel", "mx_fadable", {
+            "collapsed": this.props.collapsed,
+            "mx_fadable_faded": this.props.disabled,
+        });
 
         return (
             <aside className={classes}>
                 <div className="mx_RightPanel_header">
                     <div className="mx_RightPanel_headerButtonGroup">
-                        {headerButtons}
+                        { headerButtons }
                     </div>
                 </div>
                 { panel }

From 290bf54d4f399aee34478f54a917c1cc59ba5a35 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 5 Jan 2018 23:55:32 +0000
Subject: [PATCH 3/4] pluralise properly

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/structures/RightPanel.js | 2 +-
 src/i18n/strings/en_EN.json             | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index da1e7117..82933c74 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -274,7 +274,7 @@ module.exports = React.createClass({
             let userIsInRoom;
             if (room) {
                 const numMembers = room.getJoinedMembers().length;
-                membersTitle = _t('%(numMembers)s Members', { numMembers });
+                membersTitle = _t('%(count)s Members', { count: numMembers });
                 membersBadge = <div title={membersTitle}>{ formatCount(numMembers) }</div>;
                 userIsInRoom = room.hasMembershipState(this.context.matrixClient.credentials.userId, 'join');
             }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 52244e09..84bac98f 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -158,7 +158,8 @@
     "Register": "Register",
     "Invite to this room": "Invite to this room",
     "Members": "Members",
-    "%(numMembers)s Members": "%(numMembers)s Members",
+    "%(count)s Members|other": "%(count)s Members",
+    "%(count)s Members|one": "%(count)s Member",
     "Files": "Files",
     "Notifications": "Notifications",
     "Rooms": "Rooms",

From 321f16d8a33af0aa8354441d5c8f8d68a346e867 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 22 Jan 2018 18:54:22 +0000
Subject: [PATCH 4/4] rename variable as it was horrible to read camelCased

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/structures/RightPanel.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index 82933c74..55f588f2 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -271,15 +271,15 @@ module.exports = React.createClass({
         ) {
             const cli = this.context.matrixClient;
             const room = cli.getRoom(this.props.roomId);
-            let userIsInRoom;
+            let isUserInRoom;
             if (room) {
                 const numMembers = room.getJoinedMembers().length;
                 membersTitle = _t('%(count)s Members', { count: numMembers });
                 membersBadge = <div title={membersTitle}>{ formatCount(numMembers) }</div>;
-                userIsInRoom = room.hasMembershipState(this.context.matrixClient.credentials.userId, 'join');
+                isUserInRoom = room.hasMembershipState(this.context.matrixClient.credentials.userId, 'join');
             }
 
-            if (userIsInRoom) {
+            if (isUserInRoom) {
                 inviteGroup =
                     <AccessibleButton className="mx_RightPanel_invite" onClick={this.onInviteButtonClick}>
                         <div className="mx_RightPanel_icon" >