Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState } from 'react';
import Spinner from '../../../shared/loading-spinner/Spinner';
import styled from 'styled-components';
import { addNotification } from '../../../redux/notification/notification.actions';
import { connect } from 'react-redux';
import { axios } from '../../../utils';

const StyledSpinnerContainer = styled.div`
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 300;
`;
function CloseAccount(props) {
    const { addNotification } = props
    const [showInputCode, setShowInputCode] = useState(false);
    const [loading, setLoading] = useState(false);
    const [code, setCode] = useState('');
    const handleAlert = (status, message) => {
        addNotification({
            style: status ? "success" : 'danger',
            msg: message || 'Email enviado exitosamente',
        });
    }
    const handleGetCode = async () => {
        try {
            setShowInputCode(true)
            setLoading(true)
            const res = await axios.get('/account-settings/delete-account');
            handleAlert(res.data.success, res.data.data.message)
        } catch (error) {
            handleAlert(false, 'Disculpe, ha ocurrido un error')
            console.log('>>: error > ', error)
        } finally {
            setLoading(false)
        }
    }

    const resendCode = async () => {
        try {
            setLoading(true)
            const res = await axios.get('/account-settings/delete-account');
            handleAlert(res.data.success, res.data.data.message)
            console.log('>>: resend code > ', res)
        } catch (error) {
            handleAlert(false, 'Disculpe, ha ocurrido un error')
            console.log('>>: error > ', error)
        } finally {
            setLoading(false)
        }
    }

    const logout = () => {
        window.location.href = '/signout';
    }
    const handleSubmit = async (e) => {
        try {
            e.preventDefault()
            const data = new FormData();
            data.append('code', code)
            setLoading(true)
            const res = await axios.post('/account-settings/delete-account', data);
            handleAlert(res.data.success, res.data.data.message)
            if (res.data.success) {
                logout()
            }
        } catch (error) {
            handleAlert(false, 'Disculpe, ha ocurrido un error')
            console.log('>>: error > ', error)
        } finally {
            setLoading(false)
        }
    }

    const CloseAccountContent = () => {
        if (showInputCode) {
            return <form onSubmit={handleSubmit}>
                <div className="form-group">
                    <label htmlFor="exampleInputEmail1">Ingrese el codigo enviado a su correo electrónico</label>
                    <input
                        type="text"
                        className="form-control"
                        onChange={e => setCode(e.target.value)}
                        value={code}
                    />
                    <button className="btn btn-link btn-sm" onClick={() => resendCode()}>
                        ¿No ha recibido su correo?, solicite un codigo nuevo
                    </button>
                </div>
                <button type="submit" className="btn btn-primary">Enviar</button>
            </form>
        } else {
            return <>
                <h1 className="text-center">¿Esta seguro de eliminar su cuenta?</h1>
                <div className="row">
                    <div className='col-12 col-md-6 mx-auto d-flex justify-content-between'>
                        <button className="btn btn-primary" onClick={() => handleGetCode()} disabled={showInputCode}>Si, estoy seguro</button>
                        <button className="btn btn-primary" disabled={showInputCode}>No estoy seguro</button>
                    </div>
                </div>
            </>
        }
    }
    return (
        <div className="acc-setting h-100 d-flex justify-content-center align-items-center" style={{ position: "relative" }}>
            <div className="container">
                <div className="">
                    {CloseAccountContent()}
                </div>
            </div>
            {loading && (
                <StyledSpinnerContainer>
                    <Spinner />
                </StyledSpinnerContainer>
            )}
        </div>
    )
}

const mapDispatchToProps = {
    addNotification: (notification) => addNotification(notification),
};

export default connect(null, mapDispatchToProps)(CloseAccount);