Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2785 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 2785 Rev 2786
Línea 1... Línea 1...
1 
import React, { useEffect } from 'react'
 1 
import React from 'react'
2 
import { connect } from 'react-redux'
 2 
import { useDispatch } from 'react-redux'
3 
import { useForm } from 'react-hook-form'
 3 
import { useForm } from 'react-hook-form'
4 
import { Button, styled } from '@mui/material'
 4 
import { Button, styled } from '@mui/material'
Línea 5... Línea 5...
5 
 
 5 
 
6 
import { useFetch } from '@hooks'
 6 
import { useFetch } from '@hooks'
7 
import { axios } from '@app/utils'
 7 
import { axios } from '@app/utils'
Línea 8... Línea 8...
8 
import { addNotification } from '@app/redux/notification/notification.actions'
 8 
import { addNotification } from '@app/redux/notification/notification.actions'
9 
 
 9 
 
10 
import Widget from '@app/components/UI/Widget'
 10 
import Widget from '@components/UI/Widget'
11 
import Input from '@components/UI/inputs/Input'
 11 
import Input from '@components/UI/inputs/Input'
12 
import Select from '@components/UI/inputs/Select'
 12 
import Select from '@components/UI/inputs/Select'
Línea 13... Línea 13...
13 
import Spinner from '@app/components/UI/Spinner'
 13 
import Spinner from '@components/UI/Spinner'
14 
import SwitchInput from '@app/components/UI/SwitchInput'
 14 
import SwitchInput from '@components/UI/SwitchInput'
15 
 
 15 
 
