From e0d92fc8ee5e26b315cde670bb939c617ffe325c Mon Sep 17 00:00:00 2001
From: Lucas Schoenfelder <les17@inf.ufpr.br>
Date: Thu, 19 Nov 2020 11:44:43 -0300
Subject: [PATCH] done
---
src/Components/MobileDrawerMenu.js | 165 ++++++++++++++++++++++++++---
1 file changed, 149 insertions(+), 16 deletions(-)
diff --git a/src/Components/MobileDrawerMenu.js b/src/Components/MobileDrawerMenu.js
index 117e5e08..82d708bd 100644
--- a/src/Components/MobileDrawerMenu.js
+++ b/src/Components/MobileDrawerMenu.js
@@ -1,3 +1,21 @@
+/*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, useState} from 'react'
import { Store } from '../Store';
import Drawer from '@material-ui/core/Drawer';
@@ -12,9 +30,17 @@ import {ButtonStyled} from './MenuBar'
import ExitToAppIcon from '@material-ui/icons/ExitToApp'
import { Button } from '@material-ui/core';
import MenuItem from '@material-ui/core/MenuItem';
+import DefaultAvatar from '../img/default_profile0.png'
+import {apiDomain} from '../env.js'
+import CloudUploadIcon from '@material-ui/icons/CloudUpload';
+import CloudDoneIcon from '@material-ui/icons/CloudDone';
+import HistoryIcon from '@material-ui/icons/History';
+import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';
+import FolderOpenIcon from '@material-ui/icons/FolderOpen';
+import SettingsIcon from '@material-ui/icons/Settings';
export default function MobileDrawerMenu (props) {
- const {state} = useContext(Store)
+ const {state, dispatch} = useContext(Store)
const menuSobre = [
{ name : "Página Inicial", href : "/", icon : <HomeIcon/>},
@@ -23,14 +49,53 @@ export default function MobileDrawerMenu (props) {
{ name : "Central de Ajuda", href : "ajuda", icon : <HelpOutlineIcon/>},
{ name : "Termos de Uso", href : "termos", icon : <AssignmentIcon/>},
]
- const [selectedIndex, setSelectedIndex] = React.useState(1);
+
+ {/*used in dynamic css selection*/}
+ const [selectedIndex, setSelectedIndex] = React.useState(-1);
const handleMenuItemClick = (event, index) => {
setSelectedIndex(index);
};
+ const getUserAvatar = () => {
+ if (state.currentUser.userAvatar == '' || state.currentUser.userAvatar == null) {
+ return DefaultAvatar
+ }
+ else {
+ return apiDomain + state.currentUser.userAvatar
+ }
+ }
+
+ {/*main user actions array */}
+ const minhaArea = [
+ { name: "Publicar Recurso", href: "/termos-publicar-recurso", icon : <CloudUploadIcon/>},
+ { name: "Recursos Publicados", href: "/perfil", icon : <CloudDoneIcon/>, value : '2'},
+ { name: "Perfil e Atividades", href: "/perfil", icon : <HistoryIcon/>, value : '0'},
+ { name: "Favoritos", href: "/perfil", icon : <FavoriteBorderIcon/>, value : '3'},
+ { name: "Coleções", href: "/perfil", icon : <FolderOpenIcon/>, value : '4'},
+ ]
+
+ {/*dispatches log out actions to Store.js*/}
+ const handleLogout = () => {
+ sessionStorage.removeItem('@portalmec/username');
+ sessionStorage.removeItem('@portalmec/uid');
+ sessionStorage.removeItem('@portalmec/senha');
+ dispatch( {
+ type: 'USER_LOGGED_OUT',
+ userLoggedOut: !state.userIsLoggedIn,
+ login: {
+ username : '',
+ email : '',
+ accessToken : '',
+ client : ''
+ }
+ }
+ )
+ }
+
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)}>
@@ -40,19 +105,45 @@ export default function MobileDrawerMenu (props) {
)
}
</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 ?
(
- <React.Fragment>
- <span>sim</span>
- </React.Fragment>
+ <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>
)
:
(
- <div style={{borderTop : "1px solid #e5e5e5", borderBottom : "1px solid #e5e5e5", marginTop : "10px"}}>
-
+ <React.Fragment>
<div style={{display : "flex", justifyContent : "center", marginTop : "10px"}}>
- <ButtonPublicarRecurso onClick={() => {console.log('props.openLogin')}}>
+ <ButtonPublicarRecurso onClick={props.openLogin}>
PUBLICAR RECURSO?
</ButtonPublicarRecurso>
</div>
@@ -70,13 +161,55 @@ export default function MobileDrawerMenu (props) {
</ButtonStyled>
</div>
</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;
@@ -91,13 +224,6 @@ const StyledDrawer = styled(Drawer)`
.MuiPaper-root {
width : 65% !important;
}
-`
-
-const MenuBody = styled.div`
- margin-top : 20px;
- display : flex;
- flex-direction : column;
- color : #666;
.menu-buttons {
padding : 10px 16px;
@@ -135,3 +261,10 @@ const MenuBody = styled.div`
}
}
`
+
+const MenuBody = styled.div`
+ margin-top : 20px;
+ display : flex;
+ flex-direction : column;
+ color : #666;
+`
--
GitLab