ReportUserForm.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 { 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 FormControl from '@material-ui/core/FormControl';
import TextField from '@material-ui/core/TextField';

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

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

    /*values are set according to backend complaint id*/
    const [options] = React.useState([
        {value : "6", text :'Esta pessoa está fingindo ser eu ou alguém que eu conheço.'},
        {value : "4", text : 'Essa pessoa envia spam.'},
        {value : "3", text : 'Essa é uma conta falsa.'},
        {value : "1", text : ' A publicação dessa pessoa viola os diretos autorais.'},
        {value : "2", text : 'As publicações dessa pessoa contém conteúdo ofensivo/abusivo.'}
    ])

    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 formSubmit = (e) => {
        e.preventDefault()
        const finalRadioValue = value
        const finalMoreInfo = moreInfo

        if( finalRadioValue != -1 && !(finalMoreInfo.key)) {
            props.handleSubmit(finalRadioValue, finalMoreInfo.value)
        }
    }

    return (
        <form onSubmit={(e) => {formSubmit(e)}}>
            <StyledFormControl component="fieldset">
                <RadioGroup value={value} onChange={handleChange}>
                    {
                        options.map(option =>
                            <FormControlLabel value={option.value} control={<Radio color="orange"/>} label={option.text} />
                        )
                    }
                </RadioGroup>
            </StyledFormControl>

            <StyledTextField
                id = {"Escreva mais sobre o problema"}
                label={"Escreva mais sobre o problema"}
                type = {"text"}
                value = {moreInfo.value}
                onChange = {e => handleChangeMoreInfo(e)}
                helperText = {moreInfo.value.length + '/150'}
                multiline={true}
                rowsMax = {"5"}
                error = {moreInfo.key}
                required = {false}
                style={{width:"100%"}}
            />

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

export const ButtonsDiv = styled.div`
    display : flex;
    flex-direction : row;
    justify-content : flex-end;
    align-items : center;
`

export const ButtonCancelar = styled(Button)`
    &:hover {
        background-color : rgba(158,158,158,0.2) !important;
    }
    height : 36px !important;
    padding-left : 16px !important;
    padding-right : 16px !important;
    font-weight : 500 !important;
    border-radius : 3px !important;
    color :#666 !important;
    background-color: transparent;
    min-width : 88px !important;
    height : 36px !important;
`

export const ButtonEnviar = styled(Button)`
    background-color : #ff7f00 !important;
    color : #fff !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;
    text-decoration : none !important;

    .MuiButton-label {
        padding-right : 16px;
        padding-left : 16px;
    }
`
export const StyledTextField = styled(TextField)`
    .MuiFormHelperText-root {
        text-align : left;
    }

    label.Mui-focused {
        color : orange;
    }

    label.Mui-focused.Mui-error {
        color : red;
    }

    .MuiInput-underline::after {
        border-bottom: 2px solid orange;
    }
`

export const StyledFormControl = styled(FormControl)`
    .MuiFormControlLabel-root {
        color : #666;
    }
    .MuiIconButton-label {
        color : #666;
    }
    .PrivateRadioButtonIcon-checked {
        color : orange;
    }

    .MuiTypography-body1 {
        font-size : 14px;
    }
`