Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2794 | Rev 2797 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
2786 stevensc 1 
import React from 'react'
2 
import { useDispatch } from 'react-redux'
2781 stevensc 3 
import { useForm } from 'react-hook-form'
2784 stevensc 4 
import { Button, styled } from '@mui/material'
2781 stevensc 5 
 
6 
import { useFetch } from '@hooks'
7 
import { axios } from '@app/utils'
8 
import { addNotification } from '@app/redux/notification/notification.actions'
9 
 
2786 stevensc 10 
import Widget from '@components/UI/Widget'
2784 stevensc 11 
import Input from '@components/UI/inputs/Input'
12 
import Select from '@components/UI/inputs/Select'
2786 stevensc 13 
import Spinner from '@components/UI/Spinner'
14 
import SwitchInput from '@components/UI/SwitchInput'
2781 stevensc 15 
 
2784 stevensc 16 
const Row = styled('div')(({ theme }) => ({
17 
  display: 'flex',
18 
  gap: theme.spacing(0.5)
19 
}))
20 
 
2786 stevensc 21 
const BasicSettings = () => {
2782 stevensc 22 
  const { data: timezones } = useFetch('/helpers/timezones')
2796 stevensc 23 
  const { data: formValues, isLoading } = useFetch('/account-settings/basic')
2786 stevensc 24 
  const dispatch = useDispatch()
2781 stevensc 25 
 
2789 stevensc 26 
  const {
27 
    control,
28 
    handleSubmit,
29 
    watch,
30 
    setValue,
2794 stevensc 31 
    formState: { errors }
2789 stevensc 32 
  } = useForm({
2784 stevensc 33 
    defaultValues: {
34 
      first_name: '',
35 
      last_name: '',
36 
      email: '',
37 
      phone: '',
38 
      gender: 'm',
2791 stevensc 39 
      timezone: '',
2784 stevensc 40 
      is_adult: 'n'
2789 stevensc 41 
    },
42 
    values: formValues
2784 stevensc 43 
  })
44 
  const watchedIsAdult = watch('is_adult') === 'y'
2781 stevensc 45 
 
2785 stevensc 46 
  const onSubmit = handleSubmit(async (data) => {
2781 stevensc 47 
    const formData = new FormData()
48 
    Object.entries(data).map(([key, value]) => formData.append(key, value))
49 
 
50 
    axios
51 
      .post('/account-settings/basic', formData)
2786 stevensc 52 
      .then((response) => {
2791 stevensc 53 
        dispatch(addNotification({ style: 'success', msg: response.data.data }))
2781 stevensc 54 
      })
55 
      .catch((err) => {
2786 stevensc 56 
        dispatch(addNotification({ style: 'danger', msg: err.message }))
2781 stevensc 57 
      })
2785 stevensc 58 
  })
2781 stevensc 59 
 
2782 stevensc 60 
  if (isLoading) {
61 
    return <Spinner />
2781 stevensc 62 
  }
63 
 
64 
  return (
65 
    <Widget>
66 
      <Widget.Header title='Información básica' />
67 
 
68 
      <Widget.Body>
2785 stevensc 69 
        <form onSubmit={onSubmit}>
2784 stevensc 70 
          <Row>
71 
            <Input
72 
              label='Nombre'
73 
              name='first_name'
74 
              control={control}
75 
              error={errors.first_name?.message}
76 
              rules={{ required: 'Este campo es requerido' }}
77 
            />
78 
            <Input
79 
              label='Apellido'
80 
              name='last_name'
81 
              control={control}
82 
              error={errors.last_name?.message}
83 
              rules={{ required: 'Este campo es requerido' }}
84 
            />
85 
          </Row>
2781 stevensc 86 
 
2784 stevensc 87 
          <Row>
88 
            <Input
89 
              label='Correo'
90 
              name='email'
91 
              control={control}
92 
              error={errors.email?.message}
93 
              rules={{ required: 'Este campo es requerido' }}
94 
            />
95 
            <Input
96 
              label='Teléfono'
97 
              name='phone'
98 
              control={control}
99 
              error={errors.phone?.message}
100 
              rules={{
101 
                required: 'Por favor ingrese su número de teléfono',
102 
                pattern: {
103 
                  message: 'Por favor ingrese un número de teléfono válido',
104 
                  value:
105 
                    /^\+[1-9]{1}[0-9]{0,2}[2-9]{1}[0-9]{2}[2-9]{1}[0-9]{2}[0-9]{4}$/
106 
                }
107 
              }}
108 
            />
109 
          </Row>
2781 stevensc 110 
 
2784 stevensc 111 
          <Row>
112 
            <Select
113 
              label='Género'
114 
              name='gender'
115 
              control={control}
2786 stevensc 116 
              rules={{ required: 'Este campo es requerido' }}
2784 stevensc 117 
              error={errors.gender?.message}
118 
              options={[
119 
                { name: 'Masculino', value: 'm' },
120 
                { name: 'Femenino', value: 'f' }
121 
              ]}
122 
            />
123 
            <Select
124 
              label='Zona horaria'
2791 stevensc 125 
              name='timezone'
2784 stevensc 126 
              control={control}
2791 stevensc 127 
              rules={{ required: 'Este campo es requerido' }}
128 
              error={errors.timezone?.message}
2784 stevensc 129 
              options={Object.entries(timezones).map(([key, value]) => ({
130 
                name: key,
131 
                value
132 
              }))}
133 
            />
134 
          </Row>
2781 stevensc 135 
 
2784 stevensc 136 
          <SwitchInput
137 
            label='Eres mayor de 18'
138 
            isChecked={watchedIsAdult}
139 
            setValue={(value) => setValue('is_adult', value ? 'y' : 'n')}
140 
          />
2781 stevensc 141 
 
2786 stevensc 142 
          <Button variant='primary' type='submit' sx={{ marginTop: 1 }}>
2782 stevensc 143 
            Guardar
2784 stevensc 144 
          </Button>
2782 stevensc 145 
        </form>
2781 stevensc 146 
      </Widget.Body>
147 
    </Widget>
148 
  )
149 
}
150 
 
2786 stevensc 151 
export default BasicSettings