Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react'
import { connect } from 'react-redux'
import { useForm } from 'react-hook-form'

import { useFetch } from '@hooks'
import { axios } from '@app/utils'
import { addNotification } from '@app/redux/notification/notification.actions'

import Widget from '@app/components/UI/Widget'
import Spinner from '@app/components/UI/Spinner'
import FormErrorFeedback from '@app/components/UI/form/FormErrorFeedback'
import SwitchInput from '@app/components/UI/SwitchInput'

const BasicSettings = ({
  addNotification = function () {} // Redux action
}) => {
  const { data: timezones } = useFetch('/helpers/timezones', {})
  const [loading, setLoading] = useState(false)
  const [isAdult, setIsAdult] = useState(false)

  const { register, handleSubmit, setValue, watch, errors, getValues } =
    useForm()

  const onSubmit = async (data) => {
    setLoading(true)
    const formData = new FormData()

    formData.append('is_adult', isAdult ? 'y' : 'n')
    Object.entries(data).map(([key, value]) => formData.append(key, value))

    axios
      .post('/account-settings/basic', formData)
      .then(({ data: responseData }) => {
        const { data, success } = responseData

        if (!success) {
          const errorMessage =
            typeof data === 'string'
              ? data
              : Object.entries(data)
                  .map(([key, value]) => `${key}: ${value}`)
                  .join(', ')

          throw new Error(errorMessage)
        }

        addNotification({ style: 'success', msg: data })
      })
      .catch((err) => {
        addNotification({ style: 'danger', msg: err.message })
      })
      .finally(() => setLoading(false))
  }

  const getBasicSettings = () => {
    setLoading(true)

    axios
      .get('/account-settings/basic')
      .then(({ data: responseData }) => {
        const { data, success } = responseData

        if (success) {
          Object.entries(data).forEach(([key, value]) => {
            const currentValue = getValues(key)

            if (key === 'is_adult') {
              return setIsAdult(value === 'y')
            }

            if (!currentValue) {
              register(key, { required: true })
            }

            setValue(key, value)
          })
        }
      })
      .catch((err) => {
        addNotification({ style: 'danger', msg: err.message })
      })
      .finally(() => setLoading(false))
  }

  useEffect(() => {
    register('timezone', {
      required: 'Por favor ingrese su zona horaria'
    })

    getBasicSettings()
  }, [])

  return (
    <Widget>
      <Widget.Header title='Información básica' />

      <Widget.Body>
        {loading ? (
          <Spinner />
        ) : (
          <form onSubmit={handleSubmit(onSubmit)}>
            <div className='inputs__container'>
              <div className='cp-field'>
                <label htmlFor='first_name'>Nombre</label>
                <input
                  type='text'
                  name='first_name'
                  ref={register}
                  defaultValue={watch('first_name')}
                />
                {errors.first_name && (
                  <FormErrorFeedback>
                    Por favor ingrese su nombre
                  </FormErrorFeedback>
                )}
              </div>
              <div className='cp-field'>
                <label htmlFor='last_name'>Apellido</label>
                <input
                  type='text'
                  name='last_name'
                  ref={register}
                  defaultValue={watch('last_name')}
                />
                {errors.last_name && (
                  <FormErrorFeedback>
                    Por favor ingrese su apellido
                  </FormErrorFeedback>
                )}
              </div>
            </div>

            <div className='inputs__container'>
              <div className='cp-field'>
                <label htmlFor='email'>Email</label>
                <input
                  type='text'
                  name='email'
                  ref={register}
                  defaultValue={watch('email')}
                />
                {errors.email && (
                  <FormErrorFeedback>
                    Por favor ingrese un correo electrónico valido
                  </FormErrorFeedback>
                )}
              </div>
              <div className='cp-field'>
                <label htmlFor='phone'>Teléfono</label>
                <input
                  name='phone'
                  ref={register({
                    required: 'Por favor ingrese su número de teléfono',
                    pattern: {
                      message: 'Por favor ingrese un número de teléfono válido',
                      value:
                        /^\+[1-9]{1}[0-9]{0,2}[2-9]{1}[0-9]{2}[2-9]{1}[0-9]{2}[0-9]{4}$/
                    }
                  })}
                  defaultValue={watch('phone')}
                />
                {errors.phone && (
                  <FormErrorFeedback>{errors.phone.message}</FormErrorFeedback>
                )}
              </div>
            </div>

            <div className='inputs__container'>
              <div className='cp-field'>
                <label htmlFor='gender'>Género</label>
                <select
                  defaultValue={watch('gender')}
                  name='gender'
                  ref={register}
                >
                  <option value='' hidden>
                    Seleccione un género
                  </option>
                  <option value='m'>Masculino</option>
                  <option value='f'>Femenino</option>
                </select>
                {errors.gender && (
                  <FormErrorFeedback>
                    Por favor selecciona un genero
                  </FormErrorFeedback>
                )}
              </div>

              <div className='cp-field'>
                <label htmlFor='timezone'>Zona horaria</label>
                <select
                  name='timezone'
                  ref={register}
                  defaultValue={watch('timezone')}
                >
                  <option value='' hidden>
                    Zona horaria
                  </option>
                  {Object.entries(timezones).map(([key, value]) => (
                    <option value={key} key={key}>
                      {value}
                    </option>
                  ))}
                </select>
                {errors.timezone && (
                  <FormErrorFeedback>
                    Por favor selecciona una zona horaria
                  </FormErrorFeedback>
                )}
              </div>
            </div>

            <div className='cp-field'>
              <label htmlFor='timezone'>Eres mayor de 18</label>
              <SwitchInput
                isChecked={isAdult}
                setValue={(value) => setIsAdult(value)}
              />
            </div>

            <button type='submit' className='btn btn-primary mt-3'>
              Guardar
            </button>
          </form>
        )}
      </Widget.Body>
    </Widget>
  )
}

const mapDispatchToProps = {
  addNotification: (notification) => addNotification(notification)
}

export default connect(null, mapDispatchToProps)(BasicSettings)