improvement: moved user data from localstorage to context

frontend/src/layout/MainListItems.js

@@ -17,6 +17,8 @@ import AccountTreeOutlinedIcon from "@material-ui/icons/AccountTreeOutlined";
 
 import { i18n } from "../translate/i18n";
 import { WhatsAppsContext } from "../context/WhatsApp/WhatsAppsContext";
+import { AuthContext } from "../context/Auth/AuthContext";
+import Can from "../components/Can";
 
 function ListItemLink(props) {
 	const { icon, primary, to, className } = props;
@@ -40,8 +42,8 @@ function ListItemLink(props) {
 }
 
 const MainListItems = () => {
-	const userProfile = localStorage.getItem("profile");
 	const { whatsApps } = useContext(WhatsAppsContext);
+	const { user } = useContext(AuthContext);
 	const [connectionWarning, setConnectionWarning] = useState(false);
 
 	useEffect(() => {
@@ -95,29 +97,33 @@ const MainListItems = () => {
 				primary={i18n.t("mainDrawer.listItems.contacts")}
 				icon={<ContactPhoneOutlinedIcon />}
 			/>
-			{userProfile === "admin" && (
-				<>
-					<Divider />
-					<ListSubheader inset>
-						{i18n.t("mainDrawer.listItems.administration")}
-					</ListSubheader>
-					<ListItemLink
-						to="/users"
-						primary={i18n.t("mainDrawer.listItems.users")}
-						icon={<PeopleAltOutlinedIcon />}
-					/>
-					<ListItemLink
-						to="/queues"
-						primary={i18n.t("mainDrawer.listItems.queues")}
-						icon={<AccountTreeOutlinedIcon />}
-					/>
-					<ListItemLink
-						to="/settings"
-						primary={i18n.t("mainDrawer.listItems.settings")}
-						icon={<SettingsOutlinedIcon />}
-					/>
-				</>
-			)}
+			<Can
+				role={user.profile}
+				perform="drawer-admin-items:view"
+				yes={() => (
+					<>
+						<Divider />
+						<ListSubheader inset>
+							{i18n.t("mainDrawer.listItems.administration")}
+						</ListSubheader>
+						<ListItemLink
+							to="/users"
+							primary={i18n.t("mainDrawer.listItems.users")}
+							icon={<PeopleAltOutlinedIcon />}
+						/>
+						<ListItemLink
+							to="/queues"
+							primary={i18n.t("mainDrawer.listItems.queues")}
+							icon={<AccountTreeOutlinedIcon />}
+						/>
+						<ListItemLink
+							to="/settings"
+							primary={i18n.t("mainDrawer.listItems.settings")}
+							icon={<SettingsOutlinedIcon />}
+						/>
+					</>
+				)}
+			/>
 		</div>
 	);
 };

frontend/src/layout/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useContext, useEffect } from "react";
+import React, { useState, useContext } from "react";
 import clsx from "clsx";
 
 import {
@@ -24,6 +24,7 @@ import UserModal from "../components/UserModal";
 import { AuthContext } from "../context/Auth/AuthContext";
 import BackdropLoading from "../components/BackdropLoading";
 import { i18n } from "../translate/i18n";
+import { useLocalStorage } from "../hooks/useLocalStorage";
 
 const drawerWidth = 240;
 
@@ -107,30 +108,13 @@ const useStyles = makeStyles(theme => ({
 }));
 
 const LoggedInLayout = ({ children }) => {
-	const drawerState = localStorage.getItem("drawerOpen");
-	const userId = +localStorage.getItem("userId");
 	const classes = useStyles();
-	const [open, setOpen] = useState(true);
 	const [userModalOpen, setUserModalOpen] = useState(false);
 	const [anchorEl, setAnchorEl] = useState(null);
 	const [menuOpen, setMenuOpen] = useState(false);
 	const { handleLogout, loading } = useContext(AuthContext);
-
-	useEffect(() => {
-		if (drawerState === "0") {
-			setOpen(false);
-		}
-	}, [drawerState]);
-
-	const handleDrawerOpen = () => {
-		setOpen(true);
-		localStorage.setItem("drawerOpen", 1);
-	};
-
-	const handleDrawerClose = () => {
-		setOpen(false);
-		localStorage.setItem("drawerOpen", 0);
-	};
+	const [drawerOpen, setDrawerOpen] = useLocalStorage("drawerOpen", true);
+	const { user } = useContext(AuthContext);
 
 	const handleMenu = event => {
 		setAnchorEl(event.currentTarget);
@@ -156,12 +140,15 @@ const LoggedInLayout = ({ children }) => {
 			<Drawer
 				variant="permanent"
 				classes={{
-					paper: clsx(classes.drawerPaper, !open && classes.drawerPaperClose),
+					paper: clsx(
+						classes.drawerPaper,
+						!drawerOpen && classes.drawerPaperClose
+					),
 				}}
-				open={open}
+				open={drawerOpen}
 			>
 				<div className={classes.toolbarIcon}>
-					<IconButton onClick={handleDrawerClose}>
+					<IconButton onClick={() => setDrawerOpen(!drawerOpen)}>
 						<ChevronLeftIcon />
 					</IconButton>
 				</div>
@@ -174,11 +161,11 @@ const LoggedInLayout = ({ children }) => {
 			<UserModal
 				open={userModalOpen}
 				onClose={() => setUserModalOpen(false)}
-				userId={userId}
+				userId={user?.id}
 			/>
 			<AppBar
 				position="absolute"
-				className={clsx(classes.appBar, open && classes.appBarShift)}
+				className={clsx(classes.appBar, drawerOpen && classes.appBarShift)}
 				color={process.env.NODE_ENV === "development" ? "inherit" : "primary"}
 			>
 				<Toolbar variant="dense" className={classes.toolbar}>
@@ -186,10 +173,10 @@ const LoggedInLayout = ({ children }) => {
 						edge="start"
 						color="inherit"
 						aria-label="open drawer"
-						onClick={handleDrawerOpen}
+						onClick={() => setDrawerOpen(!drawerOpen)}
 						className={clsx(
 							classes.menuButton,
-							open && classes.menuButtonHidden
+							drawerOpen && classes.menuButtonHidden
 						)}
 					>
 						<MenuIcon />