sort discord crew members

diff --git a/resources/js/components/discord-bot/GuildCrew.jsx b/resources/js/components/discord-bot/GuildCrew.jsx
index b661306ac0c2f960f42054e2d523121e1d2aaab3..404746e663a8a00e6659ad923ade184727d6668f 100644 (file)
--- a/resources/js/components/discord-bot/GuildCrew.jsx
+++ b/resources/js/components/discord-bot/GuildCrew.jsx
@@ -7,14 +7,40 @@ import UserSelect from '../common/UserSelect';
 import Icon from '../common/Icon';
 import UserBox from '../users/Box';
 import { mayAdminGuild } from '../../helpers/permissions';
+import { compareUsername } from '../../helpers/User';
 import { useUser } from '../../hooks/user';
 
+const sortCrew = (crew) => {
+       const sorted = [...crew];
+       sorted.sort((a, b) => {
+               if (a.role === b.role) {
+                       return compareUsername(a.user, b.user);
+               }
+               if (a.role === 'admin' && b.role !== 'admin') {
+                       return -1;
+               }
+               if (b.role === 'admin' && a.role !== 'admin') {
+                       return 1;
+               }
+               if (['admin', 'manager'].includes(a.role) && !['admin', 'manager'].includes(b.role)) {
+                       return -1;
+               }
+               if (['admin', 'manager'].includes(b.role) && !['admin', 'manager'].includes(a.role)) {
+                       return 1;
+               }
+               return compareUsername(a.user, b.user);
+       });
+       return sorted;
+};
+
 const GuildCrew = ({ addCrew, changeCrewRole, guild, removeCrew }) => {
        const { t } = useTranslation();
        const { user } = useUser();
 
        const mayAdmin = React.useMemo(() => mayAdminGuild(user, guild), [guild, user]);
 
+       const sortedCrew = React.useMemo(() => sortCrew(guild.crew || []), [guild]);
+
        return <div>
                {mayAdmin ?
                        <Form.Group controlId="crew.addCrew">
@@ -27,7 +53,7 @@ const GuildCrew = ({ addCrew, changeCrewRole, guild, removeCrew }) => {
                                />
                        </Form.Group>
                : null}
-               {guild.crew.map((crew) => (
+               {sortedCrew.map((crew) => (
                        <div className="d-flex align-items-center justify-content-between my-2" key={crew.id}>
                                <UserBox user={crew.user} />
                                {mayAdmin ?