Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4064 | | 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('');
4378 stevensc 25 
 
1992 steven 26 
    const handleAlert = (status, message) => {
27 
        addNotification({
28 
            style: status ? "success" : 'danger',
1996 steven 29 
            msg: message || 'Email enviado exitosamente',
1992 steven 30 
        });
31 
    }
4378 stevensc 32 
 
2717 stevensc 33 
    const handleGetCode = async () => {
1966 steven 34 
        try {
1991 steven 35 
            setShowInputCode(true)
1990 steven 36 
            setLoading(true)
37 
            const res = await axios.get('/account-settings/delete-account');
1997 steven 38 
            handleAlert(res.data.success, res.data.data.message)
1966 steven 39 
        } catch (error) {
1992 steven 40 
            handleAlert(false, 'Disculpe, ha ocurrido un error')
1966 steven 41 
            console.log('>>: error > ', error)
2717 stevensc 42 
        } finally {
1990 steven 43 
            setLoading(false)
1966 steven 44 
        }
45 
    }
1990 steven 46 
 
1991 steven 47 
    const resendCode = async () => {
48 
        try {
49 
            setLoading(true)
50 
            const res = await axios.get('/account-settings/delete-account');
1997 steven 51 
            handleAlert(res.data.success, res.data.data.message)
1991 steven 52 
            console.log('>>: resend code > ', res)
53 
        } catch (error) {
1992 steven 54 
            handleAlert(false, 'Disculpe, ha ocurrido un error')
1991 steven 55 
            console.log('>>: error > ', error)
2717 stevensc 56 
        } finally {
1991 steven 57 
            setLoading(false)
58 
        }
59 
    }
60 
 
2000 steven 61 
    const logout = () => {
62 
        window.location.href = '/signout';
1995 steven 63 
    }
1990 steven 64 
    const handleSubmit = async (e) => {
1968 steven 65 
        try {
1990 steven 66 
            e.preventDefault()
2008 steven 67 
            const data = new FormData();
68 
            data.append('code', code)
1968 steven 69 
            setLoading(true)
2014 steven 70 
            const res = await axios.post('/account-settings/delete-account', data);
71 
            handleAlert(res.data.success, res.data.data.message)
2717 stevensc 72 
            if (res.data.success) {
2015 steven 73 
                logout()
74 
            }
1968 steven 75 
        } catch (error) {
1992 steven 76 
            handleAlert(false, 'Disculpe, ha ocurrido un error')
1968 steven 77 
            console.log('>>: error > ', error)
2717 stevensc 78 
        } finally {
1968 steven 79 
            setLoading(false)
80 
        }
81 
    }
1971 steven 82 
 
1977 steven 83 
    const CloseAccountContent = () => {
2717 stevensc 84 
        if (showInputCode) {
1975 steven 85 
            return <form onSubmit={handleSubmit}>
86 
                <div className="form-group">
1992 steven 87 
                    <label htmlFor="exampleInputEmail1">Ingrese el codigo enviado a su correo electrónico</label>
2008 steven 88 
                    <input
89 
                        type="text"
90 
                        className="form-control"
91 
                        onChange={e => setCode(e.target.value)}
92 
                        value={code}
93 
                    />
4378 stevensc 94 
                    <a href='#' onClick={(e) => {
95 
                        e.preventDefault()
96 
                        resendCode()
97 
                    }}>
1992 steven 98 
                        ¿No ha recibido su correo?, solicite un codigo nuevo
4378 stevensc 99 
                    </a>
1975 steven 100 
                </div>
101 
                <button type="submit" className="btn btn-primary">Enviar</button>
102 
            </form>
2717 stevensc 103 
        } else {
1975 steven 104 
            return <>
1983 steven 105 
                <h1 className="text-center">¿Esta seguro de eliminar su cuenta?</h1>
1975 steven 106 
                <div className="row">
2717 stevensc 107 
                    <div className='col-12 col-md-6 mx-auto d-flex justify-content-between'>
1991 steven 108 
                        <button className="btn btn-primary" onClick={() => handleGetCode()} disabled={showInputCode}>Si, estoy seguro</button>
4378 stevensc 109 
                        <button className="btn btn-secondary" disabled={showInputCode}>No estoy seguro</button>
1975 steven 110 
                    </div>
111 
                </div>
112 
            </>
113 
        }
1977 steven 114 
    }
1971 steven 115 
    return (
4378 stevensc 116 
        <div className="acc-setting h-100 justify-content-center align-items-center">
1971 steven 117 
            <div className="container">
4378 stevensc 118 
                {CloseAccountContent()}
1966 steven 119 
            </div>
4378 stevensc 120 
            {loading && <Spinner />}
1966 steven 121 
        </div>
122 
    )
123 
}
124 
 
1992 steven 125 
const mapDispatchToProps = {
126 
    addNotification: (notification) => addNotification(notification),
127 
};
2717 stevensc 128 
 
1994 steven 129 
export default connect(null, mapDispatchToProps)(CloseAccount);