improvement: better user feedback on clicking buttons

frontend/src/components/TicketActionButtons/index.js

@@ -3,12 +3,13 @@ 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 { 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";
+import ButtonWithSpinner from "../ButtonWithSpinner";
 
 const useStyles = makeStyles(theme => ({
 	actionButtons: {
@@ -27,6 +28,7 @@ const TicketActionButtons = ({ ticket }) => {
 	const history = useHistory();
 	const userId = +localStorage.getItem("userId");
 	const [anchorEl, setAnchorEl] = useState(null);
+	const [loading, setLoading] = useState(false);
 	const ticketOptionsMenuOpen = Boolean(anchorEl);
 
 	const handleOpenTicketOptionsMenu = e => {
@@ -38,18 +40,21 @@ const TicketActionButtons = ({ ticket }) => {
 	};
 
 	const handleUpdateTicketStatus = async (e, status, userId) => {
+		setLoading(true);
 		try {
 			await api.put(`/tickets/${ticket.id}`, {
 				status: status,
 				userId: userId || null,
 			});
 
+			setLoading(false);
 			if (status === "open") {
 				history.push(`/tickets/${ticket.id}`);
 			} else {
 				history.push("/tickets");
 			}
 		} catch (err) {
+			setLoading(false);
 			console.log(err);
 			if (err.response && err.response.data && err.response.data.error) {
 				toast.error(err.response.data.error);
@@ -60,31 +65,34 @@ const TicketActionButtons = ({ ticket }) => {
 	return (
 		<div className={classes.actionButtons}>
 			{ticket.status === "closed" && (
-				<Button
+				<ButtonWithSpinner
+					loading={loading}
 					startIcon={<Replay />}
 					size="small"
 					onClick={e => handleUpdateTicketStatus(e, "open", userId)}
 				>
 					{i18n.t("messagesList.header.buttons.reopen")}
-				</Button>
+				</ButtonWithSpinner>
 			)}
 			{ticket.status === "open" && (
 				<>
-					<Button
+					<ButtonWithSpinner
+						loading={loading}
 						startIcon={<Replay />}
 						size="small"
 						onClick={e => handleUpdateTicketStatus(e, "pending", null)}
 					>
 						{i18n.t("messagesList.header.buttons.return")}
-					</Button>
-					<Button
+					</ButtonWithSpinner>
+					<ButtonWithSpinner
+						loading={loading}
 						size="small"
 						variant="contained"
 						color="primary"
 						onClick={e => handleUpdateTicketStatus(e, "closed", userId)}
 					>
 						{i18n.t("messagesList.header.buttons.resolve")}
-					</Button>
+					</ButtonWithSpinner>
 					<IconButton onClick={handleOpenTicketOptionsMenu}>
 						<MoreVert />
 					</IconButton>
@@ -97,14 +105,15 @@ const TicketActionButtons = ({ ticket }) => {
 				</>
 			)}
 			{ticket.status === "pending" && (
-				<Button
+				<ButtonWithSpinner
+					loading={loading}
 					size="small"
 					variant="contained"
 					color="primary"
 					onClick={e => handleUpdateTicketStatus(e, "open", userId)}
 				>
 					{i18n.t("messagesList.header.buttons.accept")}
-				</Button>
+				</ButtonWithSpinner>
 			)}
 		</div>
 	);