Issue #32: Mudanças icone de usuario no header

Signed-off-by: Gabriel Silva Hermida <gash18@inf.ufpr.br>

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>

src/components/header/header_components/LogoutButton.jsx

+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;

src/components/header/header_components/MenuList.jsx

-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;