diff --git a/src/components/header/header.jsx b/src/components/header/header.jsx
index 61c014d714c623c1a48fbf0c3665a3ca8c206861..b7e6287f504c5cf992328982f5aef9a1c9f01844 100644
--- a/src/components/header/header.jsx
+++ b/src/components/header/header.jsx
@@ -3,7 +3,7 @@ import Grid from "@material-ui/core/Grid";
import { useHistory } from "react-router-dom";
import logo from "./header_imgs/imgsimmc-01.png";
import { makeStyles } from "@material-ui/core";
-import MenuListComposition from "./header_components/MenuList";
+import LogoutButton from "./header_components/LogoutButton";
const useStyles = makeStyles((theme) => ({
header: {
@@ -70,7 +70,7 @@ export default function Header() {
return false;
}
useEffect(() => {
- setIsLoged(!isLoged);
+ setIsLoged(checkLoged);
}, [window.sessionStorage.getItem("token")]);
return (
@@ -132,7 +132,9 @@ export default function Header() {
justify="center"
alignContent="flex-end"
>
- <MenuListComposition isLoged={isLoged} checkLoged={checkLoged} />
+ {isLoged && (
+ <LogoutButton isLoged={isLoged} checkLoged={checkLoged} />
+ )}
</Grid>
</Grid>
</header>
diff --git a/src/components/header/header_components/LogoutButton.jsx b/src/components/header/header_components/LogoutButton.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..7c8bfc9e6d89898d632e798da4c09ab8d962af1a
--- /dev/null
+++ b/src/components/header/header_components/LogoutButton.jsx
@@ -0,0 +1,64 @@
+import React from "react";
+import Button from "@material-ui/core/Button";
+import { useHistory } from "react-router-dom";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles((theme) => ({
+ menuPopUp: {
+ alignContent: "start",
+ ["@media (max-width:346px)"]: {
+ width: "23%",
+ },
+ },
+ menuList: {
+ alignItems: "flex-start",
+ color: "grey",
+ },
+ button: {
+ marginRight: "10px",
+ fontSize: 14,
+ width: "80px",
+ backgroundColor: "#0480ab",
+ color: "white",
+ ["@media (max-width: 600px)"]: {
+ width: "60px",
+ fontSize: 12,
+ },
+ },
+}));
+
+/**
+ * Para fazer com que o componente não apareça em telas em que o usuário não está logado, basta fazer uma função de verificação para tal e retornar o componente,
+ * caso logado, ou NULL, caso não-logado.
+ */
+
+function LogoutButton(props) {
+ const [open, setOpen] = React.useState(false);
+ const history = useHistory();
+
+ const handleLogOut = (event) => {
+ window.sessionStorage.removeItem("token");
+ window.sessionStorage.removeItem("userId");
+ props.checkLoged();
+ let path = `/signin`;
+ history.push(path);
+ };
+
+ const classes = useStyles();
+
+ return (
+ <div>
+ <Button
+ className={classes.button}
+ id="notWhiteButton"
+ aria-haspopup="true"
+ onClick={handleLogOut}
+ variant="contained"
+ >
+ LogOut
+ </Button>
+ </div>
+ );
+}
+
+export default LogoutButton;
diff --git a/src/components/header/header_components/MenuList.jsx b/src/components/header/header_components/MenuList.jsx
deleted file mode 100644
index e6d9fa6db090268a0beec4949c70e0baf7c722df..0000000000000000000000000000000000000000
--- a/src/components/header/header_components/MenuList.jsx
+++ /dev/null
@@ -1,176 +0,0 @@
-import React from "react";
-import Button from "@material-ui/core/Button";
-import ClickAwayListener from "@material-ui/core/ClickAwayListener";
-import Grow from "@material-ui/core/Grow";
-import Paper from "@material-ui/core/Paper";
-import Popper from "@material-ui/core/Popper";
-import MenuItem from "@material-ui/core/MenuItem";
-import { useHistory } from "react-router-dom";
-import MenuList from "@material-ui/core/MenuList";
-import { makeStyles } from "@material-ui/core/styles";
-import UserImg from "./../header_imgs/user.png";
-
-import { Avatar } from "@material-ui/core";
-
-const useStyles = makeStyles((theme) => ({
- menuPopUp: {
- alignContent: "start",
- ["@media (max-width:346px)"]: {
- width: "23%",
- },
- },
- menuPopUpText: {
- ["@media (max-width:525px)"]: {
- fontSize: "13px",
- },
- },
- popUpPaper: {
- marginRight: "14%",
- ["@media (max-width:525px)"]: {
- marginRight: "0",
- },
- },
- menuList: {
- alignItems: "flex-start",
- color: "grey",
- },
-}));
-
-/**
- * Para fazer com que o componente não apareça em telas em que o usuário não está logado, basta fazer uma função de verificação para tal e retornar o componente,
- * caso logado, ou NULL, caso não-logado.
- */
-
-function MenuListComposition(props) {
- const [open, setOpen] = React.useState(false);
- const history = useHistory();
-
- const handleLogin = () => {
- let path = `/signin`;
- history.push(path);
- };
-
- const prevOpen = React.useRef(open);
-
- const anchorRef = React.useRef(null);
- const handleToggle = () => {
- setOpen((prevOpen) => !prevOpen);
- };
- const handleProfile = (event) => {
- if (window.sessionStorage.getItem("userId")) {
- let path = `/list/${window.sessionStorage.getItem("userId")}`;
- history.push(path);
- return;
- }
-
- alert("Você não está logado.");
- };
- const handleLogOut = (event) => {
- window.sessionStorage.removeItem("token");
- window.sessionStorage.removeItem("userId");
- props.checkLoged();
- let path = `/signin`;
- history.push(path);
- };
- const handleClose = (event) => {
- if (anchorRef.current && anchorRef.current.contains(event.target)) {
- return;
- }
- setOpen(false);
- };
- function handleListKeyDown(event) {
- if (event.key === "Tab") {
- event.preventDefault();
- setOpen(false);
- }
- }
- React.useEffect(() => {
- if (prevOpen.current === true && open === false) {
- anchorRef.current.focus();
- props.checkLoged();
- }
-
- prevOpen.current = open;
- }, [open]);
-
- const classes = useStyles();
-
- return (
- <div>
- <Button
- id="notWhiteButton"
- ref={anchorRef}
- aria-controls={open ? "menu-list-grow" : undefined}
- aria-haspopup="true"
- onClick={handleToggle}
- >
- <Avatar alt="user_avatar" src={UserImg} className={classes.userImg} />{" "}
- </Button>
- <Popper
- open={open}
- placement="left"
- anchorEl={anchorRef.current}
- role={undefined}
- transition
- disablePortal
- className={classes.menuPopUp}
- >
- {({ TransitionProps, placement }) => (
- <Grow
- {...TransitionProps}
- style={{
- transformOrigin:
- placement === "bottom" ? "center top" : "center bottom",
- }}
- >
- <Paper className={classes.popUpPaper}>
- {props.isLoged ? (
- <ClickAwayListener onClickAway={handleClose}>
- <MenuList
- className={classes.menuList}
- autoFocusItem={open}
- id="menu-list-grow"
- onKeyDown={handleListKeyDown}
- alignContent="flex-start"
- >
- <MenuItem
- onClick={handleProfile}
- className={classes.menuPopUpText}
- >
- Perfil
- </MenuItem>
- <MenuItem
- onClick={handleLogOut}
- className={classes.menuPopUpText}
- >
- Logout
- </MenuItem>
- </MenuList>
- </ClickAwayListener>
- ) : (
- <ClickAwayListener onClickAway={handleClose}>
- <MenuList
- className={classes.menuList}
- autoFocusItem={open}
- id="menu-list-grow"
- onKeyDown={handleListKeyDown}
- alignContent="flex-start"
- >
- <MenuItem
- onClick={handleLogin}
- className={classes.menuPopUpText}
- >
- Login
- </MenuItem>
- </MenuList>
- </ClickAwayListener>
- )}
- </Paper>
- </Grow>
- )}
- </Popper>
- </div>
- );
-}
-
-export default MenuListComposition;