Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react';

import { connect } from 'react-redux';

import { Link } from 'react-router-dom';

import { axios } from '@app/utils';

import { asyncLogout } from '@store/auth/auth.actions';

import { addNotification } from '@app/redux/notification/notification.actions';

import Form from '@app/components/UI/form/Form';

import Widget from '@app/components/UI/Widget';

import Button from '@app/components/UI/buttons/Buttons';

import Spinner from '@app/components/UI/Spinner';

import Input from '@app/components/UI/inputs/Input';

function CloseAccount({ addNotification }) {

  const [showInputCode, setShowInputCode] = useState(false);

  const [loading, setLoading] = useState(false);

  const [code, setCode] = useState('');

  const handleAlert = ({ status = true, message = 'Email enviado exitosamente' }) => {

    addNotification({

      style: status ? 'success' : 'danger',

      msg: message

    });

  };

  const handleGetCode = async () => {

    try {

      setShowInputCode(true);

      setLoading(true);

      const response = await axios.get('/account-settings/delete-account');

      const { data, success } = response.data;

      handleAlert(success, data.message);

    } catch (error) {

      handleAlert(false, error.message);

    } finally {

      setLoading(false);

    }

  };

  const resendCode = async (e) => {

    e.preventDefault();

    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 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) {

        asyncLogout();

      }

    } catch (error) {

      handleAlert(false, 'Disculpe, ha ocurrido un error');

      console.log('>>: error > ', error);

    } finally {

      setLoading(false);

    }

  };

  return (

    <Widget>

      <Widget.Body>

        {showInputCode ? (

          <Form onSubmit={handleSubmit}>

            <Input

              id='verify'

              name='verify'

              label='Ingrese el codigo enviado a su correo electrónico'

              onChange={(e) => setCode(e.target.value)}

              value={code}

            />

            <Link to='/reset-code' onClick={resendCode}>

              ¿No ha recibido su correo?, solicite un codigo nuevo

            </Link>

            <Button color='primary' type='submit'>

              Enviar

            </Button>

          </Form>

        ) : (

          <>

            <h2>¿Esta seguro de eliminar su cuenta?</h2>

            <Button

              color='primary'

              onClick={() => handleGetCode()}

              disabled={showInputCode}

              styles={{

                marginBottom: '.5rem'

              }}

            >

              Si, estoy seguro

            </Button>

          </>

        )}

        {loading && <Spinner />}

      </Widget.Body>

    </Widget>

  );

}

const mapDispatchToProps = {

  addNotification: (notification) => addNotification(notification)

};

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