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 { 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) {
      console.log('>>: error > ', error)
      handleAlert(false, 'Disculpe, ha ocurrido un error')
    } 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 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)
    }
  }

  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)