refactor

src/pages/dashboard/Content/Support/Chat/Chat.tsx

@@ -1,5 +1,5 @@
 import { Box, IconButton, InputAdornment, TextField, Typography, useMediaQuery, useTheme } from "@mui/material";
-import { addOrUpdateMessage, setMessages, useMessageStore } from "@root/stores/messages";
+import { addOrUpdateMessages, clearMessages, setMessages, useMessageStore } from "@root/stores/messages";
 import Message from "./Message";
 import SendIcon from "@mui/icons-material/Send";
 import AttachFileIcon from "@mui/icons-material/AttachFile";
@@ -27,17 +27,15 @@ export default function Chat() {
     }, [messages]);
 
     useEffect(function fetchTicketMessages() {
-        if (!ticket) return;
+        if (!ticketId) return;
 
         const getTicketsBody: GetMessagesRequest = {
             amt: 100, // TODO use pagination
             page: 0,
-            srch: "",
-            ticket: ticket.id,
+            ticket: ticketId,
         };
         const controller = new AbortController();
 
-        setMessages([]);
         getTicketMessages({
             body: getTicketsBody,
             signal: controller.signal,
@@ -49,23 +47,26 @@ export default function Chat() {
             enqueueSnackbar(error.message);
         });
 
-        return () => controller.abort();
-    }, [ticket]);
+        return () => {
+            controller.abort();
+            clearMessages();
+        };
+    }, [ticketId]);
 
     useEffect(function subscribeToMessages() {
-        if (!ticket) return;
+        if (!ticketId) return;
 
         const token = localStorage.getItem("AT");
         if (!token) return;
 
         const unsubscribe = subscribeToTicketMessages({
-            ticketId: ticket.id,
+            ticketId,
             accessToken: token,
             onMessage(event) {
                 try {
                     const newMessage = JSON.parse(event.data) as TicketMessage;
                     console.log("SSE: parsed newMessage:", newMessage);
-                    addOrUpdateMessage([newMessage]);
+                    addOrUpdateMessages([newMessage]);
                 } catch (error) {
                     console.log("SSE: couldn't parse:", event.data);
                     console.log("Error parsing message SSE", error);
@@ -79,7 +80,7 @@ export default function Chat() {
         return () => {
             unsubscribe();
         };
-    }, [ticket]);
+    }, [ticketId]);
 
     function scrollToBottom() {
         if (!chatBoxRef.current) return;

src/pages/dashboard/Content/Support/Support.tsx

@@ -5,8 +5,9 @@ import Collapse from "./Collapse";
 import TicketList from "./TicketList/TicketList";
 import { getTickets, subscribeToAllTickets } from "@root/api/tickets";
 import { GetTicketsRequest, Ticket } from "@root/model/ticket";
-import { updateTickets } from "@root/stores/tickets";
+import { clearTickets, updateTickets } from "@root/stores/tickets";
 import { enqueueSnackbar } from "notistack";
+import { clearMessages } from "@root/stores/messages";
 
 
 const TICKETS_PER_PAGE = 20;
@@ -66,6 +67,8 @@ export default function Support() {
 
         return () => {
             unsubscribe();
+            clearMessages();
+            clearTickets();
         };
     }, []);
 

src/stores/messages.ts

@@ -14,18 +14,20 @@ export const useMessageStore = create<MessageStore>()(
             messages: testMessages,
         }),
         {
-            name: "Message store"
+            name: "Message store (admin)"
         }
     )
 );
 
 export const setMessages = (messages: TicketMessage[]) => useMessageStore.setState(({ messages }));
 
-export const addOrUpdateMessage = (receivedMessages: TicketMessage[]) => {
+export const addOrUpdateMessages = (receivedMessages: TicketMessage[]) => {
     const state = useMessageStore.getState();
     const messageIdToMessageMap: { [messageId: string]: TicketMessage; } = {};
 
     [...state.messages, ...receivedMessages].forEach(message => messageIdToMessageMap[message.id] = message);
 
     useMessageStore.setState({ messages: Object.values(messageIdToMessageMap) });
-};
+};
+
+export const clearMessages = () => useMessageStore.setState({ messages: [] });

src/stores/tickets.ts

@@ -13,7 +13,7 @@ export const useTicketStore = create<TicketStore>()(
             tickets: [],
         }),
         {
-            name: "Tickets store"
+            name: "Tickets store (admin)"
         }
     )
 );
@@ -25,4 +25,6 @@ export const updateTickets = (receivedTickets: Ticket[]) => {
     [...state.tickets, ...receivedTickets].forEach(ticket => ticketIdToTicketMap[ticket.id] = ticket);
 
     useTicketStore.setState({ tickets: Object.values(ticketIdToTicketMap) });
-};
+};
+
+export const clearTickets = () => useTicketStore.setState({ tickets: [] });