Merge pull request #117 from Chat-Your-Way/CHAT-240--display-unread-m…

…essages Fix two bugs
Chat-Your-Way · Oct 9, 2024 · 04e7850 · 04e7850
2 parents 76773ab + 039766f
commit 04e7850
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 19 deletions.
diff --git a/src/components/Chat/Chat.jsx b/src/components/Chat/Chat.jsx
@@ -385,23 +385,40 @@ const Chat = ({ children }) => {
       isFirstUnreadMessageRef.current = null;
       unreadMessageContainerRef.current = null;
     };
+    // }, [topicId, messages, isFetchingCurrentMessagesByTopic]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [topicId, messages, isFetchingCurrentMessagesByTopic]);
+  }, [topicId, messages]);
 
   // Try to process the situation when user doesn't has a private dialog
   useEffect(() => {
+    // To much requests send to the server - so we have to much messages in private dialog
+    // if (
+    //   topicIdDataError?.data?.detail?.includes(
+    //     "Failed to convert 'id' with value",
+    //   ) ||
+    //   messagesByTopicError?.data?.detail?.includes(
+    //     "Failed to convert 'id' with value",
+    //   ) ||
+    //   topicIdDataError?.data?.detail?.includes(
+    //     "Failed to convert 'topicId' with value",
+    //   ) ||
+    //   messagesByTopicError?.data?.detail?.includes(
+    //     "Failed to convert 'topicId' with value",
+    //   )
+    // ) {
+    //   sendFirstMessageToUser({
+    //     userEmail: topicId,
+    //     accessTokenInStore,
+    //     inputMessage: 'Hello! I want to chat with you!',
+    //   });
+    // }
+
     if (
       topicIdDataError?.data?.detail?.includes(
         "Failed to convert 'id' with value",
       ) ||
-      messagesByTopicError?.data?.detail?.includes(
-        "Failed to convert 'id' with value",
-      ) ||
       topicIdDataError?.data?.detail?.includes(
         "Failed to convert 'topicId' with value",
-      ) ||
-      messagesByTopicError?.data?.detail?.includes(
-        "Failed to convert 'topicId' with value",
       )
     ) {
       sendFirstMessageToUser({
@@ -410,6 +427,7 @@ const Chat = ({ children }) => {
         inputMessage: 'Hello! I want to chat with you!',
       });
     }
+
     if (isSendFirstMessagesSuccess) {
       navigate(`/home/notification/chat/${sendFirstMessageData.id}`);
     }
@@ -569,12 +587,6 @@ const Chat = ({ children }) => {
     alert('Виникла помилка під час отримання теми (ChatComponent)');
 
     localLogOutUtil(dispatch);
-
-    // dispatch(setIsLoggedIn(false));
-    // dispatch(setAccessToken(null));
-    // dispatch(setRefreshToken(null));
-    // localStorage.removeItem('accessToken');
-    // localStorage.removeItem('refreshToken');
   }
 
   return (
@@ -710,7 +722,9 @@ const Chat = ({ children }) => {
                       messageId={item.id}
                       messageStatus={item.messageStatus}
                       isFirstUnreadMessage={
-                        isFirstUnreadMessageRef.current ? false : item
+                        isFirstUnreadMessageRef?.current?.id === item.id
+                          ? item
+                          : false
                       }
                     >
                       <UserMassageWrap>

diff --git a/src/components/Chat/MessageContainerObserver/MessageContainerObserver.jsx b/src/components/Chat/MessageContainerObserver/MessageContainerObserver.jsx
@@ -51,7 +51,7 @@ const MessageContainerObserver = ({
     <MessageContainer
       id={`#${messageId}`}
       ref={messageStatus ? observerRef : null}
-      data-messageId={messageId}
+      // data-messageId={messageId}
       isMyMessage={isMyMessage}
       messageStatus={messageStatus ? changedMessageStatus : null}
       data-isFirstUnreadMessage={

diff --git a/src/redux/chat-operations.js b/src/redux/chat-operations.js
@@ -20,6 +20,7 @@ import {
   clearSubscriptionAllTopicsNotify,
   setUsersStatusOnlineTyping,
   clearUsersStatusOnlineTyping,
+  setAllTopicsNotificationsWS,
 } from './chatSlice';
 import SockJS from 'sockjs-client';
 import { BASE_URL } from './apiParams';
@@ -194,7 +195,7 @@ export const subscribeToAllTopicsNotify = () => {
         (message) => {
           const parsedAllTopicsNotifications = JSON.parse(message.body);
 
-          dispatch(setAllTopicsNotifications([parsedAllTopicsNotifications]));
+          dispatch(setAllTopicsNotificationsWS([parsedAllTopicsNotifications]));
         },
       );
       dispatch(setSubscribedAllTopicsNotify(true));

diff --git a/src/redux/chatSlice.js b/src/redux/chatSlice.js
@@ -1,6 +1,19 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { createSelector } from 'reselect';
 
+const whenStateArrLengthMore = (stateArr, actionPayload) => {
+  return stateArr.reduce((acuum, el) => {
+    if (actionPayload.find((payloadEl) => payloadEl.id === el.id)) {
+      return [
+        ...acuum,
+        actionPayload.find((payloadEl) => payloadEl.id === el.id),
+      ];
+    } else {
+      return [...acuum, el];
+    }
+  }, []);
+};
+
 const chatSlice = createSlice({
   name: 'chat',
   initialState: {
@@ -31,8 +44,13 @@ const chatSlice = createSlice({
     setAllTopicsNotifications: (state, action) => {
       if (!state.notificationsAllTopics.length) {
         state.notificationsAllTopics = [...action.payload];
+      } else if (state.notificationsAllTopics.length >= action.payload.length) {
+        state.notificationsAllTopics = whenStateArrLengthMore(
+          state.notificationsAllTopics,
+          action.payload,
+        );
       } else {
-        state.notificationsAllTopics = state.notificationsAllTopics.reduce(
+        state.notificationsAllTopics = state.action.payload.reduce(
           (acuum, el) => {
             if (action.payload.find((payloadEl) => payloadEl.id === el.id)) {
               return [
@@ -47,13 +65,23 @@ const chatSlice = createSlice({
         );
       }
     },
+    setAllTopicsNotificationsWS: (state, action) => {
+      if (!state.notificationsAllTopics.length) {
+        state.notificationsAllTopics = [...action.payload];
+      } else {
+        state.notificationsAllTopics = whenStateArrLengthMore(
+          state.notificationsAllTopics,
+          action.payload,
+        );
+      }
+    },
     clearAllTopicsNotifications: (state) => {
       state.notificationsAllTopics = [];
     },
 
     deletReadedAllTopicsNotification: (state, action) => {
       state.notificationsAllTopics = state.notificationsAllTopics.filter(
-        (el) => el.id !== action.payload,
+        (el) => el.lastMessage.id !== action.payload,
       );
     },
     setMessages: (state, action) => {
@@ -129,6 +157,7 @@ export const {
   clearSubscriptionAllTopicsNotify,
   setAllTopicsNotifications,
   clearAllTopicsNotifications,
+  setAllTopicsNotificationsWS,
   deletReadedAllTopicsNotification,
   setMessages,
   clearMessages,

diff --git a/src/utils/setUnreadMessagesFlag.js b/src/utils/setUnreadMessagesFlag.js
@@ -1,7 +1,6 @@
 // eslint-disable-next-line no-unused-vars
 const setUnreadMessageFlag = ({ arrayOfMessages, unreadMessageCount }) => {
   let tempValue = unreadMessageCount;
-  // let tempValue = 5;
 
   if (tempValue === 0) {
     return arrayOfMessages;