ContactForm.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 { Store } from '../Store.js'
import styled from 'styled-components';
import FormInput from "../Components/FormInput.js"
import { postRequest } from './HelperFunctions/getAxiosConfig'
import LoginModal from './LoginModal.js'
import Snackbar from '@material-ui/core/Snackbar';
import SignUpModal from './SignUpModal'
import MuiAlert from '@material-ui/lab/Alert';

function Alert(props) {
    return <MuiAlert elevation={6} variant="filled" {...props} />;
}

const Button = styled.button`
    background-color: ${props => props.contrast === "" ? "#00acc1" : "black"};
    color: ${props => props.contrast === "" ? "#fff" : "yellow"};
    font-family: Roboto,sans-serif;
    font-size: 14px;
    font-weight: 500;
    height: 36px;
    padding-left: 16px;
    padding-right: 16px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
    outline: none;
    position: relative;
    cursor: pointer;
    min-height: 36px;
    min-width: 88px;
    line-height: 36px;
    vertical-align: middle;
    align-items: center;
    text-align: center;
    border-radius: 3px;
    box-sizing: border-box;
    user-select: none;
    border: ${props => props.contrast === "" ? 0 : "1px solid white"};
    padding: 0 6px;
    padding-right: 6px;
    padding-left: 6px;
    margin: 6px 8px;

    white-space: nowrap;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 14px;
    font-style: inherit;
    font-variant: inherit;
    font-family: inherit;
    text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
    overflow: hidden;
    transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);
    :hover{
        background-color: ${props => props.contrast === "" ? "rgba(0, 172, 193, 0.65)" : "rgba(255,255,0,0.24)"};
    }

`



function validateNome(nome) {
    let flag = false
    if (nome.length === 0) {
        flag = true
    }

    return flag
}


function validateMensagem(mensagem) {
    let flag = false
    if (mensagem.length === 0) {
        flag = true
    }

    return flag
}

function validateEmail(email) {
    let flag = false
    if (email.split("").filter(x => x === "@").length !== 1 || email.length < 7) {
        flag = true
    }
    return flag
}

function Formulario(props) {
    const { state } = useContext(Store)
    const [loginOpen, setLogin] = useState(false)
    const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
    const [signUpOpen, setSignUp] = useState(false)

    const [nome, handleNome] = useState({
        dict: {
            key: false,
            value: ""
        }
    })
    const [email, handleEmail] = useState({
        dict: {
            key: false,
            value: ""
        }
    })
    const [mensagem, handleMensagem] = useState({
        dict: {
            key: false,
            value: ""
        }
    })


    const preencheNome = (e) => {
        const aux2 = e.target.value
        const flag = validateNome(aux2)
        handleNome({
            ...nome, dict: {
                key: flag,
                value: e.target.value
            }
        })
        console.log(nome)
    }

    const preencheEmail = (e) => {
        const aux = e.target.value
        const flag = validateEmail(aux)
        handleEmail({
            ...email, dict: {
                key: flag,
                value: e.target.value
            }
        })
        console.log(email)
    }

    const preencheMensagem = (e) => {
        const msg = e.target.value
        console.log(msg)
        let flag = validateMensagem(msg)
        handleMensagem({
            ...mensagem, dict: {
                key: flag,
                value: msg
            }
        })
        console.log(mensagem)
    }

    const limpaTudo = () => {

        handleNome({
            dict: {
                key: false,
                value: ""
            }
        });

        handleEmail({
            dict: {
                key: false,
                value: ""
            }
        })

        handleMensagem({
            dict: {
                key: false,
                value: ""
            }
        })

    }

    const handleSignUp = () => {
        setSignUp(!signUpOpen)
    }

    const handleLogin = () => {
        setLogin(!loginOpen)
    }

    const toggleSnackbar = (event, reason) => {
        if (reason === 'clickaway') {
            return;
        }

        handleSuccessfulLogin(false);
    }

    const onSubmit = (e) => {
        //on submit we should prevent the page from refreshing
        e.preventDefault(); //though this is arguable
        console.log(!(nome.dict.key && email.dict.key && mensagem.dict.key))
        // Se não houver erro em nunhum dos campos E nenhum dos campos for vazio: a página faz o contato com o backend e os campos ficam em branco no formulário
        if (!(nome.dict.key || email.dict.key || mensagem.dict.key)) {
            let payload = {
                contact: {
                    name: nome.dict.value,
                    email: email.dict.value,
                    message: mensagem.dict.value
                }
            }
            postRequest(`/contacts`, payload, (data) => { limpaTudo() }, (error) => { console.log(error) })
        }
    }




    return (
        <React.Fragment>
            <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
                anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
            >
                <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
            </Snackbar>
            {/*-------------------------------MODALS---------------------------------------*/}
            <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
                openSnackbar={() => { handleSuccessfulLogin(true) }}
            />
            <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
            {/*----------------------------------------------------------------------------*/}
            <div>
                <form onSubmit={e => onSubmit(e)}>
                    <FormInput
                        contrast={props.contrast}

                        inputType={"text"}
                        name={"nome"}
                        value={nome.dict.value}
                        placeholder={"Nome *"}
                        error={nome.dict.key}
                        help={nome.dict.key ? "insira seu nome para o contato " : ""}
                        handleChange={e => preencheNome(e)}
                    />
                    <br />
                    <FormInput
                        contrast={props.contrast}
                        inputType={"text"}
                        name={"email"}
                        value={email.dict.value}
                        placeholder={"E-mail *"}
                        error={email.dict.key}
                        help={email.dict.key ? "Formato de e-mail incorreto ou vazio, tente : usuario@provedor.com" : ""}
                        handleChange={e => preencheEmail(e)}
                    />
                    <br />
                    <br />
                    <FormInput
                        contrast={props.contrast}
                        inputType={"text"}
                        name={"mensagem"}
                        value={mensagem.dict.value}
                        placeholder={"Mensagem *"}
                        multi={true}
                        rows="5"
                        rowsMax="6"
                        error={mensagem.dict.key}
                        help={mensagem.dict.key ? "Faltou escrever sua mensagem de sugestão, crítica ou dúvida." : "Escreva sua mensagem no campo acima."}
                        handleChange={e => preencheMensagem(e)}
                    />
                    <br />
                    <br />
                    <div style={{ display: "flex", justifyContent: "center" }}>
                        {
                            state.currentUser.id !== '' ? (
                                <Button contrast={props.contrast} onClick={e => onSubmit(e)} >ENVIAR MENSAGEM</Button>
                            )
                            :
                            (
                                <Button contrast={props.contrast} onClick={e => { e.preventDefault(); handleLogin(true); }} >ENVIAR MENSAGEM</Button>
                            )
                        }
                    </div>
                </form>
            </div>
        </React.Fragment>
    );
}

export default Formulario;