improvement: start spliting "MessagesList" in multiple components

frontend/src/components/TicketActionButtons/index.js

@@ -0,0 +1,113 @@
+import React, { useState } from "react";
+import { useHistory } from "react-router-dom";
+import { toast } from "react-toastify";
+
+import { makeStyles } from "@material-ui/core/styles";
+import { Button, IconButton } from "@material-ui/core";
+import { MoreVert, Replay } from "@material-ui/icons";
+
+import { i18n } from "../../translate/i18n";
+import api from "../../services/api";
+import TicketOptionsMenu from "../TicketOptionsMenu";
+
+const useStyles = makeStyles(theme => ({
+	actionButtons: {
+		marginRight: 6,
+		flex: "none",
+		alignSelf: "center",
+		marginLeft: "auto",
+		"& > *": {
+			margin: theme.spacing(1),
+		},
+	},
+}));
+
+const TicketActionButtons = ({ ticket }) => {
+	const classes = useStyles();
+	const history = useHistory();
+	const userId = +localStorage.getItem("userId");
+	const [anchorEl, setAnchorEl] = useState(null);
+	const ticketOptionsMenuOpen = Boolean(anchorEl);
+
+	const handleOpenTicketOptionsMenu = e => {
+		setAnchorEl(e.currentTarget);
+	};
+
+	const handleCloseTicketOptionsMenu = e => {
+		setAnchorEl(null);
+	};
+
+	const handleUpdateTicketStatus = async (e, status, userId) => {
+		try {
+			await api.put(`/tickets/${ticket.id}`, {
+				status: status,
+				userId: userId || null,
+			});
+
+			if (status === "open") {
+				history.push(`/tickets/${ticket.id}`);
+			} else {
+				history.push("/tickets");
+			}
+		} catch (err) {
+			console.log(err);
+			if (err.response && err.response.data && err.response.data.error) {
+				toast.error(err.response.data.error);
+			}
+		}
+	};
+
+	return (
+		<div className={classes.actionButtons}>
+			{ticket.status === "closed" && (
+				<Button
+					startIcon={<Replay />}
+					size="small"
+					onClick={e => handleUpdateTicketStatus(e, "open", userId)}
+				>
+					{i18n.t("messagesList.header.buttons.reopen")}
+				</Button>
+			)}
+			{ticket.status === "open" && (
+				<>
+					<Button
+						startIcon={<Replay />}
+						size="small"
+						onClick={e => handleUpdateTicketStatus(e, "pending", null)}
+					>
+						{i18n.t("messagesList.header.buttons.return")}
+					</Button>
+					<Button
+						size="small"
+						variant="contained"
+						color="primary"
+						onClick={e => handleUpdateTicketStatus(e, "closed", userId)}
+					>
+						{i18n.t("messagesList.header.buttons.resolve")}
+					</Button>
+					<IconButton onClick={handleOpenTicketOptionsMenu}>
+						<MoreVert />
+					</IconButton>
+					<TicketOptionsMenu
+						ticket={ticket}
+						anchorEl={anchorEl}
+						menuOpen={ticketOptionsMenuOpen}
+						handleClose={handleCloseTicketOptionsMenu}
+					/>
+				</>
+			)}
+			{ticket.status === "pending" && (
+				<Button
+					size="small"
+					variant="contained"
+					color="primary"
+					onClick={e => handleUpdateTicketStatus(e, "open", userId)}
+				>
+					ACCEPT
+				</Button>
+			)}
+		</div>
+	);
+};
+
+export default TicketActionButtons;