90 lines
3.0 KiB
TypeScript
90 lines
3.0 KiB
TypeScript
import { Box, useMediaQuery, useTheme } from "@mui/material";
|
|
import { useEffect } from "react";
|
|
import Chat from "./Chat/Chat";
|
|
import Collapse from "./Collapse";
|
|
import TicketList from "./TicketList/TicketList";
|
|
import { getTickets, subscribeToAllTickets } from "@root/api/tickets";
|
|
import { GetTicketsRequest, Ticket } from "@root/model/ticket";
|
|
import { clearTickets, setTicketsFetchState, updateTickets, useTicketStore } from "@root/stores/tickets";
|
|
import { enqueueSnackbar } from "notistack";
|
|
import {clearMessageState } from "@root/stores/messages";
|
|
import { authStore } from "@root/stores/auth";
|
|
|
|
|
|
export default function Support() {
|
|
const theme = useTheme();
|
|
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
|
const ticketsPerPage = useTicketStore(state => state.ticketsPerPage);
|
|
const ticketApiPage = useTicketStore(state => state.apiPage);
|
|
const { token } = authStore();
|
|
|
|
useEffect(function fetchTickets() {
|
|
const getTicketsBody: GetTicketsRequest = {
|
|
amt: ticketsPerPage,
|
|
page: ticketApiPage,
|
|
status: "open",
|
|
};
|
|
const controller = new AbortController();
|
|
|
|
setTicketsFetchState("fetching");
|
|
getTickets({
|
|
body: getTicketsBody,
|
|
signal: controller.signal,
|
|
}).then(result => {
|
|
console.log("GetTicketsResponse", result);
|
|
if (result.data) {
|
|
updateTickets(result.data);
|
|
setTicketsFetchState("idle");
|
|
} else setTicketsFetchState("all fetched");
|
|
}).catch(error => {
|
|
console.log("Error fetching tickets", error);
|
|
enqueueSnackbar(error.message);
|
|
});
|
|
|
|
return () => controller.abort();
|
|
}, [ticketApiPage, ticketsPerPage]);
|
|
|
|
useEffect(function subscribeToTickets() {
|
|
if (!token) return;
|
|
|
|
const unsubscribe = subscribeToAllTickets({
|
|
accessToken: token,
|
|
onMessage(event) {
|
|
try {
|
|
const newTicket = JSON.parse(event.data) as Ticket;
|
|
console.log("SSE: parsed newTicket:", newTicket);
|
|
updateTickets([newTicket]);
|
|
} catch (error) {
|
|
console.log("SSE: couldn't parse:", event.data);
|
|
console.log("Error parsing ticket SSE", error);
|
|
}
|
|
},
|
|
onError(event) {
|
|
console.log("SSE Error:", event);
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
unsubscribe();
|
|
clearMessageState();
|
|
clearTickets();
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<Box sx={{
|
|
display: "flex",
|
|
width: "100%",
|
|
flexDirection: upMd ? "row" : "column",
|
|
gap: "12px",
|
|
}}>
|
|
{!upMd &&
|
|
<Collapse headerText="Тикеты">
|
|
<TicketList />
|
|
</Collapse>
|
|
}
|
|
<Chat />
|
|
{upMd && <TicketList />}
|
|
</Box>
|
|
);
|
|
} |