PasswordRecoveryPage.js

import React, {useState, useContext} from 'react'
import {BackgroundDiv} from '../Components/TabPanels/StyledComponents.js'
import {Link} from 'react-router-dom'
import Paper from '@material-ui/core/Paper';
import styled from 'styled-components'
import FormInput from "../Components/FormInput.js"
import ValidateUserInput from '../Components/FormValidationFunction.js'
import {CompletarCadastroButton} from '../Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js'
import Default from '../Components/PasswordRecoveryComponents/Default.js'
import Success from '../Components/PasswordRecoveryComponents/Success.js'
import {Store} from '../Store.js'
import Error from '../Components/PasswordRecoveryComponents/Error.js'
import CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js'

export default function PasswordRecoveryPage (props) {
    const {state, dispatch} = useContext(Store)

    const [formEmail, setEmail] = useState(
        {
            dict : {
                key : false,
                value : ""
            }
        }
    )

    const handleChange = (e) => {
        const userInput = e.target.value
        const flag = ValidateUserInput('email', userInput)

        setEmail({...formEmail, dict : {
            key : flag,
            value : userInput
        }})
        console.log(formEmail)
    }

    const [aux, setCase] = useState('default')
    const handleChangeSwitch = (value) => setCase(value);

    const onSubmit = (e, email) => {
        e.stopPropagation()
        const query = email

        setEmail({...formEmail, dict : {
            key : false,
            value : ''
        }})
        handleChangeSwitch('error')
    }


    const components = {
        default : <Default handleChange={handleChange} onSubmit={onSubmit} value={formEmail.dict.value} error={formEmail.dict.key}/>,
        success : <Success email={state.currentUser.email} changeSwitch={handleChangeSwitch}/>,
        error : <Error email={state.currentUser.email} handleChange={handleChange} onSubmit={onSubmit} value={formEmail.dict.value} error={formEmail.dict.key}/>
    }

    const switchFunction = (value) => {
        switch(value) {
            case 'success':
                return components.success;
                break;
            case 'error':
                return components.error;
                break;
            default:
                return components.default
                break;

            }
    }

    return (
        <>
            <BackgroundDiv>
                <div style={{minWidth:"1170px"}}>
                    <CustomizedBreadcrumbs
                        values={["Recuperar senha"]}
                    />
                </div>

                <div style={{justifyContent:"center", textAlign:"center", maxWidth:"600px", margin:"auto"}}>
                <Paper elevation={3}>
                    <CardDiv>
                            {switchFunction(aux)}
                    </CardDiv>
                </Paper>
                </div>
            </BackgroundDiv>
        </>
    )
}

const CardDiv = styled.div`
    background-color : #fff;
    box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
    padding : 30px 60px;
    margin : 50px 0;
`