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} 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 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';
import {apiDomain} from '../env.js'
import {deleteRequest} from './HelperFunctions/getAxiosConfig'

export default function MobileDrawerMenu (props) {
    const {state, dispatch} = useContext(Store)

    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/>},
    ]

    // {/*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 = [
        { name: "Publicar Recurso", href: "/termos-publicar-recurso", icon : <CloudUploadIcon/>},
        { name: "Recursos Publicados", href: "/perfil", icon : <CloudDoneIcon/>, value : '1'},
        { name: "Perfil e Atividades", href: "/perfil", icon : <HistoryIcon/>, value : '0'},
        { name: "Favoritos", href: "/perfil", icon : <FavoriteBorderIcon/>, value : '2'},
        { name: "Coleções", href: "/perfil", icon : <FolderOpenIcon/>, value : '3'},
    ]


    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-se
                                </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;
`