fixed updating users on roles and users

src/Contexts/UsersContext.js

@@ -15,6 +15,8 @@ export function UsersProvider({ children }) {
   const [users, setUsers] = useState([]);
   const [roles, setRoles] = useState([]);
 
+  console.log("usersProvider", users, roles);
+
   return (
     <UsersContext.Provider
       value={{

src/Handlers/WebSocketMessageHandler.js

@@ -479,9 +479,39 @@ export function handleWebSocketMessage(
         ...arr,
         { RoleId: body.Id, Permissions: [] },
       ]);
+
+      usersContext.setRoles((arr) => [...arr, body]);
       break;
     case ReceivedMessagesCommands.AdminAreaRoleUpdated:
       adminAreaRolesContext.setRoles((arr) => {
+        return arr.map((role) => {
+          if (role.Id === body.RoleId) {
+            if (body.Changes.DisplayName !== undefined) {
+              role.DisplayName = body.Changes.DisplayName;
+            }
+            if (body.Changes.Description !== undefined) {
+              role.Description = body.Changes.Description;
+            }
+          }
+          return role;
+        });
+      });
+
+      usersContext.setRoles((arr) => {
+        return arr.map((role) => {
+          if (role.Id === body.RoleId) {
+            if (body.Changes.DisplayName !== undefined) {
+              role.DisplayName = body.Changes.DisplayName;
+            }
+            if (body.Changes.Description !== undefined) {
+              role.Description = body.Changes.Description;
+            }
+          }
+          return role;
+        });
+      });
+
+      /*adminAreaRolesContext.setRoles((arr) => {
         const newArr = [...arr];
 
         const arrIndex = arr.findIndex((arr1) => arr1.Id === body.RoleId);
@@ -497,7 +527,7 @@ export function handleWebSocketMessage(
         }
 
         return newArr;
-      });
+      }); */
 
       if (
         body.Changes.AddedPermissions !== undefined ||
@@ -549,6 +579,42 @@ export function handleWebSocketMessage(
     case ReceivedMessagesCommands.AdminAreaUpdateRoleSortingOrder:
       adminAreaRolesContext.setRoles((arr) => {
         const newArr = [...arr];
+        const updatedRoleIndex = newArr.findIndex(
+          (role) => role.Id === body.RoleId
+        );
+
+        if (updatedRoleIndex === -1) return newArr;
+
+        const { SortingOrder } = newArr[updatedRoleIndex];
+        const { Direction } = body;
+
+        newArr[updatedRoleIndex].SortingOrder += Direction === 0 ? -1 : 1;
+
+        const newSortingOrder = newArr[updatedRoleIndex].SortingOrder;
+
+        newArr.forEach((role) => {
+          if (role.Id !== newArr[updatedRoleIndex].Id) {
+            if (role.SortingOrder === newSortingOrder) {
+              role.SortingOrder = SortingOrder;
+            } else if (
+              role.SortingOrder < SortingOrder &&
+              role.SortingOrder >= newSortingOrder
+            ) {
+              role.SortingOrder += 1;
+            } else if (
+              role.SortingOrder > SortingOrder &&
+              role.SortingOrder <= newSortingOrder
+            ) {
+              role.SortingOrder -= 1;
+            }
+          }
+        });
+
+        newArr.sort((a, b) => a.SortingOrder - b.SortingOrder);
+
+        return newArr;
+
+        /*  const newArr = [...arr];
 
         const updatedRoleIndex = newArr.findIndex(
           (role) => role.Id === body.RoleId
@@ -588,8 +654,47 @@ export function handleWebSocketMessage(
 
         newArr.sort((a, b) => a.SortingOrder - b.SortingOrder);
 
+        return newArr; */
+      });
+
+      usersContext.setRoles((arr) => {
+        const newArr = [...arr];
+        const updatedRoleIndex = newArr.findIndex(
+          (role) => role.Id === body.RoleId
+        );
+
+        if (updatedRoleIndex === -1) return newArr;
+
+        const { SortingOrder } = newArr[updatedRoleIndex];
+        const { Direction } = body;
+
+        newArr[updatedRoleIndex].SortingOrder += Direction === 0 ? -1 : 1;
+
+        const newSortingOrder = newArr[updatedRoleIndex].SortingOrder;
+
+        newArr.forEach((role) => {
+          if (role.Id !== newArr[updatedRoleIndex].Id) {
+            if (role.SortingOrder === newSortingOrder) {
+              role.SortingOrder = SortingOrder;
+            } else if (
+              role.SortingOrder < SortingOrder &&
+              role.SortingOrder >= newSortingOrder
+            ) {
+              role.SortingOrder += 1;
+            } else if (
+              role.SortingOrder > SortingOrder &&
+              role.SortingOrder <= newSortingOrder
+            ) {
+              role.SortingOrder -= 1;
+            }
+          }
+        });
+
+        newArr.sort((a, b) => a.SortingOrder - b.SortingOrder);
+
         return newArr;
       });
+
       break;
     case ReceivedMessagesCommands.AdminAreaRoleDeleted:
       adminAreaRolesContext.setRoles((arr) => {
@@ -717,6 +822,14 @@ export function handleWebSocketMessage(
           Avatar: "",
         },
       ]);
+
+      adminAreaRolesContext.setUsers((arr) => [
+        ...arr,
+        {
+          Id: body.Id,
+          RoleId: body.RoleId,
+        },
+      ]);
       break;
     case ReceivedMessagesCommands.AllUsersUserDeleted:
       usersContext.setUsers((arr) => {
@@ -727,6 +840,14 @@ export function handleWebSocketMessage(
         return newArr;
       });
 
+      adminAreaRolesContext.setUsers((arr) => {
+        let newArr = [...arr];
+
+        newArr = newArr.filter((user) => user.Id !== body.UserId);
+
+        return newArr;
+      });
+
       appContext.setUsers((arr) => {
         let newArr = [...arr];
 
@@ -734,19 +855,6 @@ export function handleWebSocketMessage(
 
         return newArr;
       });
-
-      /*
-      if (body.ScannerId !== "") {
-        setScanners((arr) => {
-          let newArr = [...arr];
-
-          newArr[
-            newArr.findIndex((scanner) => scanner.Id === body.ScannerId)
-          ].UsedByUserId = "";
-
-          return newArr;
-        });
-      } */
       break;
     case ReceivedMessagesCommands.AllUsersUserDeactivation:
       usersContext.setUsers((arr) => {

src/Pages/AdminArea/Roles/index.js

@@ -373,9 +373,9 @@ function Role({
           <MyAvatar
             key={user.Id}
             avatarWidth={26}
-            avatar={userInAppContext.Avatar}
+            avatar={userInAppContext?.Avatar}
             tooltip
-            tooltipTitle={userInAppContext.Username}
+            tooltipTitle={userInAppContext?.Username}
           />
         );
       });

src/Pages/AllUsers/CreateUserModal.js

@@ -119,7 +119,9 @@ export default function CreateUserModal({ isModalOpen, setIsModalOpen }) {
             onChange={(e) => setSelectedRoleId(e)}
             placeholder={t("allUsers.createUserModal.form.role.placeholder")}
           >
-            {usersContext.roles.map((role) => (
+            {usersContext.roles
+              .sort((a, b) => a.SortingOrder - b.SortingOrder)
+              .map((role) => (
                 <Select.Option key={role.Id}>{role.DisplayName}</Select.Option>
               ))}
           </Select>