Fix chat message bugs

sos-lapsikyla · Nov 14, 2024 · 33e36d4 · 33e36d4
1 parent a632c58
commit 33e36d4
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 31 deletions.
diff --git a/cypress/tests/chat.cy.ts b/cypress/tests/chat.cy.ts
@@ -142,18 +142,20 @@ describe('chat', () => {
       });
     });
 
-    // chat page should open most recent chat by default
+    // open chat with mentor
     cy.loginUser(mentee.loginName, mentee.password);
     cy.get('[href="/chat"]').click();
-    cy.getByText(secondMentor.displayName, 'h2').should('be.visible');
+    cy.getByText(mentor.displayName, 'p').should('be.visible').click();
+    cy.getByText(mentor.displayName, 'h2').should('be.visible');
 
     // draft a message
     cy.get('textarea[placeholder*="Kirjoita viestisi tähän"]')
       .click()
       .type('Hello there');
 
     // change mentor
-    cy.getByText(mentor.displayName, 'p').should('be.visible').click();
+    cy.getByText(secondMentor.displayName, 'p').should('be.visible').click();
+    cy.getByText(secondMentor.displayName, 'h2').should('be.visible');
 
     // verify the message field is cleared by checking that the placeholder is visible
     cy.get('textarea[placeholder*="Kirjoita viestisi tähän"]').should(

diff --git a/src/features/Chat/components/ActiveWindow/index.tsx b/src/features/Chat/components/ActiveWindow/index.tsx
@@ -4,7 +4,6 @@ import styled, { css } from 'styled-components';
 import {
   selectActiveChat,
   selectIsLoadingBuddyMessages,
-  selectDefaultChat,
 } from '@/features/Chat/selectors';
 import { selectUserId } from '@/features/Authentication/selectors';
 import { setActiveChat } from '@/features/Chat/chatSlice';
@@ -35,18 +34,11 @@ const ActiveWindow = () => {
   const userId = useAppSelector(selectUserId);
 
   const activeChat = useAppSelector(selectActiveChat);
-  const defaultChat = useAppSelector(selectDefaultChat);
-  const chat = activeChat ?? defaultChat;
-
-  useEffect(() => {
-    dispatch(setActiveChat(chat.buddyId));
-    setMessage('');
-  }, [chat.buddyId]);
 
   const [message, setMessage] = useState('');
 
   const isLoadingBuddyMessages = useAppSelector(
-    selectIsLoadingBuddyMessages(chat?.buddyId),
+    selectIsLoadingBuddyMessages(activeChat?.buddyId),
   );
   const [isLoadingSentMessage, setIsLoadingSentMessage] = useState(false);
   const isSendingDisabled = isLoadingSentMessage || message.trim().length < 1;
@@ -58,32 +50,37 @@ const ActiveWindow = () => {
       setIsLoadingSentMessage(true);
       await sendMessage({
         userId,
-        message: toSendMessage(chat.buddyId, userId, message),
+        message: toSendMessage(activeChat.buddyId, userId, message),
       }).unwrap();
     } catch (error) {
       setIsLoadingSentMessage(false);
     }
   };
 
+  useEffect(() => {
+    dispatch(setActiveChat(activeChat.buddyId));
+    setMessage('');
+  }, [activeChat.buddyId]);
+
   // when the message list is updated we clear the message field and stop loading
   useEffect(() => {
     if (isLoadingSentMessage) {
       setMessage('');
       setIsLoadingSentMessage(false);
     }
-  }, [chat.messages]);
+  }, [activeChat.messages]);
 
   return (
-    chat && (
+    activeChat && (
       <Container isTablet={isTablet}>
-        <Header chat={chat} />
+        <Header chat={activeChat} />
         <MessageList
-          messageList={chat.messages}
-          buddyId={chat.buddyId}
-          status={chat.status}
+          messageList={activeChat.messages}
+          buddyId={activeChat.buddyId}
+          status={activeChat.status}
           isLoading={isLoadingBuddyMessages}
         />
-        {chat.status === 'ok' && (
+        {activeChat.status === 'ok' && (
           <MessageField
             handleSend={handleMessageSend}
             isInputDisabled={isLoadingSentMessage}

diff --git a/src/features/Chat/selectors.ts b/src/features/Chat/selectors.ts
@@ -68,24 +68,24 @@ export const selectOngoingChatsExist = createSelector(
 
 export const selectActiveChat = createSelector(
   selectChatState,
-  ({ activeChatId, chats }) => (activeChatId ? chats[activeChatId] : null),
+  ({ activeChatId, chats }) => {
+    if (activeChatId) return chats[activeChatId];
+
+    // Returns most recent unread chat, or the most recent if all are read
+    const unreadChats = Object.values(chats).filter(chat => {
+      if (chat.status !== 'ok') return false;
+      return chat.messages.some(message => !message.opened);
+    });
+
+    return unreadChats[0] ?? Object.values(chats)[0];
+  },
 );
 
 export const selectActiveChatExists = createSelector(
   selectChatState,
   ({ activeChatId, chats }) => Boolean(activeChatId && chats[activeChatId]),
 );
 
-// Returns most recent unread chat, or the most recent if all are read
-export const selectDefaultChat = createSelector(selectChats, chats => {
-  const unreadChats = chats.filter(chat => {
-    if (chat.status !== 'ok') return false;
-    return chat.messages.some(message => !message.opened);
-  });
-
-  return unreadChats[0] ?? chats[0];
-});
-
 export const selectBuddyMessages = (buddyId: string) =>
   createSelector(
     selectChatState,