diff --git a/packages/react/src/components/ChatBody/ChatBody.js b/packages/react/src/components/ChatBody/ChatBody.js index 94ea86199..eef092f41 100644 --- 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 && } + {showSearch && } + {showChannelinfo && } + {showAllThreads && } + {showAllFiles && } + {showMentions && } + {showPinned && } + {showStarred && } ); }; diff --git a/packages/react/src/components/MessageList/MessageList.js b/packages/react/src/components/MessageList/MessageList.js index c33f80555..83efca855 100644 --- 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 && } {showReportMessage && } - {showSearch && } - {showChannelinfo && } - {showAllThreads && } - {showAllFiles && } - {showMentions && } - {showPinned && } - {showStarred && } ); };