16 
const Row = styled('div')(({ theme }) => ({
 16 
const Row = styled('div')(({ theme }) => ({
Línea 17... Línea 17...
17 
  display: 'flex',
 17 
  display: 'flex',
18 
  gap: theme.spacing(0.5)
 - 
 
19 
}))
 - 
 
20 
 
 18 
  gap: theme.spacing(0.5)
21 
const BasicSettings = ({
 19 
}))
- 
 
 20 
 
Línea 22... Línea 21...
22 
  addNotification = function () {} // Redux action
 21 
const BasicSettings = () => {
23 
}) => {
 22 
  const { data: timezones } = useFetch('/helpers/timezones')
24 
  const { data: timezones } = useFetch('/helpers/timezones')
 23 
  const { data: values, isLoading } = useFetch('/account-settings/basic')
25 
  const { data, isLoading } = useFetch('/account-settings/basic')
 24 
  const dispatch = useDispatch()
26 
 
 25 
 
27 
  const { register, control, handleSubmit, setValue, watch, errors } = useForm({
 26 
  const { control, handleSubmit, setValue, watch, errors } = useForm({
28 
    defaultValues: {
 27 
    defaultValues: {
29 
      first_name: '',
 28 
      first_name: '',
30 
      last_name: '',
 29 
      last_name: '',
31 
      email: '',
 30 
      email: '',
- 
 
 31 
      phone: '',
32 
      phone: '',
 32 
      gender: 'm',
33 
      gender: 'm',
 33 
      timezones: '',
Línea 34... Línea 34...
34 
      timezones: '',
 34 
      is_adult: 'n'
35 
      is_adult: 'n'
 35 
    },
36 
    }
 36 
    values
Línea 37... Línea 37...
37 
  })
 37 
  })
38 
  const watchedIsAdult = watch('is_adult') === 'y'
 38 
  const watchedIsAdult = watch('is_adult') === 'y'
39 
 
 39 
 
40 
  const onSubmit = handleSubmit(async (data) => {
 - 
 
41 
    const formData = new FormData()
 - 
 
42 
    Object.entries(data).map(([key, value]) => formData.append(key, value))
 - 
 
43 
 
 - 
 
44 
    axios
 - 
 
45 
      .post('/account-settings/basic', formData)
 - 
 
46 
      .then(({ data: responseData }) => {
 - 
 
47 
        const { data, success } = responseData
 - 
 
48 
 
 - 
 
49 
        if (!success) {
 - 
 
50 
          const errorMessage =
 - 
 
51 
            typeof data === 'string'
 - 
 
52 
              ? data
 - 
 
53 
              : Object.entries(data)
 40 
  const onSubmit = handleSubmit(async (data) => {
54 
                  .map(([key, value]) => `${key}: ${value}`)
 41 
    const formData = new FormData()
55 
                  .join(', ')
 42 
    Object.entries(data).map(([key, value]) => formData.append(key, value))
56 
 
 43 
 
57 
          throw new Error(errorMessage)
 44 
    axios
58 
        }
 45 
      .post('/account-settings/basic', formData)
Línea 59... Línea -...
59 
 
 - 
 
60 
        addNotification({ style: 'success', msg: data })
 - 
 
61 
      })
 - 
 
62 
      .catch((err) => {
 - 
 
63 
        addNotification({ style: 'danger', msg: err.message })
 - 
 
64 
      })
 - 
 
65 
  })
 - 
 
66 
 
 - 
 
67 
  useEffect(() => {
 - 
 
68 
    register('first_name')
 - 
 
69 
    register('last_name')
 - 
 
70 
    register('email')
 - 
 
71 
    register('phone')
 - 
 
72 
    register('gender')
 - 
 
73 
    register('timezones')
 - 
 
74 
  }, [])
 46 
      .then((response) => {
75 
 
 47 
        dispatch(addNotification({ style: 'success', msg: response.data }))
76 
  useEffect(() => {
 48 
      })
Línea 77... Línea 49...
77 
    Object.entries(data).forEach(([key, value]) => {
 49 
      .catch((err) => {
Línea 133... Línea 105...
133 
          <Row>
 105 
          <Row>
134 
            <Select
 106 
            <Select
135 
              label='Género'
 107 
              label='Género'
136 
              name='gender'
 108 
              name='gender'
137 
              control={control}
 109 
              control={control}
- 
 
 110 
              rules={{ required: 'Este campo es requerido' }}
138 
              error={errors.gender?.message}
 111 
              error={errors.gender?.message}
139 
              options={[
 112 
              options={[
140 
                { name: 'Masculino', value: 'm' },
 113 
                { name: 'Masculino', value: 'm' },
141 
                { name: 'Femenino', value: 'f' }
 114 
                { name: 'Femenino', value: 'f' }
142 
              ]}
 115 
              ]}
143 
            />
 116 
            />
144 
            <Select
 117 
            <Select
145 
              label='Zona horaria'
 118 
              label='Zona horaria'
146 
              name='timezones'
 119 
              name='timezones'
147 
              control={control}
 120 
              control={control}
- 
 
 121 
              rules={{ required: 'Este campo es requerido' }}
148 
              error={errors.timezones?.message}
 122 
              error={errors.timezones?.message}
149 
              options={Object.entries(timezones).map(([key, value]) => ({
 123 
              options={Object.entries(timezones).map(([key, value]) => ({
150 
                name: key,
 124 
                name: key,
151 
                value
 125 
                value
152 
              }))}
 126 
              }))}
Línea 157... Línea 131...
157 
            label='Eres mayor de 18'
 131 
            label='Eres mayor de 18'
158 
            isChecked={watchedIsAdult}
 132 
            isChecked={watchedIsAdult}
159 
            setValue={(value) => setValue('is_adult', value ? 'y' : 'n')}
 133 
            setValue={(value) => setValue('is_adult', value ? 'y' : 'n')}
160 
          />
 134 
          />
Línea 161... Línea 135...
161 
 
 135 
 
162 
          <Button variant='primary' type='submit'>
 136 
          <Button variant='primary' type='submit' sx={{ marginTop: 1 }}>
163 
            Guardar
 137 
            Guardar
164 
          </Button>
 138 
          </Button>
165 
        </form>
 139 
        </form>
166 
      </Widget.Body>
 140 
      </Widget.Body>
167 
    </Widget>
 141 
    </Widget>
168 
  )
 142 
  )
Línea 169... Línea -...
169 
}
 - 
 
170 
 
 - 
 
171 
const mapDispatchToProps = {
 - 
 
172 
  addNotification: (notification) => addNotification(notification)
 - 
 
173 
}
 143 
}