83 lines
2.4 KiB
TypeScript
83 lines
2.4 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
import { Box, useMediaQuery, useTheme } from "@mui/material";
|
|
import Chat from "./Chat/Chat";
|
|
import Collapse from "./Collapse";
|
|
import TicketList from "./TicketList/TicketList";
|
|
import { 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 { getMessageFromFetchError, useSSESubscription, useTicketsFetcher, useToken } from "@frontend/kitui";
|
|
import ModalUser from "@root/pages/dashboard/ModalUser";
|
|
|
|
export default function Support() {
|
|
const [openUserModal, setOpenUserModal] = useState<boolean>(false);
|
|
const [activeUserId, setActiveUserId] = useState<string>("");
|
|
const theme = useTheme();
|
|
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
|
const ticketsPerPage = useTicketStore((state) => state.ticketsPerPage);
|
|
const ticketApiPage = useTicketStore((state) => state.apiPage);
|
|
const token = useToken();
|
|
|
|
useTicketsFetcher({
|
|
url: process.env.REACT_APP_DOMAIN + "/heruvym/getTickets",
|
|
ticketsPerPage,
|
|
ticketApiPage,
|
|
onSuccess: (result) => {
|
|
if (result.data) updateTickets(result.data);
|
|
},
|
|
onError: (error: Error) => {
|
|
const message = getMessageFromFetchError(error);
|
|
if (message) enqueueSnackbar(message);
|
|
},
|
|
onFetchStateChange: setTicketsFetchState,
|
|
});
|
|
|
|
useSSESubscription<Ticket>({
|
|
enabled: Boolean(token),
|
|
url: process.env.REACT_APP_DOMAIN + `/heruvym/subscribe?Authorization=${token}`,
|
|
onNewData: updateTickets,
|
|
onDisconnect: () => {
|
|
clearMessageState();
|
|
clearTickets();
|
|
},
|
|
marker: "ticket",
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (!openUserModal) {
|
|
setActiveUserId("");
|
|
}
|
|
}, [openUserModal]);
|
|
|
|
useEffect(() => {
|
|
if (activeUserId) {
|
|
setOpenUserModal(true);
|
|
|
|
return;
|
|
}
|
|
|
|
setOpenUserModal(false);
|
|
}, [activeUserId]);
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
width: "100%",
|
|
flexDirection: upMd ? "row" : "column",
|
|
gap: "12px",
|
|
}}
|
|
>
|
|
{!upMd && (
|
|
<Collapse headerText="Тикеты">
|
|
{(closeCollapse) => <TicketList closeCollapse={closeCollapse} setActiveUserId={setActiveUserId} />}
|
|
</Collapse>
|
|
)}
|
|
<Chat />
|
|
{upMd && <TicketList setActiveUserId={setActiveUserId} />}
|
|
<ModalUser open={openUserModal} onClose={() => setOpenUserModal(false)} userId={activeUserId} />
|
|
</Box>
|
|
);
|
|
}
|