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)