Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3432 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3432 Rev 3697
Línea 1... Línea 1...
1 
import React from 'react'
 1 
import React from 'react';
2 
import { useDispatch } 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';
5 
 
 5 
 
6 
import { useFetch } from '@hooks'
 6 
import { useFetch } from '@hooks';
7 
import { axios } from '@app/utils'
 7 
import { axios } from '@app/utils';
8 
import { addNotification } from '@app/redux/notification/notification.actions'
 8 
import { addNotification } from '@app/redux/notification/notification.actions';
9 
 
 9 
 
10 
import Widget from '@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';
13 
import Spinner from '@components/UI/Spinner'
 13 
import Spinner from '@components/UI/Spinner';
14 
import SwitchInput from '@components/UI/SwitchInput'
 14 
import SwitchInput from '@components/UI/SwitchInput';
Línea 15... Línea 15...
15 
 
 15 
 
16 
const Row = styled('div')(({ theme }) => ({
 16 
const Row = styled('div')(({ theme }) => ({
17 
  display: 'flex',
 17 
  display: 'flex',
18 
  gap: theme.spacing(0.5)
 18 
  gap: theme.spacing(0.5)
Línea 19... Línea 19...
19 
}))
 19 
}));
20 
 
 20 
 
21 
const BasicSettings = () => {
 21 
const BasicSettings = () => {
22 
  const { data: timezones } = useFetch('/helpers/timezones')
 22 
  const { data: timezones } = useFetch('/helpers/timezones');
Línea 23... Línea 23...
23 
  const { data: formValues, isLoading } = useFetch('/account-settings/basic')
 23 
  const { data: formValues, isLoading } = useFetch('/account-settings/basic');
24 
  const dispatch = useDispatch()
 24 
  const dispatch = useDispatch();
25 
 
 25 
 
26 
  const {
 26 
  const {
Línea 38... Línea 38...
38 
      gender: 'm',
 38 
      gender: 'm',
39 
      timezone: '',
 39 
      timezone: '',
40 
      is_adult: 'n'
 40 
      is_adult: 'n'
41 
    },
 41 
    },
42 
    values: formValues
 42 
    values: formValues
43 
  })
 43 
  });
44 
  const watchedIsAdult = watch('is_adult') === 'y'
 44 
  const watchedIsAdult = watch('is_adult') === 'y';
Línea 45... Línea 45...
45 
 
 45 
 
46 
  const onSubmit = handleSubmit(async (data) => {
 46 
  const onSubmit = handleSubmit(async (data) => {
47 
    const formData = new FormData()
 47 
    const formData = new FormData();
Línea 48... Línea 48...
48 
    Object.entries(data).map(([key, value]) => formData.append(key, value))
 48 
    Object.entries(data).map(([key, value]) => formData.append(key, value));
49 
 
 49 
 
50 
    try {
 50 
    try {
51 
      const response = await axios.post('/account-settings/basic', formData)
 51 
      const response = await axios.post('/account-settings/basic', formData);
52 
      dispatch(addNotification({ style: 'success', msg: response.data.data }))
 52 
      dispatch(addNotification({ style: 'success', msg: response.data.data }));
53 
    } catch (error) {
 53 
    } catch (error) {
54 
      dispatch(addNotification({ style: 'danger', msg: error.message }))
 54 
      dispatch(addNotification({ style: 'danger', msg: error.message }));
Línea 55... Línea 55...
55 
    }
 55 
    }
56 
  })
 56 
  });
57 
 
 57 
 
Línea 58... Línea 58...
58 
  if (isLoading) {
 58 
  if (isLoading) {
59 
    return <Spinner />
 59 
    return <Spinner />;
60 
  }
 60 
  }
Línea 97... Línea 97...
97 
              error={errors.phone?.message}
 97 
              error={errors.phone?.message}
98 
              rules={{
 98 
              rules={{
99 
                required: 'Por favor ingrese su número de teléfono',
 99 
                required: 'Por favor ingrese su número de teléfono',
100 
                pattern: {
 100 
                pattern: {
101 
                  message: 'Por favor ingrese un número de teléfono válido',
 101 
                  message: 'Por favor ingrese un número de teléfono válido',
102 
                  value:
 - 
 
103 
                    /^\+[1-9]{1}[0-9]{0,2}[2-9]{1}[0-9]{2}[2-9]{1}[0-9]{2}[0-9]{4}$/
 102 
                  value: /^\+[1-9]{1}[0-9]{0,2}[2-9]{1}[0-9]{2}[2-9]{1}[0-9]{2}[0-9]{4}$/
104 
                }
 103 
                }
105 
              }}
 104 
              }}
106 
            />
 105 
            />
107 
          </Row>
 106 
          </Row>
Línea 112... Línea 111...
112 
              name='gender'
 111 
              name='gender'
113 
              control={control}
 112 
              control={control}
114 
              rules={{ required: 'Este campo es requerido' }}
 113 
              rules={{ required: 'Este campo es requerido' }}
115 
              error={errors.gender?.message}
 114 
              error={errors.gender?.message}
116 
              options={[
 115 
              options={[
117 
                { name: 'Masculino', value: 'm' },
 116 
                { label: 'Masculino', value: 'm' },
118 
                { name: 'Femenino', value: 'f' }
 117 
                { label: 'Femenino', value: 'f' }
119 
              ]}
 118 
              ]}
120 
            />
 119 
            />
121 
            <Select
 120 
            <Select
122 
              label='Zona horaria'
 121 
              label='Zona horaria'
123 
              name='timezone'
 122 
              name='timezone'
124 
              control={control}
 123 
              control={control}
125 
              rules={{ required: 'Este campo es requerido' }}
 124 
              rules={{ required: 'Este campo es requerido' }}
126 
              error={errors.timezone?.message}
 125 
              error={errors.timezone?.message}
127 
              options={Object.entries(timezones).map(([key, value]) => ({
 126 
              options={Object.entries(timezones).map(([key, value]) => ({
128 
                name: key,
 127 
                label: key,
129 
                value
 128 
                value
130 
              }))}
 129 
              }))}
131 
            />
 130 
            />
132 
          </Row>
 131 
          </Row>
Línea 141... Línea 140...
141 
            Guardar
 140 
            Guardar
142 
          </Button>
 141 
          </Button>
143 
        </form>
 142 
        </form>
144 
      </Widget.Body>
 143 
      </Widget.Body>
145 
    </Widget>
 144 
    </Widget>
146 
  )
 145 
  );
147 
}
 146 
};
Línea 148... Línea 147...
148 
 
 147