MobileDrawerMenu.js 10.50 KiB
/*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 { Store } from '../Store';
import Drawer from '@material-ui/core/Drawer';
import styled from 'styled-components'
import { Link } from 'react-router-dom'
import HomeIcon from '@material-ui/icons/Home';
import InfoIcon from '@material-ui/icons/Info';
import MailOutlineIcon from '@material-ui/icons/MailOutline';
import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
import AssignmentIcon from '@material-ui/icons/Assignment';
import { ButtonStyled } from './MenuBar'
import ExitToAppIcon from '@material-ui/icons/ExitToApp'
import { Button } from '@material-ui/core';
import DefaultAvatar from '../img/default_profile0.png'
import SettingsIcon from '@material-ui/icons/Settings';
import { apiDomain } from '../env.js'
import { deleteRequest } from './HelperFunctions/getAxiosConfig'
export default function MobileDrawerMenu(props) {
const { state, dispatch } = useContext(Store)
const buildMyAreaTabs = () => {
const minhaArea = [
{ name: "Perfil e Atividades", href: "/perfil", value: '0' },
{ name: "Recursos Publicados", href: "/perfil", value: '1' },
{ name: "Favoritos", href: "/perfil", value: '2' },
{ name: "Coleções", href: "/perfil", value: '3' },
{ name: "Rede", href: "/perfil", value: '4' },
{ name: "Configurações", href: "/editarperfil", value: '5' },
]
if (state.currentUser.roles) {
let canUserAdmin = false;
let index = 0;
const userRoles = [...state.currentUser.roles]
while (!canUserAdmin && index < userRoles.length) {
if (userRoles[index].id === 3 || userRoles[index].id === 7)
canUserAdmin = true
index++
}
if (canUserAdmin)
minhaArea.push({
name: "Administrador",
href: "/admin/home",
value: '6',
})
}
return minhaArea;
}
const menuSobre = [
{ name: "Página Inicial", href: "/", icon: <HomeIcon /> },
{ name: "Sobre a Plataforma", href: "/sobre", icon: <InfoIcon /> },
{ name: "Contato", href: "/contato", icon: <MailOutlineIcon /> },
{ name: "Central de Ajuda", href: "/ajuda", icon: <HelpOutlineIcon /> },
{ name: "Termos de Uso", href: "/termos", icon: <AssignmentIcon /> },
//{ name: "Busca", href: `/busca?query=${state.search.query}&search_class=${state.search.class}`, icon: <SearchIcon /> }
]
// {/*used in dynamic css selection*/}
const [selectedIndex, setSelectedIndex] = React.useState(-1);
const handleMenuItemClick = (event, index) => {
setSelectedIndex(index);
};
const getUserAvatar = () => {
if (state.currentUser.avatar === '' || state.currentUser.avatar == null) {
return DefaultAvatar
}
else {
return apiDomain + state.currentUser.avatar
}
}
// {/*main user actions array */}
const minhaArea = buildMyAreaTabs()
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 (
<StyledDrawer anchor={props.anchor} open={props.open} onClose={props.onClose}>
<MenuBody>
{/*Renders menuSobre array options*/}
{
menuSobre.map((item, index) =>
<Link to={item.href} className={`menu-buttons ${selectedIndex === index ? 'selected' : ''}`} onClick={(event) => handleMenuItemClick(event, index)}>
{item.icon}
{item.name}
</Link>
)
}
</MenuBody>
<div style={{ borderTop: "1px solid #e5e5e5", borderBottom: "1px solid #e5e5e5", marginTop: "10px", paddingTop: "10px", marginBottom: "10px" }}>
{
/*If user is logged in, render user actions menu; else render log in/sign in buttons*/
state.userIsLoggedIn ?
(
<div style={{ display: "flex", flexDirection: "column", color: "#666", paddingBottom: "10px" }}>
<MyArea>
<div className="user-avatar">
<img alt="user-avatar"
src={getUserAvatar()}
/>
</div>
<span className="text">Minha área</span>
</MyArea>
{ minhaArea.map((item, index) =>
<Link to={{
pathname: item.href,
state: item.value
}}
className={`menu-buttons ${selectedIndex === (index + menuSobre.length) ? 'selected' : ''}`}
onClick={(event) => handleMenuItemClick(event, index + menuSobre.length)}
>
{item.icon}
{item.name}
</Link>
)
}
</div>
)
:
(
<React.Fragment>
<div style={{ display: "flex", justifyContent: "center", marginTop: "10px" }}>
<ButtonPublicarRecurso onClick={props.openLogin}>
PUBLICAR RECURSO?
</ButtonPublicarRecurso>
</div>
<div style={{ display: "flex", flexDirection: "row", margin: "10px 0", justifyContent: "center" }}>
<div style={{ borderRight: "1px solid #e5e5e5" }}>
<ButtonStyled onClick={props.openLogin}>
<ExitToAppIcon style={{ color: "#00bcd4" }} />Entrar
</ButtonStyled>
</div>
<div>
<ButtonStyled onClick={props.openSignUp}>
Cadastre-<span style={{textTransform: 'lowercase'}}>se</span>
</ButtonStyled>
</div>
</div>
</React.Fragment>
)
}
</div>
{
/*Renders settings and log off buttons */
state.userIsLoggedIn &&
<React.Fragment>
<Link to={"/editarperfil"} className={`menu-buttons`}>
<SettingsIcon /> Configurações
</Link>
<Link to={"/"} className={`menu-buttons`} onClick={handleLogout}>
<ExitToAppIcon /> Sair
</Link>
</React.Fragment>
}
</StyledDrawer>
)
}
const MyArea = styled.div`
margin : 0 16px;
display : flex;
flex-direction : row;
.text {
font-size : 16px;
color : #666;
align-self : center;
}
.user-avatar {
margin-right : 10px;
align-self : center;
border-radius : 50%;
border : 1px solid #fff;
max-width : 50px;
max-height : 50px;
overflow : hidden;
img {
width : 100%;
height : 100%;
vertical-align : middle;
}
}
`
const ButtonPublicarRecurso = styled(Button)`
font-weight : 500 !important;
border : 1.5px #666 solid !important;
color: #666;
box-shadow: none;
margin : 0 8px !important;
padding : 6px 25px !important;
`
const StyledDrawer = styled(Drawer)`
.MuiPaper-root {
width : 65% !important;
}
.menu-buttons {
padding : 10px 16px;
font-size : 14px;
font-weight : 500;
cursor : pointer;
outline : 0;
color : #666 !important;
text-decoration : none !important;
background-color : transparent;
font-family : 'Roboto', sans serif;
.MuiSvgIcon-root {
color : #a5a5a5 !important;
margin-right : 20px;
vertical-align : middle !important;
font-weight : normal !important;
font-style : normal !important;
font-size : 24px !important;
line-height : 1 !important;
letter-spacing : normal !important;
text-transform : none !important;
display : inline-block !important;
white-space : nowrap !important;
word-wrap : normal !important;
direction : ltr !important;
}
}
.selected {
color : #fff !important;
background-color : #00bcd4;
.MuiSvgIcon-root {
color : #fff !important;
}
}
`
const MenuBody = styled.div` margin-top : 20px;
display : flex;
flex-direction : column;
color : #666;
`