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