PenaSide/adminFront
3
0
Fork 0
Code Issues 2 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor

Browse Source
This commit is contained in:
nflnkr 2023-03-29 15:51:36 +03:00
parent d1d6a840ff
commit 322fa86879
1 changed files with 80 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/pages/dashboard/Content/Support/Chat/Chat.tsx
View File

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