feat: enabled "profile" button on appbar menu

frontend/src/components/BackdropLoading/index.js

@@ -0,0 +1,23 @@
+import React from "react";
+
+import Backdrop from "@material-ui/core/Backdrop";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles(theme => ({
+	backdrop: {
+		zIndex: theme.zIndex.drawer + 1,
+		color: "#fff",
+	},
+}));
+
+const BackdropLoading = () => {
+	const classes = useStyles();
+	return (
+		<Backdrop className={classes.backdrop} open={true}>
+			<CircularProgress color="inherit" />
+		</Backdrop>
+	);
+};
+
+export default BackdropLoading;

frontend/src/components/NotificationsPopOver/index.js

@@ -14,9 +14,7 @@ import Badge from "@material-ui/core/Badge";
 import ChatIcon from "@material-ui/icons/Chat";
 
 import TicketListItem from "../TicketListItem";
-
 import { i18n } from "../../translate/i18n";
-
 import useTickets from "../../hooks/useTickets";
 
 const useStyles = makeStyles(theme => ({

frontend/src/components/_layout/index.js

@@ -17,7 +17,9 @@ import AccountCircle from "@material-ui/icons/AccountCircle";
 
 import MainListItems from "./MainListItems";
 import NotificationsPopOver from "../NotificationsPopOver";
+import UserModal from "../UserModal";
 import { AuthContext } from "../../context/Auth/AuthContext";
+import BackdropLoading from "../BackdropLoading";
 
 const drawerWidth = 240;
 
@@ -101,12 +103,14 @@ const useStyles = makeStyles(theme => ({
 }));
 
 const MainDrawer = ({ appTitle, children }) => {
-	const { handleLogout } = useContext(AuthContext);
+	const drawerState = localStorage.getItem("drawerOpen");
+	const userId = +localStorage.getItem("userId");
 	const classes = useStyles();
 	const [open, setOpen] = useState(true);
-	const [anchorEl, setAnchorEl] = React.useState(null);
+	const [userModalOpen, setUserModalOpen] = useState(false);
+	const [anchorEl, setAnchorEl] = useState(null);
 	const [menuOpen, setMenuOpen] = useState(false);
-	const drawerState = localStorage.getItem("drawerOpen");
+	const { handleLogout, loading } = useContext(AuthContext);
 
 	useEffect(() => {
 		if (drawerState === "0") {
@@ -134,6 +138,15 @@ const MainDrawer = ({ appTitle, children }) => {
 		setMenuOpen(false);
 	};
 
+	const handleOpenUserModal = () => {
+		setUserModalOpen(true);
+		handleCloseMenu();
+	};
+
+	if (loading) {
+		return <BackdropLoading />;
+	}
+
 	return (
 		<div className={classes.root}>
 			<Drawer
@@ -154,6 +167,11 @@ const MainDrawer = ({ appTitle, children }) => {
 				</List>
 				<Divider />
 			</Drawer>
+			<UserModal
+				open={userModalOpen}
+				onClose={() => setUserModalOpen(false)}
+				userId={userId}
+			/>
 			<AppBar
 				position="absolute"
 				className={clsx(classes.appBar, open && classes.appBarShift)}
@@ -179,7 +197,7 @@ const MainDrawer = ({ appTitle, children }) => {
 						noWrap
 						className={classes.title}
 					>
-						{appTitle}
+						WHATICKET
 					</Typography>
 					<NotificationsPopOver />
 
@@ -208,7 +226,7 @@ const MainDrawer = ({ appTitle, children }) => {
 							open={menuOpen}
 							onClose={handleCloseMenu}
 						>
-							<MenuItem onClick={handleCloseMenu}>Profile</MenuItem>
+							<MenuItem onClick={handleOpenUserModal}>Profile</MenuItem>
 							<MenuItem onClick={handleLogout}>Logout</MenuItem>
 						</Menu>
 					</div>

frontend/src/pages/Connections/index.js

@@ -167,8 +167,8 @@ const Connections = () => {
 	};
 
 	const handleCloseQrModal = useCallback(() => {
-		setQrModalOpen(false);
 		setSelectedWhatsApp(null);
+		setQrModalOpen(false);
 	}, [setQrModalOpen, setSelectedWhatsApp]);
 
 	const handleEditWhatsApp = whatsApp => {

frontend/src/routes/Route.js

@@ -1,29 +1,13 @@
 import React, { useContext } from "react";
 import { Route, Redirect } from "react-router-dom";
 
-import Backdrop from "@material-ui/core/Backdrop";
-import CircularProgress from "@material-ui/core/CircularProgress";
-import { makeStyles } from "@material-ui/core/styles";
-
 import { AuthContext } from "../context/Auth/AuthContext";
-
+import BackdropLoading from "../components/BackdropLoading";
-const useStyles = makeStyles(theme => ({
-	backdrop: {
-		zIndex: theme.zIndex.drawer + 1,
-		color: "#fff",
-	},
-}));
 
 const RouteWrapper = ({ component: Component, isPrivate = false, ...rest }) => {
-	const classes = useStyles();
 	const { isAuth, loading } = useContext(AuthContext);
 
-	if (loading)
+	if (loading) return <BackdropLoading />;
-		return (
-			<Backdrop className={classes.backdrop} open={loading}>
-				<CircularProgress color="inherit" />
-			</Backdrop>
-		);
 
 	if (!isAuth && isPrivate) {
 		return (