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

151
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 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>
);
}