Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import { useForm } from 'react-hook-form'
import { Button, styled } from '@mui/material'

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 Input from '@components/UI/inputs/Input'
import Select from '@components/UI/inputs/Select'
import Spinner from '@app/components/UI/Spinner'
import SwitchInput from '@app/components/UI/SwitchInput'

const Row = styled('div')(({ theme }) => ({
  display: 'flex',
  gap: theme.spacing(0.5)
}))

const BasicSettings = ({
  addNotification = function () {} // Redux action
}) => {
  const { data: timezones } = useFetch('/helpers/timezones')
  const { data, isLoading } = useFetch('/account-settings/basic')

  const { register, control, handleSubmit, setValue, watch, errors } = useForm({
    defaultValues: {
      first_name: '',
      last_name: '',
      email: '',
      phone: '',
      gender: 'm',
      timezones: '',
      is_adult: 'n'
    }
  })
  const watchedIsAdult = watch('is_adult') === 'y'

  const onSubmit = handleSubmit(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('first_name')
    register('last_name')
    register('email')
    register('phone')
    register('gender')
    register('timezones')
  }, [])

  useEffect(() => {
    Object.entries(data).forEach(([key, value]) => {
      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={onSubmit}>
          <Row>
            <Input
              label='Nombre'
              name='first_name'
              control={control}
              error={errors.first_name?.message}
              rules={{ required: 'Este campo es requerido' }}
            />
            <Input
              label='Apellido'
              name='last_name'
              control={control}
              error={errors.last_name?.message}
              rules={{ required: 'Este campo es requerido' }}
            />
          </Row>

          <Row>
            <Input
              label='Correo'
              name='email'
              control={control}
              error={errors.email?.message}
              rules={{ required: 'Este campo es requerido' }}
            />
            <Input
              label='Teléfono'
              name='phone'
              control={control}
              error={errors.phone?.message}
              rules={{
                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}$/
                }
              }}
            />
          </Row>

          <Row>
            <Select
              label='Género'
              name='gender'
              control={control}
              error={errors.gender?.message}
              options={[
                { name: 'Masculino', value: 'm' },
                { name: 'Femenino', value: 'f' }
              ]}
            />
            <Select
              label='Zona horaria'
              name='timezones'
              control={control}
              error={errors.timezones?.message}
              options={Object.entries(timezones).map(([key, value]) => ({
                name: key,
                value
              }))}
            />
          </Row>

          <SwitchInput
            label='Eres mayor de 18'
            isChecked={watchedIsAdult}
            setValue={(value) => setValue('is_adult', value ? 'y' : 'n')}
          />

          <Button variant='primary' type='submit'>
            Guardar
          </Button>
        </form>
      </Widget.Body>
    </Widget>
  )
}

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

export default connect(null, mapDispatchToProps)(BasicSettings)