From 5ef0eece9a4ee9134560e9f3757f8138610051f8 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 14 May 2018 16:09:22 +0100
Subject: [PATCH] refactor and sort

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/rooms/RoomSettings.js | 65 +++++++++++++++-------
 1 file changed, 45 insertions(+), 20 deletions(-)

diff --git a/src/components/views/rooms/RoomSettings.js b/src/components/views/rooms/RoomSettings.js
index 658f99223e..f1aba322e2 100644
--- a/src/components/views/rooms/RoomSettings.js
+++ b/src/components/views/rooms/RoomSettings.js
@@ -695,26 +695,51 @@ module.exports = React.createClass({
             relatedGroupsEvent={this.props.room.currentState.getStateEvents('m.room.related_groups', '')}
         />;
 
-        let userLevelsSection;
+        let privilegedUsersSection = <div>{ _t('No users have specific privileges in this room') }.</div>; // default
+        let mutedUsersSection;
         if (Object.keys(userLevels).length) {
-            userLevelsSection =
-                <div>
-                    <h3>{ _t('Privileged Users') }</h3>
-                    <ul className="mx_RoomSettings_userLevels">
-                        { Object.keys(userLevels).map(function(user, i) {
-                            return (
-                                <li className="mx_RoomSettings_userLevel" key={user}>
-                                    { _t("%(user)s is a %(userRole)s", {
-                                        user: user,
-                                        userRole: <PowerSelector value={userLevels[user]} disabled={true} />,
-                                    }) }
-                                </li>
-                            );
+            const privilegedUsers = [];
+            const mutedUsers = [];
+
+            Object.keys(userLevels).forEach(function(user) {
+                if (userLevels[user] > defaultUserLevel) { // privileged
+                    privilegedUsers.push(<li className="mx_RoomSettings_userLevel" key={user}>
+                        { _t("%(user)s is a %(userRole)s", {
+                            user: user,
+                            userRole: <PowerSelector value={userLevels[user]} disabled={true} />,
                         }) }
-                    </ul>
-                </div>;
-        } else {
-            userLevelsSection = <div>{ _t('No users have specific privileges in this room') }.</div>;
+                    </li>);
+                } else if (userLevels[user] < defaultUserLevel) { // muted
+                    mutedUsers.push(<li className="mx_RoomSettings_userLevel" key={user}>
+                        { _t("%(user)s is a %(userRole)s", {
+                            user: user,
+                            userRole: <PowerSelector value={userLevels[user]} disabled={true} />,
+                        }) }
+                    </li>);
+                }
+            });
+
+            privilegedUsers.sort((a, b) => userLevels[b.key] - userLevels[a.key]);
+            mutedUsers.sort((a, b) => userLevels[a.key] - userLevels[b.key]);
+
+            if (privilegedUsers.length) {
+                privilegedUsersSection =
+                    <div>
+                        <h3>{ _t('Privileged Users') }</h3>
+                        <ul className="mx_RoomSettings_userLevels">
+                            { privilegedUsers }
+                        </ul>
+                    </div>;
+            }
+            if (mutedUsers.length) {
+                mutedUsersSection =
+                    <div>
+                        <h3>{ _t('Muted Users') }</h3>
+                        <ul className="mx_RoomSettings_userLevels">
+                            { mutedUsers }
+                        </ul>
+                    </div>;
+            }
         }
 
         const banned = this.props.room.getMembersWithMembership("ban");
@@ -979,8 +1004,8 @@ module.exports = React.createClass({
                     { unfederatableSection }
                 </div>
 
-                { userLevelsSection }
-
+                { privilegedUsersSection }
+                { mutedUsersSection }
                 { bannedUsersSection }
 
                 <h3>{ _t('Advanced') }</h3>