From 9013e1fc497beecede788377071a773e715df146 Mon Sep 17 00:00:00 2001 From: KostiantynU <115901013+KostiantynU@users.noreply.github.com> Date: Fri, 12 Jul 2024 22:15:45 +0300 Subject: [PATCH] Test message --- .../Topics/ChatsBlock/ChatItem/ChatItem.jsx | 12 +- src/common/Topics/ChatsBlock/ChatsBlock.jsx | 65 +++-- src/common/Topics/Topics.jsx | 4 +- .../TopicsHeader/ThemeBlock/ThemeBlock.jsx | 4 +- .../Topics/TopicsHeader/TopicsHeader.jsx | 4 +- src/components/Chat/Chat.jsx | 241 ++++++++++++------ .../NotificationPage.styled.js | 1 + src/pages/TopicsPage/TopicsPage.jsx | 2 +- src/redux/topics-operations.js | 13 + 9 files changed, 237 insertions(+), 109 deletions(-) diff --git a/src/common/Topics/ChatsBlock/ChatItem/ChatItem.jsx b/src/common/Topics/ChatsBlock/ChatItem/ChatItem.jsx index 3e3ea60..0eafad1 100644 --- a/src/common/Topics/ChatsBlock/ChatItem/ChatItem.jsx +++ b/src/common/Topics/ChatsBlock/ChatItem/ChatItem.jsx @@ -41,13 +41,21 @@ const ChatItem = ({ isActive, data }) => { {isTopics ? ( ) : ( - + )} {lastMessageContent && ( 20 + ? `${lastMessageContent.lastMessage.slice(0, 20)}...` + : lastMessageContent.lastMessage + } unreadedMessage={unreadedMessages} // isTyping={data.isTyping} lastMessageTime={getTime(lastMessageContent.timestamp)} diff --git a/src/common/Topics/ChatsBlock/ChatsBlock.jsx b/src/common/Topics/ChatsBlock/ChatsBlock.jsx index 2575cc8..7380b3b 100644 --- a/src/common/Topics/ChatsBlock/ChatsBlock.jsx +++ b/src/common/Topics/ChatsBlock/ChatsBlock.jsx @@ -4,7 +4,10 @@ import { memo } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; -import { useGetAllQuery } from '../../../redux/topics-operations'; +import { + useGetAllPrivateTopicsQuery, + useGetAllQuery, +} from '../../../redux/topics-operations'; import { useTopicsContext } from '../TopicsContext'; import ChatItem from './ChatItem'; import { ChatBlockDataHelper } from './ChatBlockDataHelper'; @@ -32,7 +35,12 @@ const ChatsBlock = ({ filter }) => { const { pathname } = useLocation(); const path = pathname.includes('topics') ? 'topics' : 'notification'; const accessTokenInStore = useSelector(selectAccessToken); - const { data, isLoading, isError, error } = useGetAllQuery( + const { + data: allTopicsData, + isLoading, + isError, + error, + } = useGetAllQuery( { filter, accessTokenInStore, @@ -43,6 +51,18 @@ const ChatsBlock = ({ filter }) => { refetchOnReconnect: true, }, ); + + const { + data: privateTopics, + currentData: currentPrivateTopics, + isFetching: isFetchingPrivateTopics, + error: privateTopicsError, + } = useGetAllPrivateTopicsQuery(accessTokenInStore, { + refetchOnMountOrArgChange: 10, + refetchOnFocus: true, + refetchOnReconnect: true, + }); + const { localLogOut } = useUser(); const navigate = useNavigate(); const dispatch = useDispatch(); @@ -59,21 +79,36 @@ const ChatsBlock = ({ filter }) => { return isLoading ? ( + ) : isTopics ? ( + allTopicsData && + // notificationsAllTopics.length !== 0 && + allTopicsData.map((item) => { + const notification = notificationsAllTopics.find( + (notificationItem) => notificationItem.id === item.id, + ); + + return ( + + {/* */} + + + ); + }) ) : ( - data && - // notificationsAllTopics.length !== 0 && - data.map((item) => { - const notification = notificationsAllTopics.find( - (notificationItem) => notificationItem.id === item.id, - ); + privateTopics && + // notificationsAllTopics.length !== 0 && + privateTopics.map((item) => { + const notification = notificationsAllTopics.find( + (notificationItem) => notificationItem.id === item.id, + ); - return ( - - {/* */} - - - ); - }) + return ( + + {/* */} + + + ); + }) ); }; diff --git a/src/common/Topics/Topics.jsx b/src/common/Topics/Topics.jsx index 3f83b19..bb715dc 100644 --- a/src/common/Topics/Topics.jsx +++ b/src/common/Topics/Topics.jsx @@ -5,7 +5,7 @@ import { TopicsWrapper } from './Topics.styled'; import ChatsBlock from './ChatsBlock'; import TopicsHeader from './TopicsHeader'; -const Topics = ({ handleBTNTopicFunc, handleBTNFunc }) => { +const Topics = ({ handleBTNTopicFunc, handleModal }) => { const [filter, setFilter] = useState('all'); const chatOpened = useSelector(selectChatOpened); @@ -14,7 +14,7 @@ const Topics = ({ handleBTNTopicFunc, handleBTNFunc }) => { return ( diff --git a/src/common/Topics/TopicsHeader/ThemeBlock/ThemeBlock.jsx b/src/common/Topics/TopicsHeader/ThemeBlock/ThemeBlock.jsx index 46b1670..3bb7969 100644 --- a/src/common/Topics/TopicsHeader/ThemeBlock/ThemeBlock.jsx +++ b/src/common/Topics/TopicsHeader/ThemeBlock/ThemeBlock.jsx @@ -7,7 +7,7 @@ import { StyledBox } from './ThemeBlock.styled'; import DefaultButton from '../../../../ui-kit/components/Button'; import { ICONS } from '../../../../ui-kit/icons'; -const ThemeBlock = ({ isTopics, handleBTNFunc }) => { +const ThemeBlock = ({ isTopics, handleModal }) => { const title = isTopics ? 'Теми' : 'Повідомлення'; const chatOpened = useSelector(selectChatOpened); @@ -20,7 +20,7 @@ const ThemeBlock = ({ isTopics, handleBTNFunc }) => { } - handleClick={handleBTNFunc} + handleClick={handleModal} /> )} diff --git a/src/common/Topics/TopicsHeader/TopicsHeader.jsx b/src/common/Topics/TopicsHeader/TopicsHeader.jsx index 11c1fef..1f37250 100644 --- a/src/common/Topics/TopicsHeader/TopicsHeader.jsx +++ b/src/common/Topics/TopicsHeader/TopicsHeader.jsx @@ -9,7 +9,7 @@ import TabsBlock from './TabsBlock'; import { StyledBox, StyledSearchInput } from './TopicsHeader.styled'; import { useTopicsContext } from '../TopicsContext'; -const TopicsHeader = ({ handleBTNFunc, active, setFilter }) => { +const TopicsHeader = ({ handleModal, active, setFilter }) => { const { isTopics } = useTopicsContext(); const chatOpened = useSelector(selectChatOpened); @@ -18,7 +18,7 @@ const TopicsHeader = ({ handleBTNFunc, active, setFilter }) => { return ( <> - + {isTopics && } { const { data: messagesByTopic, currentData: currentMessagesByTopic, - isFetching, + isFetching: isFetchingMessagesByTopic, error: messagesByTopicError, } = useGetMessagesByTopicQuery(topicId, { refetchOnMountOrArgChange: 10, @@ -232,89 +235,157 @@ const Chat = ({ children }) => { return isLoading ? ( - ) : ( - isChatOpened && ( - // topicIdData && ( - - - - {getAvatar(isTopics, topicIdData)} - - - {topicIdData ? topicIdData.name : 'імя користувача'} - - Ти/Пишеш... - - - - {children} - - - - - - {messages && - messages.map((item) => ( - - - - - - {item.time} - - - {item.isOnline ? ( - - ) : ( - - )} - - {item.name} - - - - {item.text} - - {!item.isMyMessage && } - - - {avatarsArray.map( - (Logo, index) => - item.avatarId - 1 === index && ( - - - - ), - )} - - - ))} - - - { - if (event.key === 'Enter' && !event.shiftKey) { - event.preventDefault(); - handleMessageSend(); - } - }} - /> - - {/* } /> //! CHAT-220--smile-disable */} - } onClick={handleMessageSend} /> - - - - - ) - ); + ) : // isChatOpened && ( + // // topicIdData && ( + // + // + // + // {getAvatar(isTopics, topicIdData)} + // + // + // {topicIdData ? topicIdData.name : 'імя користувача'} + // + // Ти/Пишеш... + // + // + // + // {children} + // + // + // + // + // + // {messages && + // messages.map(item => ( + // + // + // + // + // {item.time} + // + // {item.isOnline ? : } + // + // {item.name} + // + // + // {item.text} + // {!item.isMyMessage && } + // + // + // {avatarsArray.map( + // (Logo, index) => + // item.avatarId - 1 === index && ( + // + // + // + // ) + // )} + // + // + // ))} + // + // + // { + // if (event.key === 'Enter' && !event.shiftKey) { + // event.preventDefault(); + // handleMessageSend(); + // } + // }} + // /> + // + // {/* } /> //! CHAT-220--smile-disable */} + // } onClick={handleMessageSend} /> + // + // + // + // + // ) + isChatOpened ? ( + // topicIdData && ( + + + + {getAvatar(isTopics, topicIdData)} + + + {topicIdData ? topicIdData.name : 'імя користувача'} + + Ти/Пишеш... + + + + {children} + + + + + + {messages && + messages.map((item) => ( + + + + + + {item.time} + + + {item.isOnline ? ( + + ) : ( + + )} + + {item.name} + + + + {item.text} + + {!item.isMyMessage && } + + + {avatarsArray.map( + (Logo, index) => + item.avatarId - 1 === index && ( + + + + ), + )} + + + ))} + + + { + if (event.key === 'Enter' && !event.shiftKey) { + event.preventDefault(); + handleMessageSend(); + } + }} + /> + + {/* } /> //! CHAT-220--smile-disable */} + } onClick={handleMessageSend} /> + + + + + ) : null; }; export default memo(Chat); diff --git a/src/pages/NotificationPage/NotificationPage.styled.js b/src/pages/NotificationPage/NotificationPage.styled.js index bd81e3d..6bd7557 100644 --- a/src/pages/NotificationPage/NotificationPage.styled.js +++ b/src/pages/NotificationPage/NotificationPage.styled.js @@ -3,6 +3,7 @@ import { Box } from '@mui/material'; export const NotificationPageWrap = styled(Box)` display: flex; + flex-grow: 2; @media screen and (min-width: calc(1200px - 0.02px)) { gap: 40px; diff --git a/src/pages/TopicsPage/TopicsPage.jsx b/src/pages/TopicsPage/TopicsPage.jsx index 6581544..cd18e6d 100644 --- a/src/pages/TopicsPage/TopicsPage.jsx +++ b/src/pages/TopicsPage/TopicsPage.jsx @@ -45,7 +45,7 @@ function TopicsPage() { return ( - {showTopics && } + {showTopics && } {modalOpenNewTopic && ( setModalOpenNewTopic(!contactsOpen)}> { setModalOpenNewTopic(false)} />} diff --git a/src/redux/topics-operations.js b/src/redux/topics-operations.js index 9704385..5e3f695 100644 --- a/src/redux/topics-operations.js +++ b/src/redux/topics-operations.js @@ -99,6 +99,18 @@ const topicsApi = createApi({ invalidatesTags: ['Topics'], }), + // Here will be the code for private messages + getAllPrivateTopics: builder.query({ + query: (accessTokenInStore) => ({ + url: 'topics/private', + headers: { + Referer: Referer, + 'Content-Type': 'application/json', + Authorization: `Bearer ${accessTokenInStore}`, + }, + }), + }), + update: builder.mutation({}), createPrivate: builder.mutation({}), @@ -121,6 +133,7 @@ export const { useGetByIdQuery, useSubscribeMutation, useUnsubscribeMutation, + useGetAllPrivateTopicsQuery, } = topicsApi; export default topicsApi;