update appContext on user change to live change username and avatar for all users

src/Components/MyAvatar/index.js

@@ -10,53 +10,32 @@ export function MyAvatar({
   allUsers,
   userId,
 }) {
-  const MyDefaultAvatar = () => {
+  if (!avatar) {
-    if (tooltip) {
+    if (allUsers && userId) {
-      return (
-        <Tooltip placement="top" trigger="hover" title={tooltipTitle}>
-          <Avatar size={avatarWidth} icon={<UserOutlined />} />
-        </Tooltip>
-      );
-    }
-
-    return <Avatar size={avatarWidth} icon={<UserOutlined />} />;
-  };
-
-  if (avatar === undefined || avatar === null || avatar === "") {
-    if (allUsers !== undefined && userId !== undefined) {
       const user = allUsers.find((u) => u.Id === userId);
-
+      if (user) {
-      if (user === undefined) return <MyDefaultAvatar />;
+        avatar = user.Avatar;
-
+        tooltipTitle = user.Username;
-      avatar = user.Avatar;
+      }
-      tooltipTitle = user.Username;
-    } else {
-      return <MyDefaultAvatar />;
     }
   }
 
-  const MyAvat = () => {
+  const avatarContent = avatar ? (
-    if (avatar === "") return <MyDefaultAvatar />;
+    <Avatar
+      size={avatarWidth}
+      src={Constants.STATIC_CONTENT_ADDRESS + "avatars/" + avatar}
+    />
+  ) : (
+    <Avatar size={avatarWidth} icon={<UserOutlined />} />
+  );
 
-    return (
+  return tooltip ? (
-      <Avatar
+    <Tooltip placement="top" trigger="hover" title={tooltipTitle}>
-        size={avatarWidth}
+      {avatarContent}
-        src={Constants.STATIC_CONTENT_ADDRESS + "avatars/" + avatar}
+    </Tooltip>
-      />
+  ) : (
-    );
+    avatarContent
-  };
+  );
-
-  if (tooltip) {
-    return (
-      <Tooltip placement="top" trigger="hover" title={tooltipTitle}>
-        <>
-          <MyAvat />
-        </>
-      </Tooltip>
-    );
-  }
-
-  return <MyAvat />;
 }
 
 export function MyUserAvatar({ avatar, size = "default" }) {

src/Contexts/AdminAreaRolesContext.js

@@ -12,6 +12,7 @@ export const useAdminAreaRolesContext = () => useContext(AdminAreaRolesContext);
 export function AdminAreaRolesProvider({ children }) {
   const [roles, setRoles] = useState([]);
   const [rolesPermissions, setRolesPermissions] = useState([]);
+  const [users, setUsers] = useState([]); // { Id, RoleId }
 
   return (
     <AdminAreaRolesContext.Provider
@@ -20,6 +21,8 @@ export function AdminAreaRolesProvider({ children }) {
         setRoles,
         rolesPermissions,
         setRolesPermissions,
+        users,
+        setUsers,
       }}
     >
       {children}

src/Contexts/AppContext.js

@@ -14,7 +14,8 @@ export function AppProvider({ children }) {
   const userId = useRef(""); // used for some conditions in webSocket message handler
 
   const [userPermissions, setUserPermissions] = useState([]);
-  const [users, setUsers] = useState([]); // TODO: realy need this?
+  // used for avatars and the tooltip for the avatar
+  const [users, setUsers] = useState([]); // { Id, Username, Avatar}
 
   return (
     <AppContext.Provider

src/Handlers/WebSocketMessageHandler.js

@@ -204,30 +204,11 @@ export function handleWebSocketMessage(
       });
       break;
     case ReceivedMessagesCommands.UpdateUserSessions:
-      //setUser((arr) => ({ ...arr, Sessions: body }));
-
-      //userProfileContext.setUserProfile((arr) => ({ ...arr, Sessions: body }));
-
       userProfileContext.setSessions(body);
       break;
     case ReceivedMessagesCommands.UpdateAllUsersUserAvatar:
-      /*setAllUsers((arr) => {
-        const newArr = [...arr];
-
-        newArr[arr.findIndex((arr1) => arr1.Id === body.UserId)].Avatar =
-          body.Avatar;
-
-        return newArr;
-      });*/
-
       if (appContext.userId.current === body.UserId) {
         sideBarContext.setAvatar(body.Avatar);
-
-        /*
-        userProfileContext.setUserProfile((user) => ({
-          ...user,
-          avatar: body.Avatar,
-        })); */
       }
 
       usersContext.setUsers((arr) => {
@@ -242,15 +223,17 @@ export function handleWebSocketMessage(
         return newArr;
       });
 
-      /*
       appContext.setUsers((arr) => {
         const newArr = [...arr];
 
-        newArr[arr.findIndex((arr1) => arr1.Id === body.UserId)].Avatar =
+        const arrIndex = arr.findIndex((arr1) => arr1.Id === body.UserId);
-          body.Avatar;
+
+        if (arrIndex !== -1) {
+          newArr[arrIndex].Avatar = body.Avatar;
+        }
 
         return newArr;
-      }); */
+      });
       break;
     /*case ReceivedMessagesCommands.NewScanner:
       setScanners((arr) => [...arr, body]);
@@ -353,8 +336,6 @@ export function handleWebSocketMessage(
             newInputs[body.parameterName].data = body.data;
           }
 
-          //newInputs[body.parameterName].value = body.value;
-
           return newInputs;
         });
       } else {
@@ -472,6 +453,18 @@ export function handleWebSocketMessage(
 
             return newArr;
           });
+
+          appContext.setUsers((arr) => {
+            const newArr = [...arr];
+
+            const arrIndex = arr.findIndex((user) => user.Id === body.UserId);
+
+            if (arrIndex !== -1) {
+              newArr[arrIndex].Username = body.Changes.Username;
+            }
+
+            return newArr;
+          });
         }
 
         if (body.Changes.Email !== undefined) {
@@ -642,19 +635,19 @@ export function handleWebSocketMessage(
         appContext.setUserPermissions(() =>
           body.Permissions === null ? [] : body.Permissions
         );
-
-        /*setUser((user) => {
-          const updatedUser = { ...user };
-
-          if (body.Permissions === null) {
-            updatedUser.Permissions = [];
-          } else {
-            updatedUser.Permissions = body.Permissions;
-          }
-
-          return updatedUser;
-        }); */
       }
+
+      adminAreaRolesContext.setUsers((arr) => {
+        const newArr = [...arr];
+
+        const arrIndex = arr.findIndex((user) => user.Id === body.UserId);
+
+        if (arrIndex !== -1) {
+          newArr[arrIndex].RoleId = body.RoleId;
+        }
+
+        return newArr;
+      });
       break;
     case ReceivedMessagesCommands.RolePermissionsUpdated:
       if (
@@ -715,6 +708,15 @@ export function handleWebSocketMessage(
           Deactivated: body.Deactivated,
         },
       ]);
+
+      appContext.setUsers((arr) => [
+        ...arr,
+        {
+          Id: body.Id,
+          Username: body.Username,
+          Avatar: "",
+        },
+      ]);
       break;
     case ReceivedMessagesCommands.AllUsersUserDeleted:
       usersContext.setUsers((arr) => {
@@ -725,6 +727,14 @@ export function handleWebSocketMessage(
         return newArr;
       });
 
+      appContext.setUsers((arr) => {
+        let newArr = [...arr];
+
+        newArr = newArr.filter((user) => user.Id !== body.UserId);
+
+        return newArr;
+      });
+
       /*
       if (body.ScannerId !== "") {
         setScanners((arr) => {
@@ -752,20 +762,7 @@ export function handleWebSocketMessage(
       });
       break;
     case ReceivedMessagesCommands.NewUserApiKeyCreated:
-      /*userProfileContext.setUserProfile((user) => ({
-        ...user,
-        ApiKeys: [...user.ApiKeys, body],
-      })); */
-
       userProfileContext.setApiKeys((arr) => [...arr, body]);
-
-      /*setUser((user) => {
-        const updatedUser = { ...user };
-
-        updatedUser.ApiKeys.push(body);
-
-        return updatedUser;
-      });*/
       break;
     case ReceivedMessagesCommands.DeletedUserApiKey:
       userProfileContext.setApiKeys((arr) =>

src/Pages/AdminArea/Roles/index.js

@@ -121,6 +121,7 @@ export default function AdminAreaRoles() {
     myFetch("/adminarea/roles", "GET").then((data) => {
       adminAreaRolesContext.setRoles(data.Roles);
       adminAreaRolesContext.setRolesPermissions(data.RolesPermissions);
+      adminAreaRolesContext.setUsers(data.Users);
     });
   }, []);
 
@@ -354,7 +355,9 @@ function Role({
   };
 
   const getUsersInRole = () => {
-    return appContext.users.filter((user) => user.RoleId === role.Id);
+    return adminAreaRolesContext.users.filter(
+      (user) => user.RoleId === role.Id
+    );
   };
 
   const UserAvatarsInRole = () => {
@@ -364,13 +367,15 @@ function Role({
       let avatars = [];
 
       usersInRole.forEach((user) => {
+        const userInAppContext = appContext.users.find((u) => u.Id === user.Id);
+
         avatars.push(
           <MyAvatar
             key={user.Id}
             avatarWidth={26}
-            avatar={user.Avatar}
+            avatar={userInAppContext.Avatar}
             tooltip
-            tooltipTitle={user.Username}
+            tooltipTitle={userInAppContext.Username}
           />
         );
       });

src/index.js

@@ -19,7 +19,7 @@ const Loading = () => {
 // TODO: Undo this
 /* 
 <text x="50%" y="50%" fill="transparent" textAnchor="middle">
-  J A N E X
+  J A N N E X
 </text>
 */