From 322fa868798081e79435715447bc952e100bdd44 Mon Sep 17 00:00:00 2001
From: nflnkr <molohov.eugeny@yandex.ru>
Date: Wed, 29 Mar 2023 15:51:36 +0300
Subject: [PATCH] refactor

---
 .../dashboard/Content/Support/Chat/Chat.tsx   | 151 ++++++++++--------
 1 file changed, 80 insertions(+), 71 deletions(-)

diff --git a/src/pages/dashboard/Content/Support/Chat/Chat.tsx b/src/pages/dashboard/Content/Support/Chat/Chat.tsx
index 46d8df3..cfcbc9e 100644
--- a/src/pages/dashboard/Content/Support/Chat/Chat.tsx
+++ b/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,70 +128,79 @@ export default function Chat() {
             display: "flex",
             flex: upMd ? "2 0 0" : undefined,
             flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
             gap: "8px",
         }}>
-            <Box
-                ref={chatBoxRef}
-                sx={{
-                    backgroundColor: "#46474a",
-                    flexGrow: 1,
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: "12px",
-                    p: "8px",
-                    overflow: "auto",
-                    colorScheme: "dark",
-                }}
-            >
-                {ticket && sortedMessages.map(message =>
-                    <Message key={message.id} message={message} isSelf={ticket.user !== message.user_id} />
-                )}
-            </Box>
-            <TextField
-                value={messageField}
-                onChange={e => setMessageField(e.target.value)}
-                onKeyPress={handleTextfieldKeyPress}
-                id="message-input"
-                placeholder="Написать сообщение"
-                fullWidth
-                multiline
-                maxRows={8}
-                InputProps={{
-                    style: {
-                        backgroundColor: theme.palette.content.main,
-                        color: theme.palette.secondary.main,
-                    },
-                    endAdornment: (
-                        <InputAdornment position="end">
-                            <IconButton
-                                onClick={handleSendMessage}
-                                sx={{
-                                    height: "45px",
-                                    width: "45px",
-                                    p: 0,
-                                }}
-                            >
-                                <SendIcon sx={{ color: theme.palette.golden.main }} />
-                            </IconButton>
-                            <IconButton
-                                onClick={handleAddAttachment}
-                                sx={{
-                                    height: "45px",
-                                    width: "45px",
-                                    p: 0,
-                                }}
-                            >
-                                <AttachFileIcon sx={{ color: theme.palette.golden.main }} />
-                            </IconButton>
-                        </InputAdornment>
-                    )
-                }}
-                InputLabelProps={{
-                    style: {
-                        color: theme.palette.secondary.main,
-                    }
-                }}
-            />
+            {ticket ?
+                <>
+                    <Typography>{ticket.title}</Typography>
+                    <Box
+                        ref={chatBoxRef}
+                        sx={{
+                            width: "100%",
+                            backgroundColor: "#46474a",
+                            flexGrow: 1,
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: "12px",
+                            p: "8px",
+                            overflow: "auto",
+                            colorScheme: "dark",
+                        }}
+                    >
+                        {sortedMessages.map(message =>
+                            <Message key={message.id} message={message} isSelf={ticket.user !== message.user_id} />
+                        )}
+                    </Box>
+                    <TextField
+                        value={messageField}
+                        onChange={e => setMessageField(e.target.value)}
+                        onKeyPress={handleTextfieldKeyPress}
+                        id="message-input"
+                        placeholder="Написать сообщение"
+                        fullWidth
+                        multiline
+                        maxRows={8}
+                        InputProps={{
+                            style: {
+                                backgroundColor: theme.palette.content.main,
+                                color: theme.palette.secondary.main,
+                            },
+                            endAdornment: (
+                                <InputAdornment position="end">
+                                    <IconButton
+                                        onClick={handleSendMessage}
+                                        sx={{
+                                            height: "45px",
+                                            width: "45px",
+                                            p: 0,
+                                        }}
+                                    >
+                                        <SendIcon sx={{ color: theme.palette.golden.main }} />
+                                    </IconButton>
+                                    <IconButton
+                                        onClick={handleAddAttachment}
+                                        sx={{
+                                            height: "45px",
+                                            width: "45px",
+                                            p: 0,
+                                        }}
+                                    >
+                                        <AttachFileIcon sx={{ color: theme.palette.golden.main }} />
+                                    </IconButton>
+                                </InputAdornment>
+                            )
+                        }}
+                        InputLabelProps={{
+                            style: {
+                                color: theme.palette.secondary.main,
+                            }
+                        }}
+                    />
+                </>
+                :
+                <Typography>Выберите тикет</Typography>}
         </Box>
     );
 }