123 lines
3.4 KiB
JavaScript
123 lines
3.4 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import { useParams, useHistory } from "react-router-dom";
|
|
|
|
import { toast } from "react-toastify";
|
|
import openSocket from "socket.io-client";
|
|
import clsx from "clsx";
|
|
|
|
import ContactDrawer from "../ContactDrawer";
|
|
import MessageInput from "../MessageInput";
|
|
import TicketHeader from "../TicketHeader";
|
|
import TicketInfo from "../TicketInfo";
|
|
import TicketActionButtons from "../TicketActionButtons";
|
|
import MessagesList from "../MessagesList";
|
|
import api from "../../services/api";
|
|
import { ReplyMessageProvider } from "../../context/ReplyingMessage/ReplyingMessageContext";
|
|
import toastError from "../../errors/toastError";
|
|
|
|
const Ticket = () => {
|
|
const { ticketId } = useParams();
|
|
const history = useHistory();
|
|
|
|
const [drawerOpen, setDrawerOpen] = useState(false);
|
|
const [loading, setLoading] = useState(true);
|
|
const [contact, setContact] = useState({});
|
|
const [ticket, setTicket] = useState({});
|
|
|
|
const [statusChatEnd, setStatusChatEnd] = useState({});
|
|
|
|
useEffect(() => {
|
|
setLoading(true);
|
|
const delayDebounceFn = setTimeout(() => {
|
|
const fetchTicket = async () => {
|
|
try {
|
|
const { data } = await api.get("/tickets/" + ticketId);
|
|
|
|
setContact(data.contact.contact);
|
|
setTicket(data.contact);
|
|
|
|
setStatusChatEnd(data.statusChatEnd);
|
|
|
|
setLoading(false);
|
|
} catch (err) {
|
|
setLoading(false);
|
|
toastError(err);
|
|
}
|
|
};
|
|
fetchTicket();
|
|
}, 500);
|
|
return () => clearTimeout(delayDebounceFn);
|
|
}, [ticketId, history]);
|
|
|
|
useEffect(() => {
|
|
const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
|
|
|
|
socket.on("connect", () => socket.emit("joinChatBox", ticketId));
|
|
|
|
socket.on("ticket", (data) => {
|
|
if (data.action === "update") {
|
|
setTicket(data.ticket);
|
|
}
|
|
|
|
if (data.action === "delete") {
|
|
toast.success("Ticket deleted sucessfully.");
|
|
history.push("/tickets");
|
|
}
|
|
});
|
|
|
|
socket.on("contact", (data) => {
|
|
if (data.action === "update") {
|
|
setContact((prevState) => {
|
|
if (prevState.id === data.contact?.id) {
|
|
return { ...prevState, ...data.contact };
|
|
}
|
|
return prevState;
|
|
});
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
socket.disconnect();
|
|
};
|
|
}, [ticketId, history]);
|
|
|
|
const handleDrawerOpen = () => {
|
|
setDrawerOpen(true);
|
|
};
|
|
|
|
const handleDrawerClose = () => {
|
|
setDrawerOpen(false);
|
|
};
|
|
|
|
const style ={
|
|
height: "fit-content",
|
|
width: "100%",
|
|
position: "relative",
|
|
}
|
|
return (
|
|
<div className="test" style={style} >
|
|
<TicketHeader loading={loading}>
|
|
<div>
|
|
<TicketInfo contact={contact} ticket={ticket} onClick={handleDrawerOpen} />
|
|
</div>
|
|
<div>
|
|
<TicketActionButtons ticket={ticket} statusChatEnd={statusChatEnd} />
|
|
</div>
|
|
</TicketHeader>
|
|
<ReplyMessageProvider>
|
|
<MessagesList ticketId={ticketId} isGroup={ticket.isGroup}></MessagesList>
|
|
<MessageInput ticketStatus={ticket.status} />
|
|
</ReplyMessageProvider>
|
|
|
|
<ContactDrawer
|
|
open={drawerOpen}
|
|
handleDrawerClose={handleDrawerClose}
|
|
contact={contact}
|
|
loading={loading}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Ticket;
|