Only sort users initially and when clicking column, instead of every render

survey-frontend/src/UserManagementComponent.tsx

@@ -55,9 +55,9 @@ const defaultSortFunction = (a, b) => {
     } else if (!a.permissions.active && b.permissions.active) {
         return 1;
     } else if (a.permissions.active && b.permissions.active) {
-        if (a.role === 'admin' && b.role === 'user') {
+        if (a.role === 'admin' && b.role !== 'admin') {
             return 1;
-        } else if (a.role === 'user' && b.role === 'admin') {
+        } else if (a.role !== 'admin' && b.role === 'admin') {
             return -1;
         } else {
             return a.name.localeCompare(b.name)
@@ -73,10 +73,12 @@ function UserManagementComponent() {
     const [nrens, setNrens] = useState<Nren[]>([]);
     const { user: loggedInUser } = useContext(userContext);
     const [sortFunc, setSortFunc] = useState({ idx: -1, func: defaultSortFunction, asc: true });
+    const [sortedUsers, setSortedUsers] = useState<User[]>([]);
 
     useEffect(() => {
         fetchUsers().then((userList) => {
             setUsers(userList);
+            setSortedUsers(userList.sort(sortFunc.func))
         });
 
         fetchNrens().then((nrenList) => {
@@ -112,8 +114,6 @@ function UserManagementComponent() {
         })?.id
     }
 
-    const sortedUsers = users.sort(sortFunc.func);
-
     const setSort = (index) => {
         if (index === sortFunc.idx || ((index === 5 || index === 0) && sortFunc.idx === -1)) {
             // reverse sort
@@ -182,6 +182,8 @@ function UserManagementComponent() {
         } else {
             setSortFunc({ idx: index, asc: true, func: defaultSortFunction })
         }
+
+        setSortedUsers(users.sort(sortFunc.func))
     }
 
     // build the aria-sort attribute for each column with spreadable objects..
@@ -229,6 +231,7 @@ function UserManagementComponent() {
                                             onChange={(event) => handleInputChange(event, user)}>
                                         <option value="admin">Admin</option>
                                         <option value="user">User</option>
+                                        <option value="observer">Observer</option>
                                     </select>}
                                 </td>