Fix user status in chat

bigbluebutton-html5/imports/ui/components/chat/time-window-list/time-window-chat-item/component.jsx

@@ -63,6 +63,11 @@ class TimeWindowChatItem extends PureComponent {
     ChatLogger.debug('TimeWindowChatItem::componentWillMount::state', { ...this.state });
   }
 
+  componentWillUnmount() {
+    ChatLogger.debug('TimeWindowChatItem::componentWillUnmount::props', { ...this.props });
+    ChatLogger.debug('TimeWindowChatItem::componentWillUnmount::state', { ...this.state });
+  }
+
   renderSystemMessage() {
     const {
       messages,
@@ -106,6 +111,11 @@ class TimeWindowChatItem extends PureComponent {
       dispatch,
       chatId,
       read,
+      name,
+      color,
+      isModerator,
+      avatar,
+      isOnline,
     } = this.props;
 
     if (messages && messages[0].text.includes('bbb-published-poll-<br/>')) {
@@ -115,25 +125,25 @@ class TimeWindowChatItem extends PureComponent {
     const dateTime = new Date(time);
     const regEx = /<a[^>]+>/i;
     ChatLogger.debug('TimeWindowChatItem::renderMessageItem', this.props);
-    const defaultAvatarString = user?.name?.toLowerCase().slice(0, 2) || "  ";
+    const defaultAvatarString = name?.toLowerCase().slice(0, 2) || "  ";
     return (
       <div className={styles.item} key={`time-window-${messageKey}`}>
         <div className={styles.wrapper}>
           <div className={styles.avatarWrapper}>
             <UserAvatar
               className={styles.avatar}
-              color={user.color}
-              moderator={user.isModerator}
-              avatar={user.avatar}
+              color={color}
+              moderator={isModerator}
+              avatar={avatar}
             >
               {defaultAvatarString}
             </UserAvatar>
           </div>
           <div className={styles.content}>
             <div className={styles.meta}>
-              <div className={user.isOnline ? styles.name : styles.logout}>
-                <span>{user.name}</span>
-                {user.isOnline
+              <div className={isOnline ? styles.name : styles.logout}>
+                <span>{name}</span>
+                {isOnline
                   ? null
                   : (
                     <span className={styles.offline}>

bigbluebutton-html5/imports/ui/components/chat/time-window-list/time-window-chat-item/container.jsx

@@ -1,11 +1,13 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, useContext } from 'react';
 import { withTracker } from 'meteor/react-meteor-data';
 import TimeWindowChatItem from './component';
+import { UsersContext } from '/imports/ui/components/components-data/users-context/context';
 import ChatLogger from '/imports/ui/components/chat/chat-logger/ChatLogger';
 import ChatService from '../../service';
 
 const CHAT_CONFIG = Meteor.settings.public.chat;
 const SYSTEM_CHAT_TYPE = CHAT_CONFIG.type_system;
+const ROLE_MODERATOR = Meteor.settings.public.user.role_moderator;
 
 const isDefaultPoll = (pollText) => {
   const pollValue = pollText.replace(/<br\/>|[ :|%\n\d+]/g, '');
@@ -17,31 +19,42 @@ const isDefaultPoll = (pollText) => {
       return false;
   }
 };
-export default class TimeWindowChatItemContainer extends PureComponent {
-  render() {
-    ChatLogger.debug('TimeWindowChatItemContainer::render', { ...this.props });
-    const messages = this.props.message.content;
+export default function TimeWindowChatItemContainer(props) {
+  ChatLogger.debug('TimeWindowChatItemContainer::render', { ...props });
+  const { message, messageId } = props;
+  const usingUsersContext = useContext(UsersContext);
+  const  { users } = usingUsersContext;
+  const {
+    sender,
+    key,
+    time,
+    content,
+    color,
+  } = message;
 
-    const user = this.props.message.sender;
-    const messageKey = this.props.message.key;
-    const time = this.props.message.time;
-
-    return (
-      <TimeWindowChatItem
-        {
-        ...{
-          read: this.props.message.read,
-          messages,
-          isDefaultPoll,
-          user,
-          time,
-          systemMessage: this.props.messageId.startsWith(SYSTEM_CHAT_TYPE) || !user,
-          messageKey,
-          handleReadMessage: ChatService.updateUnreadMessage,
-          ...this.props,
-        }
-        }
-      />
-    );
-  }
+  const messages = content;
+  const user = users[sender?.id];
+  const messageKey = key;
+  return (
+    <TimeWindowChatItem
+      {
+      ...{
+        color: user?.color || color,
+        isModerator: user?.role === ROLE_MODERATOR,
+        isOnline: !!user,
+        avatar: user?.avatar,
+        name: user?.name || sender?.name,
+        read: message.read,
+        messages,
+        isDefaultPoll,
+        user,
+        time,
+        systemMessage: messageId.startsWith(SYSTEM_CHAT_TYPE) || !sender,
+        messageKey,
+        handleReadMessage: ChatService.updateUnreadMessage,
+        ...props,
+      }
+      }
+    />
+  );
 }

bigbluebutton-html5/imports/ui/components/components-data/chat-context/adapter.jsx

@@ -34,7 +34,6 @@ const Adapter = () => {
         if (parsedMsg.msg === 'added') {
           messageQueue.push({
             msg: parsedMsg.fields,
-            senderData: usersData[parsedMsg.fields.sender.id],
           });
           throttledDispatch();
         }

bigbluebutton-html5/imports/ui/components/components-data/chat-context/context.jsx

@@ -20,7 +20,6 @@ export const ACTIONS = {
   ADDED: 'added',
   CHANGED: 'changed',
   REMOVED: 'removed',
-  USER_STATUS_CHANGED: 'user_status_changed',
   LAST_READ_MESSAGE_TIMESTAMP_CHANGED: 'last_read_message_timestamp_changed',
   INIT: 'initial_structure',
 };
@@ -54,14 +53,6 @@ const generateStateWithNewMessage = ({ msg, senderData }, state) => {
       _id,
       ...restMsg
     } = msg;
-    const senderInfo = {
-      id: senderData?.userId || msg.sender.id,
-      avatar: senderData?.avatar,
-      color: senderData?.color ,
-      isModerator: senderData?.role === ROLE_MODERATOR, // TODO: get isModerator from message
-      name: senderData?.name || msg.sender.name,
-      isOnline: !!senderData,
-    };
 
     const indexValue = chatIndex ? (chatIndex + 1) : 1;
     const messageKey = key + '-' + indexValue;
@@ -74,7 +65,6 @@ const generateStateWithNewMessage = ({ msg, senderData }, state) => {
         content: [
           { id: msg.id, name: msg.sender.name, text: msg.message, time: msg.timestamp },
         ],
-        sender: senderInfo,
       }
     };
 
@@ -211,37 +201,6 @@ const reducer = (state, action) => {
       }
       return state;
     }
-    case ACTIONS.USER_STATUS_CHANGED: {
-      ChatLogger.debug(ACTIONS.USER_STATUS_CHANGED);
-      const newState = {
-        ...state,
-      };
-      const affectedChats = [];
-      // select all groups of users
-      Object.keys(newState).forEach(chatId => {
-        const affectedGroups = Object.keys(newState[chatId])
-          .filter(groupId => groupId.startsWith(action.value.userId));
-        if (affectedGroups.length) {
-          affectedChats[chatId] = affectedGroups;
-        }
-      });
-
-      //Apply change to new state
-      Object.keys(affectedChats).forEach((chatId) => {
-        // force new reference
-        newState[chatId] = {
-          ...newState[chatId]
-        };
-        //Apply change
-        affectedChats[chatId].forEach(groupId => {
-          newState[chatId][groupId] = {
-            ...newState[chatId][groupId] //TODO: sort by time (for incromental loading)
-          };
-          newState[chatId][groupId].status = action.value.status;
-        });
-      });
-      return newState
-    }
     case ACTIONS.LAST_READ_MESSAGE_TIMESTAMP_CHANGED: {
       ChatLogger.debug(ACTIONS.LAST_READ_MESSAGE_TIMESTAMP_CHANGED);
       const { timestamp, chatId } = action.value;

bigbluebutton-html5/imports/ui/components/components-data/users-context/adapter.jsx

@@ -1,11 +1,16 @@
 import { useContext, useEffect } from 'react';
 import Users from '/imports/api/users';
 import { UsersContext, ACTIONS } from './context';
+import { ChatContext, ACTIONS as CHAT_ACTIONS } from '../chat-context/context';
 import ChatLogger from '/imports/ui/components/chat/chat-logger/ChatLogger';
 
 const Adapter = () => {
   const usingUsersContext = useContext(UsersContext);
   const { dispatch } = usingUsersContext;
+
+  const usingChatContext = useContext(ChatContext);
+  const { dispatch: chatDispatch } = usingChatContext;
+
   useEffect(() => {
     const usersCursor = Users.find({}, { sort: { timestamp: 1 } });
     usersCursor.observe({