refactor and sort

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

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 =
+            const privilegedUsers = [];
-                <div>
+            const mutedUsers = [];
-                    <h3>{ _t('Privileged Users') }</h3>
+
-                    <ul className="mx_RoomSettings_userLevels">
+            Object.keys(userLevels).forEach(function(user) {
-                        { Object.keys(userLevels).map(function(user, i) {
+                if (userLevels[user] > defaultUserLevel) { // privileged
-                            return (
+                    privilegedUsers.push(<li className="mx_RoomSettings_userLevel" key={user}>
-                                <li className="mx_RoomSettings_userLevel" key={user}>
+                        { _t("%(user)s is a %(userRole)s", {
-                                    { _t("%(user)s is a %(userRole)s", {
+                            user: user,
-                                        user: user,
+                            userRole: <PowerSelector value={userLevels[user]} disabled={true} />,
-                                        userRole: <PowerSelector value={userLevels[user]} disabled={true} />,
-                                    }) }
-                                </li>
-                            );
                         }) }
-                    </ul>
+                    </li>);
-                </div>;
+                } else if (userLevels[user] < defaultUserLevel) { // muted
-        } else {
+                    mutedUsers.push(<li className="mx_RoomSettings_userLevel" key={user}>
-            userLevelsSection = <div>{ _t('No users have specific privileges in this room') }.</div>;
+                        { _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>