MenuList.js

/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
Departamento de Informatica - Universidade Federal do Parana

This file is part of Plataforma Integrada MEC.

Plataforma Integrada MEC is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Plataforma Integrada MEC is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/

import React, { useContext } from 'react';
import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
import { Link } from 'react-router-dom'
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
import { Store } from '../Store';
import styled from 'styled-components'
import { apiDomain } from '../env.js'
import { deleteRequest } from './HelperFunctions/getAxiosConfig'

//Image Import
import { Profile } from "ImportImages.js";


const OverrideButton = styled(Button)`
    text-transform : none !important;
`

export default function MenuList(props) {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const { state, dispatch } = useContext(Store)

  const handleClick = event => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  function handleSuccessSignOut(data) {
    dispatch({
      type: 'USER_LOGGED_OUT',
      userLoggedOut: !state.userIsLoggedIn,
    })
  }
  const handleLogout = () => {
    const url = `/auth/sign_out`
    deleteRequest(url, handleSuccessSignOut, (error) => { console.log(error) })
  }

  return (
    <div >

      <OverrideButton
        aria-controls="customized-menu"
        aria-haspopup="true"
        onMouseOver={handleClick}
      >
        <div style={{ borderRadius: "50%", border: "2px solid #fff", background: "#fff", overflow: "hidden", maxWidth: "50px", maxHeight: "50px" }}>
          {
            state.currentUser.avatar === '' || state.currentUser.avatar === null || state.currentUser.avatar === undefined ?
              (

                <img src={Profile} alt={'user avatar'} style={{ width: "100%", height: "100%", verticalAlign: "middle", marginLeft: "0" }} />
              ) :
              (
                <img src={apiDomain + state.currentUser.avatar} alt={'user avatar'} style={{ width: "100%", height: "100%", verticalAlign: "middle", marginLeft: "0" }} />
              )
          }
        </div>
        <span className={`${state.contrast}LinkColor`} style={{ fontFamily: "inherit", fontWeight: "400", color: "#666" }}>Minha Área </span> <KeyboardArrowDownIcon className={`${state.contrast}IconColor`}/>
      </OverrideButton>

      <Menu
        anchorEl={anchorEl}
        open={Boolean(anchorEl)}
        onClose={handleClose}
        elevation={0}
        getContentAnchorEl={null}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'center',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'center',
        }}>
        <div className={`${state.contrast}BackColor`}>
          {
            props.items.map((item) =>
              <Link to={{
                pathname: item.href,
                state: item.value
              }} style={{ textDecoration: "none" }} key={item.value}><MenuItem className={`${state.contrast}LinkColor`} style={{ fontSize: "14px", padding: "5px 20px", color: "#666" }} key={item.value}>{item.name}</MenuItem></Link>
            )
          }
        </div>

        <StyledButtonSair className={`${state.contrast}BackColor`} onClick={handleLogout}> <StyledMenuItem className={`${state.contrast}LinkColor`} disableGutters={true}>Sair<StyledExitToAppIcon className={`${state.contrast}IconColor`}/></StyledMenuItem></StyledButtonSair>
      </Menu>
    </div>
  );
}

const StyledButtonSair = styled(Button)`
    height : 31px;
    width : 177px;
    layout : row;

    .listItem {
        width : 100% !important;
        display : flex !important;
        justify-content: space-between !important;
        font-size : 14px !important;
        color : #a5a5a5 !important;
        padding : 5px 20px !important;
    }
`

const StyledExitToAppIcon = styled(ExitToAppIcon)`
    fontSize : 24px;
    color : rgb(162,165,165);
    align : right;
    display : flex;
    justify-content : flex-end;
`
const StyledMenuItem = styled(MenuItem)`
    display : flex !important;
    justify-content: space-between !important;
    width : 100% !important;
    font-size : 14px !important;
    color : #a5a5a5 !important;
    padding : 5px 20px !important;
`