sort chat messages in redux

mentorpal · May 2, 2024 · ab2223f · ab2223f
1 parent 90b1610
commit ab2223f
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 36 deletions.
diff --git a/client/src/components/chat/chat.tsx b/client/src/components/chat/chat.tsx
@@ -101,32 +101,7 @@ function Chat(props: {
     }, {});
   });
 
-  const lastQuestionCounter = useSelector<State, number>(
-    (s) => s.chat.lastQuestionCounter || s.questionsAsked.length + 1
-  );
-
-  const _chatData = useSelector<State, ChatData>((s) => s.chat);
-  const chatData = sortChatData(_chatData);
-
-  function sortChatData(_chatData: ChatData): ChatData {
-    const chatData: ChatData = JSON.parse(JSON.stringify(_chatData));
-    // get last answers
-    const lastAnswers = chatData.messages.filter((m) => {
-      return m.questionCounter === lastQuestionCounter && !m.isUser;
-    });
-    // sort last answers by timestampAnswered
-    const answersSorted = lastAnswers.sort((a, b) =>
-      String(a.timestampAnswered).localeCompare(String(b.timestampAnswered))
-    );
-
-    // replace last answers with sorted answers
-    chatData.messages.splice(
-      chatData.messages.length - Object.keys(answersSorted).length,
-      chatData.messages.length
-    );
-    chatData.messages.push(...answersSorted);
-    return chatData;
-  }
+  const chatData = useSelector<State, ChatData>((s) => s.chat);
 
   function isQuestionsAnswersVisible(
     questionId: string,

diff --git a/client/src/store/reducer.ts b/client/src/store/reducer.ts
@@ -73,6 +73,7 @@ import {
   DisplaySurveyPopupCondition,
   ResultStatus,
   MentorDataResult,
+  ChatMsg,
 } from "types";
 import { getUtterance } from "api";
 import { v4 as uuid } from "uuid";
@@ -574,24 +575,51 @@ function findAskLinks(text: string): AskLink[] {
   return askLinks;
 }
 
+function sortChatMessages(
+  _msgs: ChatMsg[],
+  lastQuestionCounter: number
+): ChatMsg[] {
+  const msgs: ChatMsg[] = JSON.parse(JSON.stringify(_msgs));
+  // get last answers
+  const lastAnswers = msgs.filter((m) => {
+    return m.questionCounter === lastQuestionCounter && !m.isUser;
+  });
+  // sort last answers by timestampAnswered
+  const answersSorted = lastAnswers.sort((a, b) =>
+    String(a.timestampAnswered).localeCompare(String(b.timestampAnswered))
+  );
+
+  // replace last answers with sorted answers
+  msgs.splice(msgs.length - Object.keys(answersSorted).length, msgs.length);
+  msgs.push(...answersSorted);
+  return msgs;
+}
+
 function onMentorDisplayAnswer(
   state: State,
   action: VideoFinishedAction
 ): State {
+  const _newMessages: ChatMsg[] = JSON.parse(
+    JSON.stringify(state.chat.messages)
+  );
+  const newMessages = _newMessages.map((m) => {
+    return m.isVideoInProgress !== action.payload.isVideoInProgress &&
+      m.mentorId === action.payload.curMentor
+      ? {
+          ...m,
+          isVideoInProgress: action.payload.isVideoInProgress,
+          timestampAnswered: action.payload.timestampAnswered,
+        }
+      : m;
+  });
+  const lastQuestionCounter =
+    state.chat.lastQuestionCounter || state.questionsAsked.length + 1;
+  const sortedMessages = sortChatMessages(newMessages, lastQuestionCounter);
   return {
     ...state,
     chat: {
       ...state.chat,
-      messages: state.chat.messages.map((m) => {
-        return m.isVideoInProgress !== action.payload.isVideoInProgress &&
-          m.mentorId === action.payload.curMentor
-          ? {
-              ...m,
-              isVideoInProgress: action.payload.isVideoInProgress,
-              timestampAnswered: action.payload.timestampAnswered,
-            }
-          : m;
-      }),
+      messages: sortedMessages,
     },
   };
 }