diff --git a/src/pages/dashboard/Content/Support/Chat/Chat.tsx b/src/pages/dashboard/Content/Support/Chat/Chat.tsx index cfcbc9e..3d8ad17 100644 --- a/src/pages/dashboard/Content/Support/Chat/Chat.tsx +++ b/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; diff --git a/src/pages/dashboard/Content/Support/Support.tsx b/src/pages/dashboard/Content/Support/Support.tsx index ae8f428..361dfc9 100644 --- a/src/pages/dashboard/Content/Support/Support.tsx +++ b/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(); }; }, []); diff --git a/src/stores/messages.ts b/src/stores/messages.ts index 6ba13f4..bffbee9 100644 --- a/src/stores/messages.ts +++ b/src/stores/messages.ts @@ -14,18 +14,20 @@ export const useMessageStore = create()( 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) }); -}; \ No newline at end of file +}; + +export const clearMessages = () => useMessageStore.setState({ messages: [] }); \ No newline at end of file diff --git a/src/stores/tickets.ts b/src/stores/tickets.ts index 9b9e558..e3a07cf 100644 --- a/src/stores/tickets.ts +++ b/src/stores/tickets.ts @@ -13,7 +13,7 @@ export const useTicketStore = create()( 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) }); -}; \ No newline at end of file +}; + +export const clearTickets = () => useTicketStore.setState({ tickets: [] }); \ No newline at end of file