Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect } 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 { data, isLoading } = useFetch('/account-settings/basic')

  const { register, handleSubmit, setValue, watch, errors, getValues } =

    useForm()

  const onSubmit = async (data) => {

    const formData = new FormData()

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

      })

  }

  useEffect(() => {

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

  }, [])

  useEffect(() => {

    Object.entries(data).forEach(([key, value]) => {

      const currentValue = getValues(key)

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

      setValue(key, key === 'is_adult' ? value === 'y' : value)

    })

  }, [data])

  if (isLoading) {

    return <Spinner />

  }

  return (

    <Widget>

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

      <Widget.Body>

        <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={watch('is_adult')}

              setValue={(value) => setValue('is_adult', 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)