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 contrast={state.contrast} 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={state.contrast === "" ? { color: "#666" } : { color: "white" }} />
            </Button>
            <StyledMenu
                id="simple-menu"
                anchorEl={anchorEl}
                keepMounted
                open={Boolean(anchorEl)}
                onClose={handleClose}
                style={{ borderRadius: "0" }}
            >
                <MenuItem onClick={() => { handleModal() }} style={state.contrast === "" ? { color: "#666", backgroundColor: "black" } : { color: "white", backgroundColor: "black" }}>
                    <ReportIcon />
                    <span style={state.contrast === "" ? { paddingLeft: "3px" } : { paddingLeft: "3px", color: "yellow", textDecoration: "underline" }}>Reportar</span>
                </MenuItem>
            </StyledMenu>
        </>
    )
}

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