Merge branch 'feature/bugs-message_positioning' of stefan.stamenovic/WebAPISignalRChat into development

Backend/Diligent.WebAPI.Host/Hubs/ChatHub.cs

@@ -59,7 +59,7 @@ namespace Diligent.WebAPI.Host.Hubs
             {
                 await Groups.AddToGroupAsync(Context.ConnectionId, userConnection.RoomId);
                 _connections[Context.ConnectionId] = userConnection;
-                await Clients.Group(userConnection.RoomId).ReceiveMessage(new ChatMessage { UserId = userConnection.UserId, User = userConnection.UserId, RoomId = userConnection.RoomId, Message = $"{userConnection.Username} has joined room", ConnId = Context.ConnectionId });
+                await Clients.Group(userConnection.RoomId).ReceiveMessage(new ChatMessage { UserId = userConnection.UserId, User = userConnection.UserId, RoomId = userConnection.RoomId, Message = $"{userConnection.Username} has joined room", ConnId = Context.ConnectionId,IsAccessMessage = true });
             }
             else
             {
@@ -75,7 +75,7 @@ namespace Diligent.WebAPI.Host.Hubs
             {
                 // Find user connection in connections dictionary and delete it
                 _connections.Remove(Context.ConnectionId);
-                await Clients.OthersInGroup(room.RoomId).ReceiveMessage(new ChatMessage { UserId = room.UserId, User = room.UserId, Message = $"{room.Username} has left room", RoomId = room.RoomId });
+                await Clients.OthersInGroup(room.RoomId).ReceiveMessage(new ChatMessage { UserId = room.UserId, User = room.UserId, Message = $"{room.Username} has left room", RoomId = room.RoomId,IsAccessMessage = true });
                 await _mediator.Send(new RemoveUserFromGroupCommand(room.RoomId, room.UserId));
             }
         }

Backend/Diligent.WebAPI.Host/Hubs/ChatMessage.cs

@@ -7,7 +7,7 @@
         public string Message { get; set; }
         public DateTime Created { get; set; } = DateTime.Now;
         public Attachment? Attachment { get; set; }
-
+        public bool IsAccessMessage { get; set; } = false;
         // Context.ConnectionId generated by SignalR
         public string ConnId { get; set; }
         public string RoomId { get; set; }

Frontend/src/components/ChatList.js

@@ -53,7 +53,7 @@ const ChatList = () => {
       ? dispatch(fetchSupportRoomsAsync(user.id))
       : user !== null && dispatch(fetchChatRoomsAsync(user.id));
     dispatch(fetchRequestsAsync());
-  }, [dispatch, user]);
+  }, [dispatch]);
 
   useEffect(() => {
     if (requests && rooms) {
@@ -93,6 +93,7 @@ const ChatList = () => {
           dispatch(
             chatActions.saveContextId({ connId: data.connId, userId: user.id })
           );
+          console.log("Join room",data)
           setChatMessage(data);
         }
       });
@@ -138,10 +139,11 @@ const ChatList = () => {
             chatActions.saveContextId({ connId: data.connId, userId: user.id })
           );
         }
+        console.log("Send group message",data)
         setChatMessage(data);
       });
     }
-  }, [myConnection, dispatch, user]);
+  }, [myConnection, dispatch]);
 
   // Maybe don't work
   useEffect(() => {
@@ -152,13 +154,14 @@ const ChatList = () => {
           createdAtUtc: new Date(),
           deletedAtUtc: null,
           id: null,
-          senderId: user.id,
+          senderId: chatMessage.userId,
           updatedAtUtc: null,
           username: user.username,
+          isAccessMessage: chatMessage.isAccessMessage
         })
       );
     }
-  }, [chatMessage, dispatch, user, activeRoom]);
+  }, [chatMessage, dispatch]);
 
   // Maybe don't work
   useEffect(() => {
@@ -171,7 +174,7 @@ const ChatList = () => {
       }
     }
     setNotificationRoom(null);
-  }, [notificationRoom, activeRoom, dispatch, user]);
+  }, [notificationRoom, dispatch]);
 
   const openModal = (n) => {
     setShowModal(true);

Frontend/src/components/ChatWindow.js

@@ -85,16 +85,19 @@ const ChatWindow = ({ room }) => {
 
       <div className="messages p-3 border d-flex flex-column-reverse">
         {/* mapirane poruke */}
-        {messages
+        {user && messages
           .map((n, index) => (
             <div
               key={index}
               className={
-                n.senderId === user.id
+                n.isAccessMessage === true ? 
+                "d-flex flex-column align-items-center" :
+                (n.senderId === user.id
                   ? "d-flex flex-column align-items-end"
-                  : "d-flex flex-column align-items-start"
+                  : "d-flex flex-column align-items-start")
               }
             >
+              {console.log("Message",n,"User id",user.id)}
               <p
                 className={`p-2 px-4 mb-0 rounded message ${
                   n.senderId !== user.id
@@ -102,7 +105,6 @@ const ChatWindow = ({ room }) => {
                     : "bg-light text-dark"
                 }`}
               >
-                {/* {n.message} */}
                 {n.content}
               </p>
               <p className="text-muted small m-0 p-0 mb-4">
@@ -115,7 +117,7 @@ const ChatWindow = ({ room }) => {
                 ) : (
                   ""
                 )}
-                {n.username}
+                {n.isAccessMessage !== true && n.username}
               </p>
             </div>
           ))