Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 2717 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
4064 stevensc 1 
import React, { useState } from 'react';
1968 steven 2 
import Spinner from '../../../shared/loading-spinner/Spinner';
1969 steven 3 
import styled from 'styled-components';
1992 steven 4 
import { addNotification } from '../../../redux/notification/notification.actions';
1993 steven 5 
import { connect } from 'react-redux';
4064 stevensc 6 
import { axios } from '../../../utils';
1966 steven 7 
 
1968 steven 8 
const StyledSpinnerContainer = styled.div`
9 
  position: absolute;
10 
  left: 0;
11 
  top: 0;
12 
  width: 100%;
13 
  height: 100%;
14 
  background: rgba(255, 255, 255, 0.4);
15 
  display: flex;
16 
  justify-content: center;
17 
  align-items: center;
18 
  z-index: 300;
19 
`;
1992 steven 20 
function CloseAccount(props) {
2717 stevensc 21 
    const { addNotification } = props
1966 steven 22 
    const [showInputCode, setShowInputCode] = useState(false);
1968 steven 23 
    const [loading, setLoading] = useState(false);
2008 steven 24 
    const [code, setCode] = useState('');
1992 steven 25 
    const handleAlert = (status, message) => {
26 
        addNotification({
27 
            style: status ? "success" : 'danger',
1996 steven 28 
            msg: message || 'Email enviado exitosamente',
1992 steven 29 
        });
30 
    }
2717 stevensc 31 
    const handleGetCode = async () => {
1966 steven 32 
        try {
1991 steven 33 
            setShowInputCode(true)
1990 steven 34 
            setLoading(true)
35 
            const res = await axios.get('/account-settings/delete-account');
1997 steven 36 
            handleAlert(res.data.success, res.data.data.message)
1966 steven 37 
        } catch (error) {
1992 steven 38 
            handleAlert(false, 'Disculpe, ha ocurrido un error')
1966 steven 39 
            console.log('>>: error > ', error)
2717 stevensc 40 
        } finally {
1990 steven 41 
            setLoading(false)
1966 steven 42 
        }
43 
    }
1990 steven 44 
 
1991 steven 45 
    const resendCode = async () => {
46 
        try {
47 
            setLoading(true)
48 
            const res = await axios.get('/account-settings/delete-account');
1997 steven 49 
            handleAlert(res.data.success, res.data.data.message)
1991 steven 50 
            console.log('>>: resend code > ', res)
51 
        } catch (error) {
1992 steven 52 
            handleAlert(false, 'Disculpe, ha ocurrido un error')
1991 steven 53 
            console.log('>>: error > ', error)
2717 stevensc 54 
        } finally {
1991 steven 55 
            setLoading(false)
56 
        }
57 
    }
58 
 
2000 steven 59 
    const logout = () => {
60 
        window.location.href = '/signout';
1995 steven 61 
    }
1990 steven 62 
    const handleSubmit = async (e) => {
1968 steven 63 
        try {
1990 steven 64 
            e.preventDefault()
2008 steven 65 
            const data = new FormData();
66 
            data.append('code', code)
1968 steven 67 
            setLoading(true)
2014 steven 68 
            const res = await axios.post('/account-settings/delete-account', data);
69 
            handleAlert(res.data.success, res.data.data.message)
2717 stevensc 70 
            if (res.data.success) {
2015 steven 71 
                logout()
72 
            }
1968 steven 73 
        } catch (error) {
1992 steven 74 
            handleAlert(false, 'Disculpe, ha ocurrido un error')
1968 steven 75 
            console.log('>>: error > ', error)
2717 stevensc 76 
        } finally {
1968 steven 77 
            setLoading(false)
78 
        }
79 
    }
1971 steven 80 
 
1977 steven 81 
    const CloseAccountContent = () => {
2717 stevensc 82 
        if (showInputCode) {
1975 steven 83 
            return <form onSubmit={handleSubmit}>
84 
                <div className="form-group">
1992 steven 85 
                    <label htmlFor="exampleInputEmail1">Ingrese el codigo enviado a su correo electrónico</label>
2008 steven 86 
                    <input
87 
                        type="text"
88 
                        className="form-control"
89 
                        onChange={e => setCode(e.target.value)}
90 
                        value={code}
91 
                    />
1992 steven 92 
                    <button className="btn btn-link btn-sm" onClick={() => resendCode()}>
93 
                        ¿No ha recibido su correo?, solicite un codigo nuevo
1990 steven 94 
                    </button>
1975 steven 95 
                </div>
96 
                <button type="submit" className="btn btn-primary">Enviar</button>
97 
            </form>
2717 stevensc 98 
        } else {
1975 steven 99 
            return <>
1983 steven 100 
                <h1 className="text-center">¿Esta seguro de eliminar su cuenta?</h1>
1975 steven 101 
                <div className="row">
2717 stevensc 102 
                    <div className='col-12 col-md-6 mx-auto d-flex justify-content-between'>
1991 steven 103 
                        <button className="btn btn-primary" onClick={() => handleGetCode()} disabled={showInputCode}>Si, estoy seguro</button>
1983 steven 104 
                        <button className="btn btn-primary" disabled={showInputCode}>No estoy seguro</button>
1975 steven 105 
                    </div>
106 
                </div>
107 
            </>
108 
        }
1977 steven 109 
    }
1971 steven 110 
    return (
1978 steven 111 
        <div className="acc-setting h-100 d-flex justify-content-center align-items-center" style={{ position: "relative" }}>
1971 steven 112 
            <div className="container">
1978 steven 113 
                <div className="">
1974 steven 114 
                    {CloseAccountContent()}
1971 steven 115 
                </div>
1966 steven 116 
            </div>
1968 steven 117 
            {loading && (
118 
                <StyledSpinnerContainer>
119 
                    <Spinner />
120 
                </StyledSpinnerContainer>
121 
            )}
1966 steven 122 
        </div>
123 
    )
124 
}
125 
 
1992 steven 126 
const mapDispatchToProps = {
127 
    addNotification: (notification) => addNotification(notification),
128 
};
2717 stevensc 129 
 
1994 steven 130 
export default connect(null, mapDispatchToProps)(CloseAccount);