refactor

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

@@ -1,4 +1,4 @@
-import { Box, IconButton, InputAdornment, TextField, useMediaQuery, useTheme } from "@mui/material";
+import { Box, IconButton, InputAdornment, TextField, Typography, useMediaQuery, useTheme } from "@mui/material";
 import { addOrUpdateMessage, setMessages, useMessageStore } from "@root/stores/messages";
 import Message from "./Message";
 import SendIcon from "@mui/icons-material/Send";
@@ -27,13 +27,13 @@ export default function Chat() {
     }, [messages]);
 
     useEffect(function fetchTicketMessages() {
-        if (!ticketId) return;
+        if (!ticket) return;
 
         const getTicketsBody: GetMessagesRequest = {
             amt: 100, // TODO use pagination
             page: 0,
             srch: "",
-            ticket: ticketId,
+            ticket: ticket.id,
         };
         const controller = new AbortController();
 
@@ -50,16 +50,16 @@ export default function Chat() {
         });
 
         return () => controller.abort();
-    }, [ticketId]);
+    }, [ticket]);
 
     useEffect(function subscribeToMessages() {
-        if (!ticketId) return;
+        if (!ticket) return;
 
         const token = localStorage.getItem("AT");
         if (!token) return;
 
         const unsubscribe = subscribeToTicketMessages({
-            ticketId,
+            ticketId: ticket.id,
             accessToken: token,
             onMessage(event) {
                 try {
@@ -79,7 +79,7 @@ export default function Chat() {
         return () => {
             unsubscribe();
         };
-    }, [ticketId]);
+    }, [ticket]);
 
     function scrollToBottom() {
         if (!chatBoxRef.current) return;
@@ -92,14 +92,14 @@ export default function Chat() {
     }
 
     function handleSendMessage() {
-        if (!ticketId || !messageField) return;
+        if (!ticket || !messageField) return;
 
         sendTicketMessage({
             body: {
                 files: [],
                 lang: "ru",
                 message: messageField,
-                ticket: ticketId,
+                ticket: ticket.id,
             }
         });
         setMessageField("");
@@ -128,11 +128,17 @@ export default function Chat() {
             display: "flex",
             flex: upMd ? "2 0 0" : undefined,
             flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
             gap: "8px",
         }}>
+            {ticket ?
+                <>
+                    <Typography>{ticket.title}</Typography>
                     <Box
                         ref={chatBoxRef}
                         sx={{
+                            width: "100%",
                             backgroundColor: "#46474a",
                             flexGrow: 1,
                             display: "flex",
@@ -143,7 +149,7 @@ export default function Chat() {
                             colorScheme: "dark",
                         }}
                     >
-                {ticket && sortedMessages.map(message =>
+                        {sortedMessages.map(message =>
                             <Message key={message.id} message={message} isSelf={ticket.user !== message.user_id} />
                         )}
                     </Box>
@@ -192,6 +198,9 @@ export default function Chat() {
                             }
                         }}
                     />
+                </>
+                :
+                <Typography>Выберите тикет</Typography>}
         </Box>
     );
 }