show user avatar in group tasks

src/Components/SideMenu/index.js

@@ -94,11 +94,8 @@ export default function SideMenu({ setUserSession }) {
                 label: " " + webSocketContext.User.Username,
                 icon: (
                   <MyAvatar
-                    avatar={
-                      webSocketContext.AllUsers.find(
-                        (user) => user.Id === webSocketContext.User.Id
-                      )?.Avatar
-                    }
+                    allUsers={webSocketContext.AllUsers}
+                    userId={webSocketContext.User.Id}
                   />
                 ),
                 key: "/user-profile",

src/Pages/GroupTasks/GroupTasksTableList.js

@@ -5,16 +5,22 @@ import {
   Constants,
   FormatDatetime,
   GetDuration,
+  MyAvatar,
   SentMessagesCommands,
   WebSocketContext,
 } from "../../utils";
 import { useContext } from "react";
 
 const columns = [
-  {
+  /*{
     title: "ID",
     dataIndex: "id",
     key: "id",
+  },*/
+  {
+    title: "Creator",
+    dataIndex: "creator",
+    key: "creator",
   },
   {
     title: "Group Name",
@@ -52,7 +58,7 @@ const columns = [
     key: "action",
     render: (_, record) => (
       <Space size="middle">
-        <Link to={Constants.ROUTE_PATHS.GROUP_TASKS_VIEW + record.id}>
+        <Link to={Constants.ROUTE_PATHS.GROUP_TASKS_VIEW + record.key}>
           View
         </Link>
       </Space>
@@ -91,9 +97,18 @@ export default function GroupTaskTableList({
 
     groupTasks.forEach((groupTask) => {
       if (groupTask.Category === categoryGroup.category) {
+        const user = webSocketContext.AllUsers.find(
+          (user) => user.Id === groupTask.CreatorUserId
+        );
+
         items.push({
           key: groupTask.Id,
-          id: groupTask.Id,
+          //id: groupTask.Id,
+          creator: (
+            <>
+              <MyAvatar avatar={user?.Avatar} /> {user?.Username}
+            </>
+          ),
           groupName: groupTask.GroupName,
           step: `${groupTask.CurrentTasksStep} / ${groupTask.NumberOfSteps}`,
           status: getStatusBadge(groupTask.Status),

src/Pages/GroupTasks/GroupTasksViewModal.js

@@ -7,7 +7,6 @@ import {
   Modal,
   Popover,
   Result,
-  Space,
   Steps,
   Tag,
   notification,
@@ -20,6 +19,7 @@ import {
   WebSocketContext,
   SentMessagesCommands,
   GetDuration,
+  MyAvatar,
 } from "../../utils";
 import { InfoCircleOutlined } from "@ant-design/icons";
 
@@ -280,10 +280,26 @@ export default function GroupTasksViewModal({ isOpen }) {
                     verticalAlign: "middle",
                   }}
                 />
-              </Popover>
+              </Popover>{" "}
+              {groupTaskSteps[index]?.CreatorUserId !== undefined && (
+                <MyAvatar
+                  tooltip
+                  allUsers={webSocketContext.AllUsers}
+                  userId={groupTaskSteps[index].CreatorUserId}
+                />
+              )}
             </>
           ) : (
-            <>{groupTask.name}</>
+            <>
+              {groupTask.name}{" "}
+              {groupTaskSteps[index]?.CreatorUserId !== undefined && (
+                <MyAvatar
+                  tooltip
+                  allUsers={webSocketContext.AllUsers}
+                  userId={groupTaskSteps[index].CreatorUserId}
+                />
+              )}
+            </>
           ),
         status:
           groupTaskSteps[index] !== undefined
@@ -454,6 +470,11 @@ export default function GroupTasksViewModal({ isOpen }) {
                     }}
                   />
                 </Popover>{" "}
+                <MyAvatar
+                  tooltip
+                  allUsers={webSocketContext.AllUsers}
+                  userId={currentGroupTask.CreatorUserId}
+                />
               </h1>
 
               <Steps direction="vertical" items={stepsItemHandler()} />

src/Pages/UserProfile/index.js

@@ -110,12 +110,9 @@ export default function UserProfile() {
           }}
         >
           <MyAvatar
-            avatar={
-              webSocketContext.AllUsers.find(
-                (user) => user.Id === webSocketContext.User.Id
-              )?.Avatar
-            }
             avatarWidth={200}
+            allUsers={webSocketContext.AllUsers}
+            userId={webSocketContext.User.Id}
           />
         </Upload>
 

src/utils.js

@@ -1,5 +1,5 @@
 import { UserOutlined } from "@ant-design/icons";
-import { Avatar, Badge } from "antd";
+import { Avatar, Badge, Tooltip } from "antd";
 import { createContext, useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
@@ -361,13 +361,49 @@ export function getConnectionStatusItem(connectionStatus) {
   );
 }
 
-export function MyAvatar({ avatarWidth, avatar }) {
-  return avatar !== undefined && avatar !== "" ? (
+export function MyAvatar({
+  avatarWidth,
+  avatar,
+  tooltip,
+  tooltipTitle,
+  allUsers,
+  userId,
+}) {
+  const MyDefaultAvatar = () => {
+    return <Avatar size={avatarWidth} icon={<UserOutlined />} />;
+  };
+
+  if (avatar === undefined || avatar === null) {
+    if (allUsers !== undefined && userId !== undefined) {
+      const user = allUsers.find((u) => u.Id === userId);
+
+      if (user === undefined) return <MyDefaultAvatar />;
+
+      avatar = user.Avatar;
+      tooltipTitle = user.Username;
+    } else {
+      return <MyDefaultAvatar />;
+    }
+  }
+
+  const MyAvat = () => {
+    return (
       <Avatar
         size={avatarWidth}
         src={Constants.STATIC_CONTENT_ADDRESS + "avatars/" + avatar}
       />
-  ) : (
-    <Avatar size={avatarWidth} icon={<UserOutlined />} />
     );
+  };
+
+  if (tooltip) {
+    return (
+      <Tooltip placement="top" trigger="hover" title={tooltipTitle}>
+        <>
+          <MyAvat />
+        </>
+      </Tooltip>
+    );
+  }
+
+  return <MyAvat />;
 }