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