Merge pull request #94 from Chat-Your-Way/CHAT-236-Interface-for-non-…

…authenticated-user Chat 236 interface for non authenticated user
Chat-Your-Way · Jun 26, 2024 · d9e6b4f · d9e6b4f
2 parents 4232993 + 4052399
commit d9e6b4f
Show file tree

Hide file tree

Showing 14 changed files with 179 additions and 66 deletions.
diff --git a/src/common/Sidebar/Sidebar.jsx b/src/common/Sidebar/Sidebar.jsx
@@ -92,6 +92,7 @@ const Sidebar = () => {
 
       if (error) {
         alert(error.data.message);
+        dispatch(setIsLoggedIn(false));
         return;
       }
 

diff --git a/src/common/Topics/ChatsBlock/ChatItem/ChatItem.jsx b/src/common/Topics/ChatsBlock/ChatItem/ChatItem.jsx
@@ -13,15 +13,16 @@ import { useTopicsContext } from '../../TopicsContext';
 import { getTime } from '../../../../components/Chat/processMessageData';
 import { useMediaQuery } from 'react-responsive';
 
-const ChatItem = ({ isActive, data, notification }) => {
+// const ChatItem = ({ isActive, data, notification }) => {
+const ChatItem = ({ isActive, data }) => {
   const { isTopics } = useTopicsContext();
   const avatarContent = getAvatar(isTopics, data);
 
   const chatOpened = useSelector(selectChatOpened);
   const contactsOpened = useSelector(selectContactsOpened);
 
-  const unreadedMessages = notification?.unreadMessages ?? null;
-  const lastMessageContent = notification?.lastMessage ?? null;
+  const unreadedMessages = data?.unreadMessageCount ?? null;
+  const lastMessageContent = data?.lastMessage ?? null;
 
   const isTablet = useMediaQuery({ query: '(min-width: 769px' });
 
@@ -38,17 +39,17 @@ const ChatItem = ({ isActive, data, notification }) => {
           contactsOpened={contactsOpened}
         >
           {isTopics ? (
-            <TopicDesc title={data.topicName} />
+            <TopicDesc title={data.name} />
           ) : (
-            <TopicDesc title={data.userName} />
+            <TopicDesc title={data.createdBy.nickname} />
           )}
 
           {lastMessageContent && (
             <LastMessages
               userName={lastMessageContent.sentFrom}
               message={lastMessageContent.lastMessage}
               unreadedMessage={unreadedMessages}
-              isTyping={data.isTyping}
+              // isTyping={data.isTyping}
               lastMessageTime={getTime(lastMessageContent.timestamp)}
             />
           )}

diff --git a/src/common/Topics/ChatsBlock/ChatsBlock.jsx b/src/common/Topics/ChatsBlock/ChatsBlock.jsx
@@ -54,12 +54,12 @@ const ChatsBlock = ({ filter }) => {
 
         return (
           <StyledNavLink to={`../${path}/chat/${item.id}`} key={item.id}>
-            <ChatItem data={item} notification={notification} />
+            {/* <ChatItem data={item} notification={notification} /> */}
+            <ChatItem data={item} />
           </StyledNavLink>
         );
       })
   );
 };
 
-// export default memo(ChatsBlock);
-export default ChatsBlock;
+export default memo(ChatsBlock);
diff --git a/src/components/Chat/Chat.jsx b/src/components/Chat/Chat.jsx
@@ -24,6 +24,7 @@ import {
   unsubscribeFromMessages,
   getTopicHistory,
   sendMessage,
+  connectWebSocket,
 } from '../../redux/chat-operations';
 
 import { Avatars } from '../../ui-kit/images/avatars';
@@ -63,10 +64,20 @@ import {
 
 import { processMessageData } from './processMessageData';
 import { setIsLoggedIn } from '../../redux/authOperatonsToolkit/authOperationsThunkSlice';
+import { useGetMessagesByTopicQuery } from '../../redux/messagesAPI/messagesAPI';
 
 const Chat = ({ children }) => {
   const { title: topicId } = useParams();
-  const { data, isLoading, isError } = useGetByIdQuery(topicId);
+  const { data: topicIdData, isLoading, isError } = useGetByIdQuery(topicId);
+  const {
+    data: messagesByTopic,
+    currentData: currentMessagesByTopic,
+    isFetching,
+  } = useGetMessagesByTopicQuery(topicId, {
+    refetchOnMountOrArgChange: true,
+    refetchOnFocus: true,
+    refetchOnReconnect: true,
+  });
 
   const { email } = useSelector(getUserInfo);
   const { isTopics } = useTopicsContext();
@@ -83,9 +94,9 @@ const Chat = ({ children }) => {
   const inputRef = useRef(null);
 
   useEffect(() => {
-    // if (!connected) {
-    //   dispatch(connectWebSocket());
-    // } //!
+    if (!connected) {
+      dispatch(connectWebSocket());
+    }
 
     dispatch(toggleChatOpened());
 
@@ -103,29 +114,29 @@ const Chat = ({ children }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  useEffect(() => {
-    if (!connected) return;
+  // useEffect(() => {
+  //   if (!connected) return;
 
-    if (subscribed) {
-      dispatch(unsubscribeFromMessages());
-    }
+  //   if (subscribed) {
+  //     dispatch(unsubscribeFromMessages());
+  //   }
 
-    dispatch(clearMessages());
-    dispatch(clearHistoryMessages());
-    dispatch(clearNewMessages());
-    dispatch(clearNotifications());
+  //   dispatch(clearMessages());
+  //   dispatch(clearHistoryMessages());
+  //   dispatch(clearNewMessages());
+  //   dispatch(clearNotifications());
 
-    dispatch(subscribeToMessages(topicId));
-    dispatch(getTopicHistory(topicId));
+  //   dispatch(subscribeToMessages(topicId));
+  //   dispatch(getTopicHistory(topicId));
 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dispatch, connected, topicId]);
+  //   // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, [dispatch, connected, topicId]);
 
   useEffect(() => {
-    if (historyMessages.length === 0 || notifications.length === 0) return;
-
+    // if (historyMessages.length === 0 || notifications.length === 0) return;
+    if (!currentMessagesByTopic) return;
     const newMessagesData = processMessageData(
-      data,
+      currentMessagesByTopic,
       email,
       historyMessages,
       newMessages,
@@ -135,7 +146,14 @@ const Chat = ({ children }) => {
     dispatch(setMessages(newMessagesData));
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dispatch, historyMessages, newMessages, notifications, email]);
+  }, [
+    dispatch,
+    historyMessages,
+    newMessages,
+    notifications,
+    email,
+    currentMessagesByTopic,
+  ]);
 
   if (isError) {
     alert('Виникла помилка під час отримання теми');
@@ -163,8 +181,8 @@ const Chat = ({ children }) => {
   };
 
   const subscribeStatus = () => {
-    if (data) {
-      const status = data.topicSubscribers.find(
+    if (topicIdData) {
+      const status = topicIdData.topicSubscribers.find(
         (el) => el.contact.email === email && el.unsubscribeAt === null,
       );
 
@@ -177,14 +195,14 @@ const Chat = ({ children }) => {
   return isLoading ? (
     <Loader />
   ) : (
-    data && (
+    topicIdData && (
       <ChatWrap>
         <ChatHeader>
           <UserBox>
-            <Avatar>{getAvatar(isTopics, data)}</Avatar>
+            <Avatar>{getAvatar(isTopics, topicIdData)}</Avatar>
             <InfoBox>
               <ChatUserName variant="h5">
-                {data ? data.topicName : 'імя користувача'}
+                {topicIdData ? topicIdData.name : 'імя користувача'}
               </ChatUserName>
               <TypingIndicator variant="h5">Ти/Пишеш...</TypingIndicator>
             </InfoBox>

diff --git a/src/components/Chat/Chat.styled.js b/src/components/Chat/Chat.styled.js
@@ -29,7 +29,8 @@ export const ChatWrap = styled(Box)`
 
   @media screen and (min-width: calc(1200px - 0.02px)) {
     max-width: 730px;
-    height: calc(100vh - 297px);
+    /* height: calc(100vh - 297px); */
+    height: calc(100vh - 100px);
   }
 `;
 

diff --git a/src/components/Chat/processMessageData.js b/src/components/Chat/processMessageData.js
@@ -19,31 +19,53 @@ export const processMessageData = (
   newMessages,
   notifications,
 ) => {
-  const messagesData = [...historyMessages, ...newMessages];
+  const messagesData = [...historyMessages, ...newMessages, ...data.content];
 
   const messages = messagesData.map((messageData) => {
-    const { content, timestamp, sentFrom } = messageData;
+    const { content, timestamp, sender, my: isMyMessage } = messageData;
 
-    const subscriber = data.topicSubscribers.find(
-      ({ contact }) => contact.email === sentFrom,
-    );
     const notification = notifications.find(
-      (notification) => notification.email === sentFrom,
+      (notification) => notification.email === sender.email,
     );
 
     const message = {
       id: nanoid(),
       topicId: notification?.topicId, //?! not used
-      avatarId: subscriber?.contact.avatarId,
-      name: subscriber?.contact.nickname,
+      avatarId: sender.avatarId,
+      name: sender.nickname,
       time: getTime(timestamp),
       text: content,
-      isMyMessage: sentFrom === email,
+      isMyMessage: isMyMessage,
       isOnline: notification?.status !== 'OFFLINE',
     };
 
     return message;
   });
+  // const messagesData = [...historyMessages, ...newMessages];
+
+  // const messages = messagesData.map((messageData) => {
+  //   const { content, timestamp, sentFrom } = messageData;
+
+  //   const subscriber = data.topicSubscribers.find(
+  //     ({ contact }) => contact.email === sentFrom,
+  //   );
+  //   const notification = notifications.find(
+  //     (notification) => notification.email === sentFrom,
+  //   );
+
+  //   const message = {
+  //     id: nanoid(),
+  //     topicId: notification?.topicId, //?! not used
+  //     avatarId: subscriber?.contact.avatarId,
+  //     name: subscriber?.contact.nickname,
+  //     time: getTime(timestamp),
+  //     text: content,
+  //     isMyMessage: sentFrom === email,
+  //     isOnline: notification?.status !== 'OFFLINE',
+  //   };
+
+  //   return message;
+  // });
 
   return messages;
 };
diff --git a/src/components/Layouts/Footer/Footer.jsx b/src/components/Layouts/Footer/Footer.jsx
@@ -22,12 +22,12 @@ const Footer = () => {
 
       if (error) {
         alert(error.data.message);
+        dispatch(setIsLoggedIn(false));
         return;
       }
 
       // localLogOut();
       // navigate(PATH.MAIN);
-      dispatch(setIsLoggedIn(false));
     } catch (error) {
       console.error('Виникла помилка:', error);
     }

diff --git a/src/hooks/useSubscriptionToAllTopicsNotify.js b/src/hooks/useSubscriptionToAllTopicsNotify.js
@@ -6,15 +6,21 @@ import {
   selectSubscribedAllTopicsNotify,
 } from '../redux/chatSlice';
 
-export const useSubscriptionToAllTopicsNotify = (isAuthenticated) => {
+export const useSubscriptionToAllTopicsNotify = (isLoggedIn) => {
   const dispatch = useDispatch();
   const connected = useSelector(selectConnected);
   const subscribedAllTopicsNotify = useSelector(
     selectSubscribedAllTopicsNotify,
   );
+  // console.log('isLoggedIn', isLoggedIn);
+  // console.log('connect', connected);
+  // console.log('subscribedAllTopicsNotify', subscribedAllTopicsNotify);
+  // console.log(!isLoggedIn || !connected || subscribedAllTopicsNotify);
 
   useEffect(() => {
-    if (!isAuthenticated || !connected || subscribedAllTopicsNotify) return;
+    if (!isLoggedIn || !connected || subscribedAllTopicsNotify) {
+      return;
+    }
     dispatch(subscribeToAllTopicsNotify());
 
     // eslint-disable-next-line react-hooks/exhaustive-deps

diff --git a/src/hooks/useWebSocketConnection.js b/src/hooks/useWebSocketConnection.js
@@ -3,12 +3,12 @@ import { useDispatch, useSelector } from 'react-redux';
 import { connectWebSocket } from '../redux/chat-operations';
 import { selectConnected } from '../redux/chatSlice';
 
-export const useWebSocketConnection = (isAuthenticated) => {
+export const useWebSocketConnection = (isLoggedIn) => {
   const dispatch = useDispatch();
   const connected = useSelector(selectConnected);
 
   useEffect(() => {
-    if (isAuthenticated && !connected) {
+    if (isLoggedIn && !connected) {
       dispatch(connectWebSocket());
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

diff --git a/src/redux/apiParams.js b/src/redux/apiParams.js
@@ -1,6 +1,6 @@
 // export const BASE_URL = process.env.REACT_APP_API_BASE_URL;
 // export const BASE_URL = 'http://chat.eu-central-1.elasticbeanstalk.com';
-export const BASE_URL = 'http://chat.imperiaholoda.com.ua';
+export const BASE_URL = 'https://chat.imperiaholoda.com.ua';
 export const Referer = document.referrer;
 // export const ajwt = JSON.parse(localStorage.getItem('accessToken'));
 // export const rjwt = JSON.parse(localStorage.getItem('refreshToken'));
-Original file line number
+Diff line change
@@ Expand Up / @@ -92,6 +92,7 @@ const Sidebar = () => { @@
           if (error) {
             alert(error.data.message);
+            dispatch(setIsLoggedIn(false));
             return;
           }
@@ Expand Down @@