Use PowerLevelSelector to render privileged and muted users in `Rol…

…esRoomSettingsTab`

src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx

@@ -18,7 +18,6 @@ import React from "react";
 import { EventType, RoomMember, RoomState, RoomStateEvent, Room, IContent } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 import { throttle, get } from "lodash";
-import { compare } from "matrix-js-sdk/src/utils";
 
 import { _t, _td, TranslationKey } from "../../../../../languageHandler";
 import AccessibleButton from "../../../elements/AccessibleButton";
@@ -34,6 +33,7 @@ import { AddPrivilegedUsers } from "../../AddPrivilegedUsers";
 import SettingsTab from "../SettingsTab";
 import { SettingsSection } from "../../shared/SettingsSection";
 import MatrixClientContext from "../../../../../contexts/MatrixClientContext";
+import { PowerLevelSelector } from "../../PowerLevelSelector";
 
 interface IEventShowOpts {
     isState?: boolean;
@@ -352,65 +352,29 @@ export default class RolesRoomSettingsTab extends React.Component<IProps> {
         let privilegedUsersSection = <div>{_t("room_settings|permissions|no_privileged_users")}</div>;
         let mutedUsersSection;
         if (Object.keys(userLevels).length) {
-            const privilegedUsers: JSX.Element[] = [];
-            const mutedUsers: JSX.Element[] = [];
-
-            Object.keys(userLevels).forEach((user) => {
-                if (!Number.isInteger(userLevels[user])) return;
-                const isMe = user === client.getUserId();
-                const canChange = canChangeLevels && (userLevels[user] < currentUserLevel || isMe);
-                if (userLevels[user] > defaultUserLevel) {
-                    // privileged
-                    privilegedUsers.push(
-                        <PowerSelector
-                            value={userLevels[user]}
-                            disabled={!canChange}
-                            label={user}
-                            key={user}
-                            powerLevelKey={user} // Will be sent as the second parameter to `onChange`
-                            onChange={this.onUserPowerLevelChanged}
-                        />,
-                    );
-                } else if (userLevels[user] < defaultUserLevel) {
-                    // muted
-                    mutedUsers.push(
-                        <PowerSelector
-                            value={userLevels[user]}
-                            disabled={!canChange}
-                            label={user}
-                            key={user}
-                            powerLevelKey={user} // Will be sent as the second parameter to `onChange`
-                            onChange={this.onUserPowerLevelChanged}
-                        />,
-                    );
-                }
-            });
+            privilegedUsersSection = (
+                <PowerLevelSelector
+                    title={_t("room_settings|permissions|privileged_users_section")}
+                    userLevels={userLevels}
+                    canChangeLevels={canChangeLevels}
+                    currentUserLevel={currentUserLevel}
+                    onClick={this.onUserPowerLevelChanged}
+                    filter={(user) => userLevels[user] > defaultUserLevel}
+                >
+                    <div>{_t("room_settings|permissions|no_privileged_users")}</div>
+                </PowerLevelSelector>
+            );
 
-            // comparator for sorting PL users lexicographically on PL descending, MXID ascending. (case-insensitive)
-            const comparator = (a: JSX.Element, b: JSX.Element): number => {
-                const aKey = a.key as string;
-                const bKey = b.key as string;
-                const plDiff = userLevels[bKey] - userLevels[aKey];
-                return plDiff !== 0 ? plDiff : compare(aKey.toLocaleLowerCase(), bKey.toLocaleLowerCase());
-            };
-
-            privilegedUsers.sort(comparator);
-            mutedUsers.sort(comparator);
-
-            if (privilegedUsers.length) {
-                privilegedUsersSection = (
-                    <SettingsFieldset legend={_t("room_settings|permissions|privileged_users_section")}>
-                        {privilegedUsers}
-                    </SettingsFieldset>
-                );
-            }
-            if (mutedUsers.length) {
-                mutedUsersSection = (
-                    <SettingsFieldset legend={_t("room_settings|permissions|muted_users_section")}>
-                        {mutedUsers}
-                    </SettingsFieldset>
-                );
-            }
+            mutedUsersSection = (
+                <PowerLevelSelector
+                    title={_t("room_settings|permissions|muted_users_section")}
+                    userLevels={userLevels}
+                    canChangeLevels={canChangeLevels}
+                    currentUserLevel={currentUserLevel}
+                    onClick={this.onUserPowerLevelChanged}
+                    filter={(user) => userLevels[user] < defaultUserLevel}
+                />
+            );
         }
 
         const banned = room.getMembersWithMembership("ban");