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)