feat: added delete tickets option

frontend/src/components/MessagesList/TicketOptionsMenu.js

@@ -0,0 +1,73 @@
+import React, { useState } from "react";
+
+import { useHistory } from "react-router-dom";
+import { toast } from "react-toastify";
+
+import MenuItem from "@material-ui/core/MenuItem";
+import Menu from "@material-ui/core/Menu";
+
+import api from "../../services/api";
+import ConfirmationModal from "../ConfirmationModal";
+
+const TicketOptionsMenu = ({ ticket, menuOpen, handleClose, anchorEl }) => {
+	const history = useHistory();
+
+	const [confirmationOpen, setConfirmationOpen] = useState(false);
+
+	const handleDeleteTicket = async () => {
+		try {
+			await api.delete(`/tickets/${ticket.id}`);
+			toast.success("Ticket deletado com sucesso.");
+			history.push("/chat");
+		} catch (err) {
+			toast.error("Erro ao deletar o ticket");
+		}
+
+		console.log("deleted");
+		handleClose();
+	};
+
+	const handleTransferTicket = e => {
+		console.log("transfered");
+		handleClose();
+	};
+
+	const handleOpenConfirmationModal = e => {
+		setConfirmationOpen(true);
+		handleClose();
+	};
+
+	console.log(ticket);
+	return (
+		<>
+			<Menu
+				id="menu-appbar"
+				anchorEl={anchorEl}
+				anchorOrigin={{
+					vertical: "top",
+					horizontal: "right",
+				}}
+				keepMounted
+				transformOrigin={{
+					vertical: "top",
+					horizontal: "right",
+				}}
+				open={menuOpen}
+				onClose={handleClose}
+			>
+				<MenuItem onClick={handleOpenConfirmationModal}>Deletar</MenuItem>
+				<MenuItem onClick={handleTransferTicket}>Transferir</MenuItem>
+			</Menu>
+			<ConfirmationModal
+				title={`Deletar o ticket #${ticket.id} do contato ${ticket.contact.name}?`}
+				open={confirmationOpen}
+				setOpen={setConfirmationOpen}
+				onConfirm={handleDeleteTicket}
+			>
+				Atenção, todas as mensagens relacionadas a este ticket serão apagadas.
+			</ConfirmationModal>
+		</>
+	);
+};
+
+export default TicketOptionsMenu;

frontend/src/components/MessagesList/index.js

@@ -20,12 +20,15 @@ import Button from "@material-ui/core/Button";
 import Paper from "@material-ui/core/Paper";
 import { green } from "@material-ui/core/colors";
 import Skeleton from "@material-ui/lab/Skeleton";
+import IconButton from "@material-ui/core/IconButton";
+import MoreVertIcon from "@material-ui/icons/MoreVert";
 
 import api from "../../services/api";
 import ContactDrawer from "../ContactDrawer";
 import whatsBackground from "../../assets/wa-background.png";
 import LinkifyWithTargetBlank from "../LinkifyWithTargetBlank";
 import MessageInput from "../MessageInput/";
+import TicketOptionsMenu from "./TicketOptionsMenu";
 
 const drawerWidth = 320;
 
@@ -65,7 +68,7 @@ const useStyles = makeStyles(theme => ({
 
 	messagesHeader: {
 		display: "flex",
-		cursor: "pointer",
+		// cursor: "pointer",
 		backgroundColor: "#eee",
 		flex: "none",
 		borderBottom: "1px solid rgba(0, 0, 0, 0.12)",
@@ -233,6 +236,9 @@ const MessagesList = () => {
 	const [drawerOpen, setDrawerOpen] = useState(false);
 	const lastMessageRef = useRef();
 
+	const [anchorEl, setAnchorEl] = useState(null);
+	const moreMenuOpen = Boolean(anchorEl);
+
 	useEffect(() => {
 		setMessagesList([]);
 	}, [searchParam]);
@@ -366,9 +372,15 @@ const MessagesList = () => {
 		}
 	};
 
+	const handleOpenTicketOptionsMenu = e => {
+		setAnchorEl(e.currentTarget);
+	};
+
+	const handleCloseTicketOptionsMenu = e => {
+		setAnchorEl(null);
+	};
+
 	const handleUpdateTicketStatus = async (e, status, userId) => {
-		e.preventDefault();
-		e.stopPropagation();
 		try {
 			await api.put(`/tickets/${ticketId}`, {
 				status: status,
@@ -380,6 +392,14 @@ const MessagesList = () => {
 		history.push("/chat");
 	};
 
+	const handleDrawerOpen = () => {
+		setDrawerOpen(true);
+	};
+
+	const handleDrawerClose = () => {
+		setDrawerOpen(false);
+	};
+
 	const renderMessageAck = message => {
 		if (message.ack === 0) {
 			return <AccessTimeIcon fontSize="small" className={classes.ackIcons} />;
@@ -480,13 +500,6 @@ const MessagesList = () => {
 		}
 	};
 
-	const handleDrawerOpen = () => {
-		setDrawerOpen(true);
-	};
-	const handleDrawerClose = () => {
-		setDrawerOpen(false);
-	};
-
 	return (
 		<div className={classes.root} id="drawer-container">
 			<Paper
@@ -496,12 +509,10 @@ const MessagesList = () => {
 					[classes.mainWrapperShift]: drawerOpen,
 				})}
 			>
-				<Card
-					square
-					className={classes.messagesHeader}
-					onClick={handleDrawerOpen}
-				>
+				<Card square className={classes.messagesHeader}>
 					<CardHeader
+						onClick={handleDrawerOpen}
+						style={{ cursor: "pointer" }}
 						titleTypographyProps={{ noWrap: true }}
 						subheaderTypographyProps={{ noWrap: true }}
 						avatar={
@@ -557,6 +568,15 @@ const MessagesList = () => {
 									</Button>
 								</>
 							)}
+							<IconButton onClick={handleOpenTicketOptionsMenu}>
+								<MoreVertIcon />
+							</IconButton>
+							<TicketOptionsMenu
+								ticket={ticket}
+								anchorEl={anchorEl}
+								menuOpen={moreMenuOpen}
+								handleClose={handleCloseTicketOptionsMenu}
+							/>
 						</div>
 					)}
 				</Card>