ColCardPublicOptions.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 } from 'react';
import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import MenuItem from '@material-ui/core/MenuItem';
import OpenIcon from '@material-ui/icons/OpenInNew';
import { Link } from 'react-router-dom'
import MoreVertIcon from '@material-ui/icons/MoreVert';
import styled from 'styled-components'
import FavoriteIcon from '@material-ui/icons/Favorite';
import ReportModal from './ReportModal.js'
import ReportProblemIcon from '@material-ui/icons/ReportProblem';
import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
import AddIcon from '@material-ui/icons/Add';
import ExitToAppIcon from '@material-ui/icons/ExitToApp';

export default function ColCardPublicOptions({ contrast, id, userFollowingCol, handleLike, handleFollow, currentUserId, handleLogin, liked }) {
    const [anchorEl, setAnchorEl] = React.useState(null);

    function handleClick(event) {
        setAnchorEl(event.currentTarget);
    }

    function handleClose() {
        setAnchorEl(null);
    }

    const [reportModalOpen, toggleReportModal] = useState(false)
    const handleReportModal = (value) => { toggleReportModal(value) }

    return (
        <>
            <ReportModal
                contrast={contrast}
                open={reportModalOpen}
                handleClose={() => handleReportModal(false)}
                form="colecao"
                complainableId={id}
                complainableType={"Collection"}
            />
            <div style={{ fontSize: "12px" }}>
                <Button
                    aria-controls="simple-menu"
                    aria-haspopup="true"
                    onClick={handleClick}
                    style={{ color: "#666" }}
                >
                    <MoreVertIcon className={`${contrast}IconColor`} style={{ color: "inherit" }} />
                </Button>
                <Menu
                    id="simple-menu"
                    anchorEl={anchorEl}
                    keepMounted
                    open={Boolean(anchorEl)}
                    onClose={handleClose}
                >
                    <StyledMenuItem className={`${contrast}LinkColor ${contrast}Text`} contrast={contrast}>
                        <Link to={"/colecao-do-usuario/" + id}>
                            <ListItemIcon className={`${contrast}IconColor`}>
                                <OpenIcon />
                            </ListItemIcon>
                            Abrir
                        </Link>
                    </StyledMenuItem>

                    <StyledMenuItem
                        className={`${contrast}LinkColor ${contrast}Text`}
                        contrast={contrast}
                        onClick={() =>
                            window.open("/colecao-do-usuario/" + id, "_blank")
                        }
                    >
                        <ListItemIcon className={`${contrast}IconColor ${contrast}Text`}>
                            <OpenInBrowserIcon />
                        </ListItemIcon>
                        Abrir em nova guia
                    </StyledMenuItem>

                    <StyledMenuItem className={`${contrast}LinkColor ${contrast}Text`} contrast={contrast} onClick={handleLike}>
                        <ListItemIcon className={`${contrast}IconColor`}>
                            {
                                liked ?
                                    <FavoriteIcon /> : <FavoriteIcon />
                            }
                        </ListItemIcon>
                        {
                            liked ?
                                "Desfavoritar" : "Favoritar"
                        }
                    </StyledMenuItem>

                    <StyledMenuItem className={`${contrast}LinkColor ${contrast}Text`} contrast={contrast} onClick={handleFollow}>
                        <ListItemIcon className={`${contrast}IconColor`}>
                            {
                                userFollowingCol ?
                                    <ExitToAppIcon /> : <AddIcon />
                            }
                        </ListItemIcon>
                        {
                            userFollowingCol ?
                                "Deixar de seguir" : "Seguir"
                        }
                    </StyledMenuItem>

                    <StyledMenuItem
                        className={`${contrast}LinkColor ${contrast}Text`}
                        contrast={contrast}
                        onClick={() => {
                            if (currentUserId)
                                handleReportModal(true);
                            else
                                handleLogin()
                        }}
                    >
                        <ListItemIcon className={`${contrast}IconColor`}>
                            <ReportProblemIcon />
                        </ListItemIcon>
                        Reportar
                    </StyledMenuItem>
                </Menu>
            </div>
        </>
    );
}

export const StyledMenuItem = styled(MenuItem)`
    background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
    .MuiSvgIcon-root {
        vertical-align: middle !important;
    }
    a {
        color: inherit !important;
    }
`;