fixed sidebar logical location (#559)

fixed issue that sidebar cant open when there are no messages in the channel
RocketChat · Apr 12, 2024 · c772d24 · c772d24
1 parent 73215d9
commit c772d24
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 40 deletions.
diff --git a/packages/react/src/components/ChatBody/ChatBody.js b/packages/react/src/components/ChatBody/ChatBody.js
@@ -3,7 +3,18 @@ import React, { useCallback, useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import RCContext from '../../context/RCInstance';
-import { useMessageStore, useUserStore, useChannelStore } from '../../store';
+import {
+  useMessageStore,
+  useUserStore,
+  useChannelStore,
+  usePinnedMessageStore,
+  useStarredMessageStore,
+  useSearchMessageStore,
+  useFileStore,
+  useMentionsStore,
+  useThreadsMessageStore,
+  useMemberStore,
+} from '../../store';
 import MessageList from '../MessageList';
 import TotpModal from '../TotpModal/TwoFactorTotpModal';
 import { Box } from '../Box';
@@ -14,6 +25,14 @@ import ModalBlock from '../uiKit/blocks/ModalBlock';
 import useComponentOverrides from '../../theme/useComponentOverrides';
 import RecentMessageButton from './RecentMessageButton';
 import useFetchChatData from '../../hooks/useFetchChatData';
+import RoomMembers from '../RoomMembers/RoomMember';
+import UserMentions from '../UserMentions/UserMentions';
+import AllThreads from '../AllThreads/AllThreads';
+import PinnedMessages from '../PinnedMessages/PinnedMessages';
+import StarredMessages from '../StarredMessages/StarredMessages';
+import SearchMessage from '../SearchMessage/SearchMessage';
+import Roominfo from '../RoomInformation/RoomInformation';
+import { Files } from '../Files';
 
 const ChatBody = ({
   height,
@@ -63,6 +82,18 @@ const ChatBody = ({
   const removeMessage = useMessageStore((state) => state.removeMessage);
   const isChannelPrivate = useChannelStore((state) => state.isChannelPrivate);
 
+  const showMentions = useMentionsStore((state) => state.showMentions);
+  const showAllFiles = useFileStore((state) => state.showAllFiles);
+  const showAllThreads = useThreadsMessageStore(
+    (state) => state.showAllThreads
+  );
+  const showPinned = usePinnedMessageStore((state) => state.showPinned);
+  const showStarred = useStarredMessageStore((state) => state.showStarred);
+  const showSearch = useSearchMessageStore((state) => state.showSearch);
+  const showChannelinfo = useChannelStore((state) => state.showChannelinfo);
+  const showMembers = useMemberStore((state) => state.showMembers);
+  const members = useMemberStore((state) => state.members);
+
   const [isThreadOpen, threadMainMessage] = useMessageStore((state) => [
     state.isThreadOpen,
     state.threadMainMessage,
@@ -268,6 +299,15 @@ const ChatBody = ({
           onClick={handlePopupClick}
         />
       )}
+
+      {showMembers && <RoomMembers members={members} />}
+      {showSearch && <SearchMessage />}
+      {showChannelinfo && <Roominfo />}
+      {showAllThreads && <AllThreads />}
+      {showAllFiles && <Files />}
+      {showMentions && <UserMentions />}
+      {showPinned && <PinnedMessages />}
+      {showStarred && <StarredMessages />}
     </>
   );
 };

diff --git a/packages/react/src/components/MessageList/MessageList.js b/packages/react/src/components/MessageList/MessageList.js
@@ -1,47 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { isSameDay } from 'date-fns';
-import {
-  useMessageStore,
-  useMemberStore,
-  useSearchMessageStore,
-  useChannelStore,
-  useUserStore,
-  useFileStore,
-  useMentionsStore,
-  useThreadsMessageStore,
-  usePinnedMessageStore,
-  useStarredMessageStore,
-} from '../../store';
-import RoomMembers from '../RoomMembers/RoomMember';
+import { useMessageStore, useUserStore } from '../../store';
 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 { Files } from '../Files';
 import { Message } from '../Message';
-import PinnedMessages from '../PinnedMessages/PinnedMessages';
-import StarredMessages from '../StarredMessages/StarredMessages';
+
 import { Icon } from '../Icon';
 
 const MessageList = ({ messages }) => {
-  const showSearch = useSearchMessageStore((state) => state.showSearch);
-  const showChannelinfo = useChannelStore((state) => state.showChannelinfo);
-  const showMembers = useMemberStore((state) => state.showMembers);
-  const members = useMemberStore((state) => state.members);
   const showReportMessage = useMessageStore((state) => state.showReportMessage);
   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 showAllFiles = useFileStore((state) => state.showAllFiles);
-  const showAllThreads = useThreadsMessageStore(
-    (state) => state.showAllThreads
-  );
-  const showPinned = usePinnedMessageStore((state) => state.showPinned);
-  const showStarred = useStarredMessageStore((state) => state.showStarred);
 
   const isMessageNewDay = (current, previous) =>
     !previous || !isSameDay(new Date(current.ts), new Date(previous.ts));
@@ -85,15 +56,7 @@ const MessageList = ({ messages }) => {
           );
         })}
 
-      {showMembers && <RoomMembers members={members} />}
       {showReportMessage && <MessageReportWindow messageId={messageToReport} />}
-      {showSearch && <SearchMessage />}
-      {showChannelinfo && <Roominfo />}
-      {showAllThreads && <AllThreads />}
-      {showAllFiles && <Files />}
-      {showMentions && <UserMentions />}
-      {showPinned && <PinnedMessages />}
-      {showStarred && <StarredMessages />}
     </>
   );
 };