improvement(style): better menus placement

frontend/src/components/MessageOptionsMenu/index.js

@@ -3,11 +3,11 @@ import React, { useState } from "react";
 import { toast } from "react-toastify";
 
 import MenuItem from "@material-ui/core/MenuItem";
-import Menu from "@material-ui/core/Menu";
 
 import { i18n } from "../../translate/i18n";
 import api from "../../services/api";
 import ConfirmationModal from "../ConfirmationModal";
+import { Popover } from "@material-ui/core";
 
 const MessageOptionsMenu = ({ messageId, menuOpen, handleClose, anchorEl }) => {
 	const [confirmationOpen, setConfirmationOpen] = useState(false);
@@ -44,13 +44,12 @@ const MessageOptionsMenu = ({ messageId, menuOpen, handleClose, anchorEl }) => {
 			>
 				{i18n.t("messageOptionsMenu.confirmationModal.message")}
 			</ConfirmationModal>
-			<Menu
+			<Popover
 				anchorEl={anchorEl}
 				anchorOrigin={{
-					vertical: "top",
+					vertical: "bottom",
 					horizontal: "right",
 				}}
-				keepMounted
 				transformOrigin={{
 					vertical: "top",
 					horizontal: "right",
@@ -62,7 +61,7 @@ const MessageOptionsMenu = ({ messageId, menuOpen, handleClose, anchorEl }) => {
 					{i18n.t("messageOptionsMenu.delete")}
 				</MenuItem>
 				<MenuItem disabled> {i18n.t("messageOptionsMenu.reply")}</MenuItem>
-			</Menu>
+			</Popover>
 		</>
 	);
 };

frontend/src/components/NotificationsPopOver/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useCallback, useEffect } from "react";
+import React, { useState, useRef, useEffect } from "react";
 
 import { useHistory } from "react-router-dom";
 import { format } from "date-fns";
@@ -100,41 +100,39 @@ const NotificationsPopOver = () => {
 					return [data.ticket, ...prevState];
 				});
 
-				if (
-					(ticketIdRef.current &&
-						data.message.ticketId === ticketIdRef.current &&
+				const shouldNotNotificate =
+					(data.message.ticketId === ticketIdRef.current &&
 						document.visibilityState === "visible") ||
 					(data.ticket.userId && data.ticket.userId !== userId) ||
-					data.ticket.isGroup
-				)
-					return;
-				else {
-					// show desktop notification
-					const { message, contact, ticket } = data;
-					const options = {
-						body: `${message.body} - ${format(new Date(), "HH:mm")}`,
-						icon: contact.profilePicUrl,
-						tag: ticket.id,
-					};
-					let notification = new Notification(
-						`${i18n.t("tickets.notification.message")} ${contact.name}`,
-						options
-					);
+					data.ticket.isGroup;
 
-					notification.onclick = function (event) {
-						event.preventDefault(); //
-						window.focus();
-						history.push(`/tickets/${ticket.id}`);
-					};
+				if (shouldNotNotificate) return;
 
-					document.addEventListener("visibilitychange", () => {
-						if (document.visibilityState === "visible") {
-							notification.close();
-						}
-					});
+				// show desktop notification
+				const { message, contact, ticket } = data;
+				const options = {
+					body: `${message.body} - ${format(new Date(), "HH:mm")}`,
+					icon: contact.profilePicUrl,
+					tag: ticket.id,
+				};
+				let notification = new Notification(
+					`${i18n.t("tickets.notification.message")} ${contact.name}`,
+					options
+				);
 
-					soundAlert.current.play();
-				}
+				notification.onclick = function (event) {
+					event.preventDefault(); //
+					window.focus();
+					history.push(`/tickets/${ticket.id}`);
+				};
+
+				document.addEventListener("visibilitychange", () => {
+					if (document.visibilityState === "visible") {
+						notification.close();
+					}
+				});
+
+				soundAlert.current.play();
 			}
 		});
 
@@ -143,13 +141,13 @@ const NotificationsPopOver = () => {
 		};
 	}, [history, userId]);
 
-	const handleClick = useCallback(() => {
-		setIsOpen(!isOpen);
-	}, [isOpen, setIsOpen]);
+	const handleClick = () => {
+		setIsOpen(prevState => !prevState);
+	};
 
-	const handleClickAway = useCallback(() => {
+	const handleClickAway = () => {
 		setIsOpen(false);
-	}, [setIsOpen]);
+	};
 
 	const NotificationTicket = ({ children }) => {
 		return <div onClick={handleClickAway}>{children}</div>;
@@ -173,7 +171,7 @@ const NotificationsPopOver = () => {
 				anchorEl={anchorEl.current}
 				anchorOrigin={{
 					vertical: "bottom",
-					horizontal: "left",
+					horizontal: "right",
 				}}
 				transformOrigin={{
 					vertical: "top",

frontend/src/components/_layout/index.js

@@ -21,6 +21,7 @@ import UserModal from "../UserModal";
 import { AuthContext } from "../../context/Auth/AuthContext";
 import BackdropLoading from "../BackdropLoading";
 import { i18n } from "../../translate/i18n";
+import { Popover } from "@material-ui/core";
 
 const drawerWidth = 240;
 
@@ -212,14 +213,13 @@ const LoggedInLayout = ({ appTitle, children }) => {
 						>
 							<AccountCircle />
 						</IconButton>
-						<Menu
+						<Popover
 							id="menu-appbar"
 							anchorEl={anchorEl}
 							anchorOrigin={{
-								vertical: "top",
+								vertical: "bottom",
 								horizontal: "right",
 							}}
-							keepMounted
 							transformOrigin={{
 								vertical: "top",
 								horizontal: "right",
@@ -233,7 +233,7 @@ const LoggedInLayout = ({ appTitle, children }) => {
 							<MenuItem onClick={handleLogout}>
 								{i18n.t("mainDrawer.appBar.user.logout")}
 							</MenuItem>
-						</Menu>
+						</Popover>
 					</div>
 				</Toolbar>
 			</AppBar>

frontend/src/hooks/useTickets/index.js

@@ -35,6 +35,7 @@ const useTickets = ({
 					setHasMore(data.hasMore);
 					setLoading(false);
 				} catch (err) {
+					setLoading(false);
 					const errorMsg = err.response?.data?.error;
 					if (errorMsg) {
 						if (i18n.exists(`backendErrors.${errorMsg}`)) {