adminFront/src/pages/dashboard/Content/Support/Support.tsx

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