CriarColecaoForm.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, { useContext } from 'react'
import { Store } from '../Store.js'
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';
import { postRequest } from './HelperFunctions/getAxiosConfig'

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

    const [value, setValue] = React.useState(-1);

    /*values are set according to backend complaint id*/
    const [options] = React.useState([
        { value: "pública", text: 'Pública (Sua coleção estará disponível para todos)' },
        { value: "privada", text: 'Privada (Somente você poderá visualizar esta coleção)' }
    ])

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

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

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

        const flag = userInput.length === 0 ? true : false

        setColName({
            ...colName,
            key: flag,
            value: userInput
        })
    }

    function handleSuccess(data) {
        props.finalize(data.id)
    }
    const formSubmit = (e) => {
        e.preventDefault()

        // {/*if user didn't select either one, default to privada*/}
        const finalRadioValue = value === 'pública' ? 'public' : 'private'
        const finalColName = colName

        if (!(finalColName.key)) {
            let payload = {
                "collection": {
                    "name": finalColName.value,
                    "owner_id": state.currentUser.id,
                    "owner_type": "User",
                    "privacy": finalRadioValue
                }
            }
            postRequest(`/collections/`, payload, handleSuccess, (error) => { console.log(error) })

        }
    }

    return (
        <form onSubmit={(e) => { formSubmit(e) }} style={{ textAlign: "left" }}>

            <StyledTextField
                id={"col-name"}
                label={"Nome da coleção"}
                type={"text"}
                value={colName.value}
                onChange={e => handleColName(e)}
                error={colName.key}
                contrast={state.contrast}
                helperText={colName.key ? <span>O nome é importante para identificar a sua coleção na plataforma.<br />Ex: Matemática Ensino Médio </span> : ""}
                required={true}
                style={{ width: "100%" }}
            />

            <span style={{ fontSize: "12px", color: "#b3b3b3" }}>Esta coleção é:</span>

            <StyledFormControl contrast={state.contrast} component="fieldset">
                <RadioGroup value={value} onChange={handleChange}>
                    {
                        options.map(option =>
                            <FormControlLabel key={option.value} value={option.value} control={<Radio color="#673ab7" />} label={option.text} />
                        )
                    }
                </RadioGroup>
            </StyledFormControl>

            <ButtonsDiv>
                <ButtonCancelar contrast={state.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
                <ButtonEnviar contrast={state.contrast} type="submit">CRIAR COLEÇÃO</ButtonEnviar>
            </ButtonsDiv>
        </form>
    );
}

export const ButtonsDiv = styled.div`
    display : flex;
    flex-direction : row;
    justify-content : center;
    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: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
    background-color: transparent;
    min-width : 88px !important;
    height : 36px !important;
`

export const ButtonEnviar = styled(Button)`
    background-color: ${props => props.contrast === "" ? "#673ab7 !important" : "black !important"};
    color: ${props => props.contrast === "" ? "#fff !important" : "yellow !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: ${props => props.contrast === "" ? "none !important" : "underline !important"};
    border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
    :hover{
        background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
    }
    .MuiButton-label {
        padding-right : 16px;
        padding-left : 16px;
    }
`
export const StyledTextField = styled(TextField)`
    margin : 18px 0 !important;

    .MuiFormHelperText-root {
        text-align : right;
    }

    label.Mui-focused {
        color: ${props => props.contrast === "" ? "#673ab7" : "yellow"};
    }

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

    .MuiInput-underline::after {
        color: ${props => props.contrast === "" ? "#673ab7" : "yellow"};
    }
`

export const StyledFormControl = styled(FormControl)`
    display : block !important;

    .MuiFormControlLabel-root {
        color: ${props => props.contrast === "" ? "#666" : "yellow"};
        text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
    }
    .MuiIconButton-label {
        color: ${props => props.contrast === "" ? "#666" : "white"};
    }
    .PrivateRadioButtonIcon-checked {
        color : orange;
    }

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