PermissionsViewer: sort roles and users alphabetically by name

Author: Vexify4103

src/plugins/permissionsViewer/components/RolesAndUsersPermissions.tsx

@@ -46,16 +46,28 @@ function getRoleIconSrc(role: Role) {
 function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, header }: { permissions: Array<RoleOrUserPermission>; guild: Guild; modalProps: ModalProps; header: string; }) {
     const guildPermissionSpecMap = useMemo(() => getGuildPermissionSpecMap(guild), [guild.id]);
 
-    useStateFromStores(
+    const memberIds = useStateFromStores(
         [GuildMemberStore],
         () => GuildMemberStore.getMemberIds(guild.id),
         null,
         (old, current) => old.length === current.length
     );
 
-    useEffect(() => {
-        permissions.sort((a, b) => a.type - b.type);
-    }, [permissions]);
+    const sortedPermissions = useMemo(() => {
+        const roles = GuildRoleStore.getRolesSnapshot(guild.id);
+        return [...permissions].sort((a, b) => {
+            if (a.type !== b.type) return a.type - b.type;
+
+            const nameA = a.type === PermissionOverwriteType.MEMBER
+                ? (UserStore.getUser(a.id ?? "") != null ? getUniqueUsername(UserStore.getUser(a.id ?? "")!) : "")
+                : (roles[a.id ?? ""]?.name ?? "");
+            const nameB = b.type === PermissionOverwriteType.MEMBER
+                ? (UserStore.getUser(b.id ?? "") != null ? getUniqueUsername(UserStore.getUser(b.id ?? "")!) : "")
+                : (roles[b.id ?? ""]?.name ?? "");
+
+            return nameA.localeCompare(nameB);
+        });
+    }, [permissions, memberIds]);
 
     useEffect(() => {
         const usersToRequest = permissions
@@ -70,7 +82,7 @@ function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, hea
     }, []);
 
     const [selectedItemIndex, selectItem] = useState(0);
-    const selectedItem = permissions[selectedItemIndex];
+    const selectedItem = sortedPermissions[selectedItemIndex];
 
     const roles = GuildRoleStore.getRolesSnapshot(guild.id);
 
@@ -94,7 +106,7 @@ function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, hea
                 {selectedItem && (
                     <div className={cl("modal-container")}>
                         <ScrollerThin className={cl("modal-list")} orientation="auto">
-                            {permissions.map((permission, index) => {
+                            {sortedPermissions.map((permission, index) => {
                                 const user: User | undefined = UserStore.getUser(permission.id ?? "");
                                 const role: Role | undefined = roles[permission.id ?? ""];
                                 const roleIconSrc = role != null ? getRoleIconSrc(role) : undefined;