resolvedChanges

packages/react/src/components/MessageList/MessageList.js

@@ -7,18 +7,19 @@ import {
   useSearchMessageStore,
   useChannelStore,
   useUserStore,
+  useMentionsStore,
+  useThreadsMessageStore,
 } from '../../store';
 import RoomMembers from '../RoomMembers/RoomMember';
 import MessageReportWindow from '../ReportMessage/MessageReportWindow';
 import isMessageSequential from '../../lib/isMessageSequential';
+import UserMentions from '../UserMentions/UserMentions';
 import SearchMessage from '../SearchMessage/SearchMessage';
 import Roominfo from '../RoomInformation/RoomInformation';
 import AllThreads from '../AllThreads/AllThreads';
 import { Message } from '../Message';
 import { Icon } from '../Icon';
 
-import useThreadsMessageStore from '../../store/threadsMessageStore';
-
 const MessageList = ({ messages }) => {
   const showSearch = useSearchMessageStore((state) => state.showSearch);
   const showChannelinfo = useChannelStore((state) => state.showChannelinfo);
@@ -28,25 +29,29 @@ const MessageList = ({ messages }) => {
   const messageToReport = useMessageStore((state) => state.messageToReport);
   const showAvatar = useUserStore((state) => state.showAvatar);
   const headerTitle = useMessageStore((state) => state.headerTitle);
+  const showMentions = useMentionsStore((state) => state.showMentions);
   const showAllThreads = useThreadsMessageStore(
     (state) => state.showAllThreads
   );
 
   const isMessageNewDay = (current, previous) =>
     !previous || !isSameDay(new Date(current.ts), new Date(previous.ts));
   let iconType = 'thread';
-  if (headerTitle === 'Pinned Messages') {
+  let msgType = headerTitle;
+  if (msgType === 'Pinned Messages') {
     iconType = 'pin';
-  } else if (headerTitle === 'Starred Messages') {
+  } else if (msgType === 'Starred Messages') {
     iconType = 'star';
+  } else {
+    msgType = 'messages';
   }
   if (messages.length === 0) {
     return (
       <div style={{ margin: 'auto' }}>
         <div style={{ textAlign: 'center' }}>
           <Icon name={iconType} size="2rem" />
         </div>
-        <div style={{ textAlign: 'center' }}>No {headerTitle}</div>
+        <div style={{ textAlign: 'center' }}>No {msgType}</div>
       </div>
     );
   }
@@ -76,6 +81,7 @@ const MessageList = ({ messages }) => {
       {showSearch && <SearchMessage />}
       {showChannelinfo && <Roominfo />}
       {showAllThreads && <AllThreads />}
+      {showMentions && <UserMentions />}
     </>
   );
 };