done

src/Components/MobileDrawerMenu.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, 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;
+`