ReportButton.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, {useState, useContext} from 'react'
import styled from 'styled-components'
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import ReportIcon from '@material-ui/icons/Error';
import Button from '@material-ui/core/Button';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import ReportModal from './ReportModal.js'
import {Store} from '../Store.js'

export default function ReportButton (props) {
    const {state} = useContext(Store)

    /*Menu control variables-----------------------------*/
    const [anchorEl, setAnchorEl] = React.useState(null);
    const handleClick = (event) => {
        setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
        setAnchorEl(null);
    };
    /*---------------------------------------------------*/


    /*modal variables------------------------------------*/
    const [reportModal, toggleReportModal] = useState(false)
    // eslint-disable-next-line
    const [loginModal, toggleLoginModal] = useState(false)

    const handleModal = () => {
        if (state.currentUser.id) {
            toggleReportModal(!reportModal)
        }
        else {
            toggleLoginModal(true)
        }
    }
    /*---------------------------------------------------*/

    return (
        <>
        {
            reportModal &&
            <ReportModal open={reportModal} handleClose={() => handleModal()}
                    form="user" complainableId={props.complainableId}
                    complainableType={props.complainableType}
                    {...props}/>
        }
        {/*
            loginModal &&
            <LoginModal open={loginModal} handleClose={() => {toggleLoginModal(false)}}/>
        */}
        <Button onClick={handleClick}>
            <MoreVertIcon style={{color : "#666"}}/>
        </Button>
        <StyledMenu
          id="simple-menu"
          anchorEl={anchorEl}
          keepMounted
          open={Boolean(anchorEl)}
          onClose={handleClose}
          style={{borderRadius : "0"}}
        >
            <MenuItem onClick={() => {handleModal()}} style={{color : "#666"}}>
                <ReportIcon/>
                <span style={{paddingLeft : "3px"}}>Reportar</span>
            </MenuItem>
        </StyledMenu>
        </>
    )
}

const StyledMenu = styled(Menu)`
    .MuiPaper-rounded {
        border-radius : 0 !important;
    }
`