ReportColecaoForm.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 from 'react';
import { Button } from '@material-ui/core';
import styled from 'styled-components'
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import {StyledFormControl, ButtonsDiv, ButtonCancelar, StyledTextField, useStyles} from './ReportUserForm.js'
import { withStyles } from '@material-ui/core/styles';

const StyledRadio = withStyles({
    root: {
        color: '#666',
        '&$checked': {
            color: '#673ab7',
        },
    },
    checked: {},
})((props) => <Radio color="default" {...props} />);

export default function ReportColecaoForm (props) {
    const [value, setValue] = React.useState(-1);

    const classes = useStyles();

    const handleChange = (event) => {
        setValue(event.target.value);
    };

    /*values are set according to backend complaint id*/
    const [options] = React.useState([
        {value : "1", text : 'A Coleção viola os direitos autorais.'},
        {value : "2", text : 'A Coleção contém conteúdo ofensivo/abusivo.'},
        {value : "5", text : 'A descrição da Coleção não corresponde ao seu conteúdo.'}
    ])

    const [moreInfo, setMoreInfo] = React.useState({
        key : false,
        value : "",
    })

    const handleChangeMoreInfo = (e) => {
        const userInput = e.target.value

        const flag = userInput.length > 150 ? true : false

        setMoreInfo({...moreInfo,
            key : flag,
            value : userInput
        })
    }

    const handleSubmit = (e) => {
        e.preventDefault()
        const finalRadioValue = value
        const finalMoreInfo = moreInfo

        if( finalRadioValue !== -1 && !(finalMoreInfo.key)) {
            props.handleSubmit(finalRadioValue, finalMoreInfo.value)
        }
        else {
            console.log('oops')
        }
    }

    return (
        <form onSubmit={(e) => handleSubmit(e)} style={{textAlign : "left"}}>
        <StyledFormControl contrast={props.contrast} component="fieldset">
            <RadioGroup value={value} onChange={handleChange}>
                {
                    options.map(option =>
                        <FormControlLabel value={option.value} control={<StyledRadio/>} label={option.text} />
                    )
                }
            </RadioGroup>
        </StyledFormControl>

        <StyledTextField
            contrast={props.contrast}
            id = {"report-text-field"}
            label={"Escreva mais sobre o problema"}
            value = {moreInfo.value}
            onChange = {e => handleChangeMoreInfo(e)}
            helperText = {moreInfo.value.length + '/150'}
            multiline={true}
            rowsMax = {"5"}
            error = {moreInfo.key}
            InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
            required = {false}
            style={{width : "100%"}}
        />

        <ButtonsDiv>
            <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
            <ButtonEnviar contrast={props.contrast} type="submit">ENVIAR</ButtonEnviar>
        </ButtonsDiv>
    </form>
    )
}

const ButtonEnviar = styled(Button)`
    color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
    background-color: ${props => props.contrast === "" ? "#673ab7 !important" : "black !important"};
    text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
    border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
    font-size: 14px !important;
    font-weight: 500 !important;
    height: 36px !important;
    border-radius: 3px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26) !important;
    outline : none !important;
    min-width : 88px !important;
    vertical-align : middle !important;
    margin : 6px 8px !important;

    .MuiButton-label {
        padding-right : 16px;
        padding-left : 16px;
    }
`