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 SettingsIcon from '@material-ui/icons/Settings';
import { apiDomain } from '../env.js'
import { deleteRequest } from './HelperFunctions/getAxiosConfig'
import CloudUploadIcon from '@material-ui/icons/CloudUpload';

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',
                })

            const canUserCurator = (elem) => elem.id === 4
            if (userRoles.some(canUserCurator))
                minhaArea.push({
                    name: "Curadoria",
                    href: "/perfil",
                    value: '5',
                })
        }

        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", justifyContent: "left", marginBottom: "10px" }}>
                                    <Link to="/termos-publicar-recurso">
                                        <ButtonPublicarRecurso>
                                            <CloudUploadIcon style={{ color: "white", marginRight: "10px" }} />
                                            <span style={{ color: "white", textAlign: "center", alignSelf: "center", fontWeight: "500" }} >
                                                PUBLICAR RECURSO
                                            </span>
                                        </ButtonPublicarRecurso>
                                    </Link>
                                </div>
                                <div style={{ borderTop: "1px solid #e5e5e5", display: "flex", flexDirection: "column",  marginTop: "10px", paddingTop: "10px", 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;
    background-color : #ff7f00 !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;
`